天天看點
傳回

一文說通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 模型。

    為了防止不提供原網址的轉載，特在這裡加上原文連結：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

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

微信公衆号：老王Plus

掃描二維碼，關注個人公衆号，可以第一時間得到最新的個人文章和内容推送

本文版權歸作者所有，轉載請保留此聲明和原文連結
Blazor dotnet core
上一篇: Window環境下使用多個Git賬号（github，gitee，gitlab，gogs等）
下一篇: Markdown筆記（git送出帶有emoji的commit描述）

繼續閱讀