今天我們嘗試創建一個默認的Blazor應用。

.Net Core 3.0需要Visual Studio 2019 的支持。

安裝.Net Core 3.0 預覽版 SDK版本，注意預覽版對應的VS版本，我這里安裝的是v3.0.0-preview6。

一定要開啟預覽選項才能使用Net Core Preview，在工具> 選項>預覽功能?中開啟。

新建Asp.net Core Web 應用程序，項目名稱：BlazorDemo

目前Blazor只能創建基于服務器端渲染的項目。

項目創建后延續以往Asp.net風格，模板會創建項目框架及樣例頁面，運行后會得到這樣一個SPA頁面。我們通過開發者工具觀察，點擊Click me按鈕后，右側的元素中只是數值Dom節點有變化，其他沒有，達到局部更新的效果。

我們在看看項目解決方案的結構，好熟悉啊，基本完全就是Asp.net mvc 的結構嘛。

這個 _Host.cshtml 頁面應該就是Blazor的主頁面，類似vue 的index.html 頁。

我們再看看那個Counter 的計數器組件是如何實現的。

@page?"/counter" <h1>Counter</h1> <p>Current count:?@currentCount</p> <button?class="btn btn-primary"?@onclick="@IncrementCount">Click me</button> @code?{ int?currentCount = 0; void?IncrementCount() { currentCount++; } }

@page?"/counter"?定義路由

<p>Current count:?@currentCount</p>?顯示計數器變量值

<button?class="btn btn-primary"?@onclick="@IncrementCount">Click me</button>

指定樣式，綁定onclick事件，調用IncrementCount方法

void?IncrementCount()

{

?? currentCount++;?計數器+1

}

上面的代碼雖然簡單，但充分說明了Blazor組件開發的模式，有C#和Asp.net mvc 開發經驗的完全可以駕馭。

那么Blazor組件是如何做到局部更新的呢，原來上面的代碼經過編譯后會生成以下內容，RenderTreeBuilder 為每一個元素、屬性、事件指定一個編號。更多的內容還有待我以后挖掘，好了今天就到這里了，休息休息一下。

原文鏈接：https://www.cnblogs.com/liuxtj/p/11347219.html

---

.NET社區新聞，深度好文，歡迎訪問公眾號文章匯總?http://www.csharpkit.com?

總結

以上是生活随笔為你收集整理的通过Blazor使用C#开发SPA单页面应用程序(2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。