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

来源:https://www.cnblogs.com/tiger-wang/archive/2020/07/08/13264415.html

用C#代替Javascript來做Web應用,是有多爽? 今天聊聊 Blazor。 Blazor 是一個 Web UI 框架。這個框架允許開發者使用 C# 來創建可運行於瀏覽器的具有完全交互 UI 的 Web 應用。 可以理解為,這是一個 C# 語言的 Vue / Angular / React,可 ...


用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

<
您的分享是我們最大的動力!

更多相關文章
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 需求: (1) 獲取你對象chrome前一天的瀏覽記錄中的所有網址(url)和訪問時間,並存在一個txt文件中 (2)將這個txt文件發送給指定的郵箱地址(你的郵箱) (3) ...
  • #TcpServer #define WIN32_LEAN_AND_MEAN #define _WINSOCK_DEPRECATED_NO_WARNINGS #include <windows.h> #include <winsock2.h> #include <iostream> #include ...
  • JSP在請求的時候,會先轉化成Servlet(其實就是個java類),然後生成class文件,再提供服務。 那麼生成的java、class文件在哪呢? 首先應該瞭解的是Tomcat在Eclipse的映射關係:Tomcat的伺服器目錄配置 可以瞭解到,Tomcat在Eclipse中提供了三種位置配置選 ...
  • 引言 眾所周知,Java是一種面向對象的編程語言。您可以在Windows操作系統上編寫Java源代碼,而在Linux操作系統上運行編譯後的位元組碼,而無需修改源代碼。 數據類型 Java 有 2 種數據類型,一種是基本數據類型,一種是引用類型。 基本數據類型用於存儲簡單類型的數據,比如說,int、lo ...
  • 1. 通過new對象實現反射機制( 對象.getClass() ) 2. 通過路徑實現反射機制( Class.forName("包名.類名") ) 3. 通過類名實現反射機制 ( 類名.Class ) class Student { private int id; String name; prot ...
  • 一個微小的投入就會帶來巨大的突變 集群安全模式 為什麼出現集群安全模式呢? ​ Namenode啟動時,首先將鏡像文件載人記憶體,並執行編輯日誌中的各項操作。一旦在內存中成功建立文件系統元數據的映像,則創建一個新的Fsimage文件和一個空的編輯日誌。此時,** Namenode開始監聽Datanod ...
  • 從事這麼多年的.NET,這段時間來,學習另外一門技術Python。 購買相關的書籍,不停地看書。 然後在VS安裝Python,然後可以上機練習,編寫代碼...... ...
  • 場景 ASP.NET中新建Web網站並部署到IIS上(詳細圖文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/107199747 在上面博客中已經將網站部署到了IIS上。 但是如果網站很大,頁面比較多,甚至每個頁面都有不少 ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...