今天我們嘗試創(chuàng)建一個默認的Blazor應(yīng)用。

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

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

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

新建Asp.net Core Web 應(yīng)用程序，項目名稱：BlazorDemo

目前Blazor只能創(chuàng)建基于服務(wù)器端渲染的項目。

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

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

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

我們再看看那個Counter 的計數(shù)器組件是如何實現(xiàn)的。

@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>?顯示計數(shù)器變量值

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

指定樣式，綁定onclick事件，調(diào)用IncrementCount方法

void?IncrementCount()

{

?? currentCount++;?計數(shù)器+1

}

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

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

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

---

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。