用C#代替Javascript來做Web應用，是有多爽？今天聊聊 Blazor。 Blazor 是一個 Web UI 框架。這個框架允許開發者使用 C# 來創建可運行於瀏覽器的具有完全交互 UI 的 Web 應用。可以理解為，這是一個 C# 語言的 Vue / Angular / React，可 ...

用C#代替Javascript來做Web應用，是有多爽？

今天聊聊 Blazor。

Blazor 是一個 Web UI 框架。這個框架允許開發者使用 C# 來創建可運行於瀏覽器的具有完全交互 UI 的 Web 應用。

可以理解為，這是一個 C# 語言的 Vue / Angular / React，可以和 HTML、CSS 一起實現可重用的 Web UI，可以和伺服器共用代碼和庫。

Blazor 擁有現代 Web 框架具備的所有功能，包括：

用於構建 composable UI 的組件模型
路由
佈局
表格和驗證
依賴註入
JavaScript 互操作
開發期間在瀏覽器中實時重新載入
伺服器端渲染
在瀏覽器和 IDE 中全面調試 .NET
能夠通過 asm.js 在較早版本的（非 WebAssembly ）瀏覽器上運行

Blazor 有兩種托管模型：

Blazor WebAssembly （blazorwasm）
Blazor Server （blazorserver）

兩種模型從應用層面沒有太大的區別，但從實際運行和佈署上，兩個模型還是有相當的區別的。

Blazor WebAssembly 應用跑在瀏覽器上，要求瀏覽器支持 WebAssembly。換句話說，早期的一些瀏覽器並不支持 WebAssembly，所以也無法使用。同時，應用在首次運行時，需要下載應用和應用依賴項和運行時到本地，所以會有個載入延時。但是，這種模型可以全部運行在客戶端，充分利用客戶端資源，對伺服器壓力小。

Blazor Server 則相反，應用跑在伺服器上，通過SignalR來處理 UI 更新、事件處理。所以，它載入速度快，可以充分利用伺服器功能，並可以運行早期的瀏覽器。不過，因為應用需要跟伺服器通訊，所以，不支持離線工作，伺服器壓力大。

簡單的區別就這麼多，詳細的內容，我會另開一文來說。

今天我們主說 Blazor for Server-Side ，也就是上面介紹的 Blazor Server 模型。

為了防止不提供原網址的轉載，特在這裡加上原文鏈接：https://www.cnblogs.com/tiger-wang/p/13264415.html

一、創建空項目

我們先創建一個Web空項目：

% dotnet new sln -o demo
The template "Solution File" was created successfully.
% cd demo 
% dotnet new web -o demo
The template "ASP.NET Core Empty" was created successfully.

Processing post-creation actions...
Running 'dotnet restore' on demo/demo.csproj...
  Determining projects to restore...
  Restored /demo/demo/demo.csproj (in 148 ms).

Restore succeeded.
% dotnet sln add demo/demo.csproj 
Project `demo/demo.csproj` added to the solution.

創建完成。看一下目錄結構：

% tree .
.
├── demo
│   ├── Program.cs
│   ├── Properties
│   │   └── launchSettings.json
│   ├── Startup.cs
│   ├── appsettings.Development.json
│   ├── appsettings.json
│   └── demo.csproj
└── demo.sln

這就是我們的基礎項目了。後面所有的項目，都會在這個基礎上進行修改和增加。

二、添加 Blazor 服務

打開Startup.cs文件。

1. 修改 ConfigureServices

在ConfigureServices中添加：

services.AddRazorPages();
services.AddServerSideBlazor();

這兩行代碼中，services.AddRazorPages()是添加Razor服務。

Razor和Blazor名字很像，但本身並沒有關係。Razor是一種伺服器標記語言，類似於PHP。

這裡添加Razor，只是因為我習慣用Razor，並沒有特殊性。如果你習慣用 MVC，這兒也可以換成services.AddMvc()，是一樣的。

下麵一行services.AddServerSideBlazor()，才是真正的內容：添加Blazor Server-Side服務。

2. 修改 Configure

在Configure中添加：

app.UseStaticFiles();
app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
});

其中，app.UseStaticFiles()表明我們會用到靜態文件。文件預設要求放在wwwroot目錄下，所以可以把目錄也建了。

app.UseEndpoints，需要使用Blazor路由，所以要改成endpoints.MapBlazorHub()。

這兒就完成了。

3. 加入路由

接下來，我們需要建立路由。在項目中建一個目錄Pages。這是Blazor預設的單頁面目錄。然後在裡面建一個_Host.cshtml。

@page "/"
@namespace demo.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <base href="~/" />
</head>
<body>
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

然後在Startup.cs文件的Configure中加入回退路由：

app.UseEndpoints(endpoints =>
{
    endpoints.MapBlazorHub();
    endpoints.MapFallbackToPage("/_Host");
});

這裡把這個_Host.cshtml登記為回退路由，作用是把所有請求到 Razor 的頁面，先路由到這個頁面中，由這個頁面做最終合成。

這個頁面中必須有的元素為：

@page，定義這個頁面的訪問點
@namespace，當前頁面的namespace
addTagHelper，標記幫助
base，定義這個頁面的路由起始
app，這一句是這個頁面的核心。我們後邊創建的Razor頁面，會以一個組件的形式，放在這個位置
script，用來跟伺服器通訊

上面的代碼中，調用到一個typeof(App)，這個App，是路由組件。下麵我們來創建這個路由 - 創建一個App.razor：

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" />
    </Found>
    <NotFound>
        Page Not found
    </NotFound>
</Router>

這個模板的用處，是在 Dotnet 編譯時.razor時，為帶有@page的類提供指定的路由模板屬性RouteAttribute，同時，也映射出了上面說的App類。

運行。瀏覽器中會出現Page Not Found。這是我們在App.razor里定義的，表明我們沒有找到任何可用的路由。

三、創建一個頁面

下麵，我們來創建一個頁面index.razor：

@page "/"

<h1>Hello, world!</h1>

這個頁面簡單。

@page，告訴路由這個頁面的URL是/。

再運行，我們就看到了這個頁面。

@page定義的是這個頁面的路由。路由有以下幾種樣式，我簡單列一下：

直接路由：/page
參數路由：/page/{page_id}
約束路由：/page/{page_id: int}

四、創建一個佈局模板

我們先在項目中創建一個目錄Shared，用來存放各種組件和模板。在目錄中，我們創建一個佈局模板 - MainLayout.razor：

@using Microsoft.AspNetCore.Components
@inherits LayoutComponentBase

<div>
    <h3>This is layout</h3>
</div>
@Body

這裡面有幾個重點：

佈局模板必須繼承自類LayoutComponentBase
@Body定義了引用佈局的頁面的內容位置
Body的數據類型是RenderFragment，在Microsoft.AspNetCore.Components中，需要引用

其實這些操作，都是C#的結構，只不過用了Razor，換了一種寫法

下麵，我們給剛纔的Index.razor加入佈局模板：

@using demo.Shared
@layout MainLayout

只要在Index.razor代碼的最上邊加上這兩行就行。這兩行中：

@layout是定義這個頁面用哪個佈局模板的；而@using是引用這個模板的位置，就是 C# 中的using。

運行，我們就看到，這個佈局加到頁面前邊了。

五、設置預設佈局引用

上面的例子，是把佈局給到一個頁面。

我們也可以設置所有頁面的預設佈局模板，通過改動路由模板App.razor：

@using demo.Shared

<

一文說通Blazor for Server-Side的項目結構