用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
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
Page Not Found
</NotFound>
</Router>
對方前邊的檔案內容，這一段，僅僅在RouteView中加了一個DefaultLayout，
現在，所有的頁面都默認加上了布局模板，
六、設定默認命名空間參考
上面的例子，在App.razor和Index.razor中，我們都參考了demo.Shared命名空間，
Blazor提供了一個默認的檔案，叫_Imports.razor，用來存放所有.razor檔案中共同的參考，
@using demo.Shared
我們把參考加到這個檔案中，同時把上面兩個.razor中的參考去掉，就完成了，
*這兒也多說一句：布局模板也可以在這里參考，布局模板的參考優先級是：頁面參考 > _Imports.razor參考 > App.razor 參考，
以上就是Blazor Server的專案結構，做好這個結構后，所有的功夫，就只在 Razor 頁面了，
（全文完）
本文的代碼在https://github.com/humornif/Demo-Code/tree/master/0017/demo
 |
微信公眾號：老王Plus 掃描二維碼，關注個人公眾號，可以第一時間得到最新的個人文章和內容推送 本文著作權歸作者所有，轉載請保留此宣告和原文鏈接 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/3518.html
標籤：.NET Core