經過Blazor使用C#開發SPA單頁面應用程序(2) - 開發環境

 

經過Blazor使用C#開發SPA單頁面應用程序(1) - 簡介及特色

經過Blazor使用C#開發SPA單頁面應用程序(2) - 開發環境

經過Blazor使用C#開發SPA單頁面應用程序(3) - 基礎知識

 經過Blazor使用C#開發SPA單頁面應用程序(4) - Ant Design Button

 

 

今天咱們嘗試建立一個默認的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 爲每個元素、屬性、事件指定一個編號。更多的內容還有待我之後挖掘，好了今天就到這裏了，休息休息一下。