一文说通Blazor for Server-Side的项目结构
用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 模型。
一、創建空項目
我們先創建一個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
喜歡就來個三連，讓更多人因你而受益
總結
以上是生活随笔為你收集整理的一文说通Blazor for Server-Side的项目结构的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Gartner：缺乏技术人才将影响企业数
- 下一篇： 认证授权方案之授权揭秘 (上篇)