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

 

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

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

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

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

 

 

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

1、安裝

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

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

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

2、嘗試創建項目

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

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

3、分析樣板項目

項目創建后延續以往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 為每一個元素、屬性、事件指定一個編號。更多的內容還有待我以后挖掘，好了今天就到這里了，休息休息一下。