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

時間 2020-07-15

標籤一文說通 blazor server 項目結構简体版

原文原文鏈接

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

今天聊聊 Blazor。git

Blazor 是一個 Web UI 框架。這個框架容許開發者使用 C# 來建立可運行於瀏覽器的具備徹底交互 UI 的 Web 應用。github

能夠理解爲，這是一個 C# 語言的 Vue / Angular / React，能夠和 HTML、CSS 一塊兒實現可重用的 Web UI，能夠和服務器共享代碼和庫。web

Blazor 擁有現代 Web 框架具有的全部功能，包括：json

用於構建 composable UI 的組件模型c#
路由瀏覽器
佈局bash
表格和驗證服務器
依賴注入微信
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 模型。

爲了防止不提供原網址的轉載，特在這裏加上原文連接：http://www.javashuo.com/article/p-qlcczlze-hy.html

1、建立空項目

咱們先建立一個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

這就是咱們的基礎項目了。後面全部的項目，都會在這個基礎上進行修改和增長。

2、添加 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裏定義的，代表咱們沒有找到任何可用的路由。

3、建立一個頁面

下面，咱們來建立一個頁面index.razor：

@page "/"

<h1>Hello, world!</h1>

這個頁面簡單。

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

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

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

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

4、建立一個佈局模板

咱們先在項目中建立一個目錄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。

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

5、設置默認佈局引用

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

咱們也能夠設置全部頁面的默認佈局模板，經過改動路由模板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>