1. 程式人生 > >一文說通Blazor for Server-Side的專案結構

一文說通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服務。

RazorBlazor名字很像,但本身並沒有關係。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.razorIndex.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

掃描二維碼,關注個人公眾號,可以第一時間得到最新的個人文章和內容推送

本文版權歸作者所有,轉載請保留此宣告和原文連結