整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Application、Session、Cookie

          Application、Session、Cookie、ViewState、Cache、Hidden區別

          些對象都是用來保存信息的,包括用戶信息,傳遞值的信息,全局信息等等。下面主要說一下他們之間的區別:

          1.Application對象
          Application用于保存所有用戶的公共的數據信息,如果使用Application對象,一個需要考慮的問題是任何寫操作都要在Application_OnStart事件(global.asax)中完成.盡管使用Application.Lock和Applicaiton.Unlock方法來避免寫操作的同步,但是它串行化了對Application對象的請求,當網站訪問量大的時候會產生嚴重的性能瓶頸.因此最好不要用此對象保存大的數據集合. 下面我們做個在線用戶統計的例子來說明這個問題:
          (以文件的形式存放網站總訪問量)

          Global.asax類
          代碼:

          一節我們實現了分類樹的右鍵菜單彈出,本節我們繼續實現數據從瀏覽器到數據庫的工作。


          完善菜單內容

          我們先來豐富右鍵菜單的選項,在Menu控件中添加MenuItem,分別是修改節點和刪除節點:

          <Menu Style="@menuStyle">
          ???????<MenuItem OnClick="CreateNode">
          ???????????@menu_create_text
          ???????</MenuItem>
          ???????<MenuItem OnClick="ModifyNode">
          ???????????修改節點
          ???????</MenuItem>
          ???????<MenuItem OnClick="DeleteNode">
          ???????????刪除節點
          ???????</MenuItem>
          ???</Menu>

          由于修改和刪除不像創建涉及到不同的名稱,所以菜單文章內容直接寫死。事件響應代碼一并復制就好。

          void ModifyNode(MouseEventArgs args)
          {
          menuStyle="display:none;";
          }
          
          void DeleteNode(MouseEventArgs args)
          {
          menuStyle="display:none;";
          }

          運行效果:


          創建分類編輯組件

          我們的右鍵菜單現在有了事件觸發,接下來要彈出分類編輯頁面來錄入信息。我們首先需要創建一個名為CategoryEdit.Razor組件,過程跟上一節我們創建ContextMenuPanel一樣。如下圖:

          這個過程我們以后就不再講了。

          有同學私信問不使用Ant Design組件,直接用Blazor系統的組件可行嗎?我覺得這個問題比較有代表性,所以這個CategoryEdit我就不使用Ant Design的組件來完成。先上完整的代碼吧:

          <div style="width:100%; display:@display;">
          <div class="page">
          <div @onclick="toggle" id="close">X</div>
          <div style="padding: 10px;">
          <ul>
          <li class="item"><span>編碼:</span><input @bind="@Value.Id" /></li>
          ???????????????<li class="item"><span>名稱:</span><input @bind="@Value.Name" /></li>
          ???????????????<li class="item"><span>所屬Id:</span><input @bind="@Value.ParentId" /></li>
          ???????????</ul>
          ???????????<ul>
          ???????????????<li class="item">
          ???????????????????<span>是否有子類:</span>
          ???????????????????<select @bind="@has_child">
          ???????????????????????<option value="1">true</option>
          ???????????????????????<option value="0">false</option>
          ???????????????????</select>
          ???????????????</li>
          ???????????????<li class="item"><span>分類類型:</span><input @bind="@Value.Type" /></li>
          ???????????????<li class="item"><span>顯示順序:</span><input @bind="@Value.ShowOrder" /></li>
          ???????????</ul>
          ???????????<div>
          ???????????????<label>分類描述:</label>
          ???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Description></textarea>
          ???????????????<label>備注:</label>
          ???????????????????<textarea style="width:100%; min-height:200px;" @bind=@Value.Remark></textarea>
          ???????????</div>
          ???????????<button @onclick="save">保存</button>
          ???????</div>
          ???</div>
          </div>
          
          @code {
          ???string display="none";
          
          ???public void toggle()
          ???{
          ???????display=(display=="none") ? "block" : "none";
          ???}
          
          ???[Parameter]
          ???public EventCallback OnSave { get; set; }
          
          ???[Parameter]
          ???public Model.Category Value { get; set; }
          
          ???int has_child=0;
          ???void save()
          ???{
          ???????Value.HasChild=(has_child==0) ? false : true;
          ???????if (OnSave.HasDelegate) OnSave.InvokeAsync();
          ???}
          }

          樣式文件CategoryEdit.razor.css

          .page { width:960px; border: 1px solid #CCC; margin-left:auto; margin-right:auto; }
          .item { width: 280px; list-style:none; display: inline-block; }
          .item span { width: 100px; display: inline-block; }
          #close {
              position: relative;
              text-align: center;
              cursor: pointer;
              background: #FCC;
              float: right;
              width: 20px;
              height: 20px;
          }
              #close:hover {
                  background-color: #F00;
              }

          上部分為html元素標簽,具體標簽和布局就不展開講了。

          @display是引用下面code中的變量,只要display的值變化,這里就會隨之生效;

          @onclick是綁定click事件;用到了兩處,一個是右上角的關閉按鈕,一個是下方的保存按鈕;

          @bind="@Value.Id跟上面的@display類似,只是這個用于控件,控件的值與變量值雙向綁定;

          public void toggle()是切換是否顯示的方法,默認隱藏,調用一次就切換一次;

          [Parameter]是定義CategoryEdit組件的屬性;

          public EventCallback OnSave是聲明一個OnSave的函數作為回調;

          public Model.Category Value是要編輯或新建的Category數據實體;

          int has_child是對應Model.Category中的HasChild,在標準select及option中無法直接綁定bool類型的熟知,所以用has_child來作為媒介;

          void save()則是保存函數,做數據處理后回調OnSave;

          css文件在blazor中是隔離的,即聲明一個跟razor組件同名的css文件,它就會從屬于這個razor組件,只對這個razor生效,這樣可以很好的解決不同css文件命名相互沖突的問題。

          上面完全都是靠代碼堆的,這里有點沒想明白為什么微軟不延續winform、webform的所見即所得的方式,哪怕是有個設計視圖瀏覽也好。難道是技術上過于復雜嗎?目前以Blazor這種開發方式,想要看到修改效果,哪怕是只調一個顏色,都只能重新編譯運行才能看到效果,非常影響開發效率。以前webform的那種,改前端根本需要編譯,重新刷新頁面就好。希望這里未來能有改進。


          調用分類編輯組件

          CategoryEdit組件設計完成后,我們就可以在Index.razor中使用它了

          <CategoryEdit @ref="categoryEditor" Value="@curCategory" OnSave="@SaveCategory"></CategoryEdit>
          @code {
          CategoryEdit categoryEditor;
          Model.Category curCategory=new Model.Category();
          void SaveCategory()
          {
          }
          }


          我們只需要這幾行代碼就夠了。對屬性賦值,響應事件。然后我們先來看下效果:

          我們可以看到,調用完成后,在Index.razor中的SaveCategory函數中,curCategory中的值就都有了。實際上我們用的控件庫,比如Ant Design也都是這樣一步一步來完成的,只要有時間、有耐心,啥都不是事。


          到目前為止,我們已經完成了前端的數據準備,接下來我們就是要通過WebAPI正式向服務器提交信息了。在一般的公司中,前端和后端都是分開不同團隊來做的,后端做完提供接口,前端按照接口規范進行調用。那我們接下來的事情就是要做后端的工作了,考慮到同樣編碼內容較多,這節暫時到這里,我們下節繼續。

          ----------------------------------------------------

          本教程項目源碼已作為開源項目加入到Gitee,代碼內容會隨教程實時更新,大家有興趣的話可以關注我,以獲得最及時的更新。私信:

          私人日記 可以獲取相關鏈接;

          大家閱讀過程中有哪些看不懂或未盡興的地方,可以在評論區留言,我會先記下來在后續的教程中找機會再說。

          教程有幫助的話請大家幫忙關注、轉發、擴散,能不能開專欄還需要你們的支持!

          lazor 是一個 Microsoff ASP.NET Core 框架,用它無需任何附加組件或插件即可在瀏覽器中運行.NET 應用程序。相比之下,Angular 是一種基于組件的流行 JavaScript 框架,用于構建可擴展的 Web 應用程序。


          本文將深入探討 Blazor 和 Angular 之間的異同,以幫助大家為自己的下一個項目選擇最佳框架。

          Blazor 是什么?


          Blazor 是微軟新出的 ASP.NET Core Web 框架,允許開發人員在 Web 應用程序中使用 C#代碼。Blazor 應用基于現有的 Web 技術(例如 HTML 和 CSS)構建,但該框架允許開發人員使用 C#和 Razor(一種流行的模板標記語法)而不是 JavaScript 語言。Blazor 這個名稱是 Browser 和 Razor 的組合。


          使用 Blazor,開發人員能夠為在.NET 中開發的,基于 WebAssembly 的客戶端應用程序創建交互式和可復用的 Web UI。此外,它讓開發人員能夠共享代碼和庫,因為客戶端和服務端代碼都是用 C#編寫的,從而為開發人員提供了一個平臺,可以使用.NET 端到端開發充滿活力的現代單頁應用程序(SPA)。


          Blazor 的最大賣點是它使用最新的 Web 標準,并且不需要額外的插件或附加組件即可在兩個單獨的部署模型(客戶端 WebAssembly 和服務端 ASP.NET Core)中運行。


          Blazor 在 GitHub 上已經積累了超過 9K Stars,非常適合 Web 應用開發用途。但要完全理解 Blazor,我們必須深入了解它的起源。Blazor 提供了兩種開發選項,服務器和 WebAssembly。除此之外,Blazor 中還有另外三個可用的開發選項:


          • Blazor PWA:開發漸進式 Web 應用。
          • Blazor Hybrid:開發混合應用程序。
          • Blazor Native:為移動平臺創建原生應用程序。

          Blazor 中的功能


          • 使用 C#創建 Web UI。
          • 支持漸進式 Web 應用開發。
          • 創建可復用的 C#組件。
          • 完全支持服務端調試。
          • 支持服務端渲染,用于更快的 WebSocket 連接。


          下面我們討論一下 Blazor 的一些優缺點。

          Blazor 的優勢


          • Blazor 共享服務端代碼和客戶端代碼:Blazor 允許開發人員在前端和后端之間復用代碼。
          • 依賴注入:依賴注入是一個可用的對象,可以在 Blazor 中充當一個服務。Blazor 在其應用程序中使用依賴注入來實現控制反轉,它允許為對象提供依賴。在 Blazor 中,依賴注入可以分為多個類:注入器、客戶端和服務。Blazor 還有不同的注入器,例如構造器、屬性和方法。
          • Visual Studio Code:我們可以使用 Visual Studio Code 開發 Blazor 應用,因為它們都是微軟產品。當你在 Blazor 框架中開發應用程序時,VSCode 將幫助你輕松利用其各種功能。
          • 與 JavaScript 的互操作性:Blazor 使用 Blazor WebAssembly 中的互操作功能來處理 DOM 操作。此外,這個 JavaScript 功能可以在 Blazor WebAssembly 中使用瀏覽器 API 調用。因此,Blazor 應用可以將.NET 方法與 JavaScript 函數結合使用。要了解更多信息,請參閱這篇文章:在 Blazor 中使用 JavaScript 互操作的優缺點(地址:https://www.syncfusion.com/blogs/post/pros-and-cons-of-using-javascript-interop-in-blazor.aspx)。

          Blazor 的缺點


          Blazor 服務器的缺點:


          • 無離線支持:Blazor Server 必須有活動的網絡連接。如果連接失敗,應用程序將停止工作,原因是整個項目托管在服務端,需要連接到互聯網。
          • 使用 ASP.NET Core:Blazor 始終需要 ASP.NETCore 服務器才能運行。因此,如果你使用 Blazor 開發任何應用,你都應該先安裝 ASP.NETCore。


          Blazor WebAssembly 的缺點:


          • 應用程序體積:Blazor 執行時間取決于應用的體積。因此,基于 Blazor WebAssembly 構建的較重應用可能會影響性能。
          • 受限于瀏覽器:瀏覽器的功能在 Blazor 中受到限制。因此,只要瀏覽器可以處理 Blazor,應該就不會有什么問題。然而,并不是所有的瀏覽器都支持 WebAssembly,所以如果你碰巧在使用 Internet Explorer,可能就會遇到麻煩。

          Angular 是什么?


          Angular 是一個基于 TypeScript 的前端框架。它被評為世界上最受歡迎的開源 Web 框架之一。它可以幫助開發人員創建交互式用戶界面、單頁 Web 應用、高級 Web 應用等。它的前身是使用 JavaScript 的 AngularJS。但是隨著技術的發展,TypeScript 已經在 Angular 中取代了 JavaScript。


          讓我們看看使用 Angular 的一些優勢。

          Angular 的優點


          • 支持:與 Blazor 相比,使用 Angular 的社區規模非常大。因此對于 Angular 來說,我們在應用開發過程中遇到問題時,找到解決方案的機會很高。
          • 使用 TypeScript:TypeScript 有很多比 JavaScript 更好的屬性。例如,干凈、可理解和可預測的代碼在 Angular 上表現更好。
          • 可復用性:Angular 也像 Blazor 一樣支持可復用性,這對開發人員來說很有用。
          • MVVM:Angular 是一個開源的 MVVM 框架,它將程序邏輯與用戶界面控件分開。用戶可以使用模型-視圖-視圖模型(也稱為模型-視圖-綁定器)來保持代碼結構清晰、項目各自分離。他們可以快速輕松地更新、編輯和修復代碼。視圖負責托管可視項目并接收來自模型的輸入。ViewModel 連接視圖和模型。最后,模型包括了程序的邏輯。

          Angular 的缺點


          • 難學:即使對于經驗豐富的工程師來說,Angular 也是一個難以掌握、問題多多的框架。Angular 的難度來自于陡峭的學習曲線和需要深度知識才能理解的全套文檔。此外,Angular 是一個固執的框架,這意味著它有自己的做事方法,開發人員別無選擇,只能遵循它的風格。然而,一旦你掌握了 Angular,它就會成為一個非常有益的工具。
          • 搜索引擎優化:默認情況下,Angular 對搜索引擎優化并不友好。除非網站建立在服務端,否則搜索引擎爬蟲很難對其進行索引。但網站應該沒有障礙地在 SERP 中被索引和發現才對。
          • 體積較大:Angular 項目包的大小通常比其他框架的更大,這使得 Angular 應用運行緩慢。

          Blazor 與 Angular 對比


          我們來直接比較 Blazor 和 Angular。


          Angular 和 Blazor 都是開源 Web 框架。主要區別在于 Angular 使用 TypeScript,而 Blazor 使用 C#。但兩者之間存在一些關鍵差異:


          • Angular 已經存在了一段時間,但 Blazor 仍處于早期階段。
          • 每個客戶端都必須有一個活動連接,并且 Blazor 將每個客戶端的組件狀態保存在服務器上。
          • Blazor 現在提供了 scoped 組件樣式和 CSS 隔離。在 Angular 中,與組件樣式和 CSS 隔離相關的工具鏈已經非常成熟了。
          • Angular 提供了對 PWA 的支持,但服務端 Blazor 不能用作 PWA。


          下表詳細列出了 Angular 與 Blazor 的對比細節。



          編程語言、發展歷史和流行度是兩者之間最顯著的區別。因為世界各地的大公司都在使用 Angular,所以找到一份 Angular 開發人員的工作也容易得多。此外,Angular 是一個優秀的企業解決方案,它主要用于此類需求。


          你應該根據你的目標來選擇框架。如果你想確保自己選擇的框架有一個龐大的社區,可以在需要時為你提供幫助,請選擇 Angular。PWA 得到了 Angular 的強力支持,但 Blazor 的服務端尚未趕上。另一方面,Blazor 更適合熟悉 C#的開發人員,而對于經驗豐富的 TypeScript 開發人員來說,上手 Blazor 會有些麻煩。如果你正在尋找一個完善的產品,Angular 是正確的選擇。


          在選擇 Blazor 或 Angular 時,你必須考慮以下幾點:

          何時使用 Blazor:


          • 如果你是想要更快構建應用的 C#開發人員。
          • 當項目需要更快的周轉時間時。

          何時使用 Angular:


          • 如果你愿意在 Angular 上投入大量的學習努力,以從一個久經考驗的框架中獲益。
          • 如果你是一個頑固的 JavaScript 開發人員,永遠不會選擇使用.NET 進行 Web 開發。
          • 如果你需要開發具有高靈活度的最小設計應用。

          結論


          在本文中,我全面概述了 Blazor 和 Angular 各自的功能和用法。這兩個框架都令人印象深刻,但每個框架都有其優點和局限性。最終,你應根據項目要求在 Blazor 和 Angular 之間進行選擇,選出最能滿足你需求的一種。我建議閱讀它們的文檔以獲取更多信息。


          現在你知道該選擇什么了,如果你用過它們,請在下面的評論中分享你的經驗。感謝你的閱讀!


          原文鏈接:https://www.syncfusion.com/blogs/post/blazor-vs-angular.aspx/amp

          了解更多軟件開發與相關領域知識,點擊訪問 InfoQ 官網:https://www.infoq.cn/,獲取更多精彩內容!


          主站蜘蛛池模板: 日韩人妻精品一区二区三区视频| 无码少妇A片一区二区三区| 精品国产一区二区22| 在线视频一区二区三区| 狠狠综合久久av一区二区| 国产一区二区三区免费观看在线| 日韩精品一区二区三区不卡 | 亚洲福利一区二区三区| 日韩一区二区三区精品| 国产一区二区三区不卡在线看| 亚洲一区精品视频在线| 亚洲日韩精品国产一区二区三区| 亚洲视频免费一区| 亚洲国产精品无码久久一区二区| 亚洲成av人片一区二区三区| 日本高清无卡码一区二区久久 | 三上悠亚一区二区观看| 亚洲AV无码一区二区三区在线观看| 国产高清在线精品一区二区三区 | 精品国产免费一区二区三区香蕉| 精品人妻少妇一区二区三区在线| aⅴ一区二区三区无卡无码| 区三区激情福利综合中文字幕在线一区亚洲视频1 | 中文字幕色AV一区二区三区| 精品人伦一区二区三区潘金莲| 加勒比精品久久一区二区三区| 国产福利精品一区二区| 国产剧情一区二区| 精品久久久久久无码中文字幕一区| 国产精品区一区二区三在线播放 | 国产一区二区三区亚洲综合| 日韩免费无码视频一区二区三区 | 亚洲日韩国产一区二区三区在线| 天天看高清无码一区二区三区 | 无码日韩人妻av一区免费| 人妻夜夜爽天天爽爽一区| 国产高清在线精品一区二区| 欧美日韩精品一区二区在线观看| 清纯唯美经典一区二区| 午夜无码一区二区三区在线观看| 国产精品一区二区久久精品涩爱|