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

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

用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

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

-Advertisement-
Play Games
更多相關文章
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 需求: (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上。 但是如果網站很大,頁面比較多,甚至每個頁面都有不少 ...
一周排行
    -Advertisement-
    Play Games
  • 概述:這個WPF項目通過XAML繪製汽車動態速度表盤,實現了0-300的速度刻度,包括數字、指針,並通過定時器模擬速度變化,展示了動態效果。詳細實現包括界面設計、刻度繪製、指針角度計算等,通過C#代碼與XAML文件結合完成。 新建 WPF 項目: 在 Visual Studio 中創建一個新的 WP ...
  • 概述:在WPF中使用`WpfAnimatedGif`庫展示GIF動畫,首先確保全裝了該庫。通過XAML設置Image控制項,指定GIF路徑,然後在代碼中使用庫提供的方法實現動畫控制。這簡化了在WPF應用中處理GIF圖的過程,提供了方便的介面來管理動畫播放和暫停。 當使用 WpfAnimatedGif  ...
  • 您是否曾經訪問過一個網站,它需要很長時間載入,最終你敲擊 F5 重新載入頁面。 即使用戶刷新了瀏覽器取消了原始請求,而對於伺服器來說,API也不會知道它正在計算的值將在結束時被丟棄,刷新五次,伺服器將觸發 5 個請求。 為瞭解決這個問題,ASP.NET Core 為 Web 伺服器提供了一種機制,就 ...
  • 本章將和大家分享如何通過 Elasticsearch 實現自動補全查詢功能。 一、自動補全-安裝拼音分詞器 1、自動補全需求說明 當用戶在搜索框輸入字元時,我們應該提示出與該字元有關的搜索項,如圖: 2、使用拼音分詞 要實現根據字母做補全,就必須對文檔按照拼音分詞。在 GitHub 上恰好有 Ela ...
  • using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Text; using System.Windows.Forms; namespace OOP { pub ...
  • 概述:以上內容詳細介紹了在C#中如何從另一個線程更新GUI,包括基礎功能和高級功能。對於WinForms,使用`Control.Invoke`;對於WPF,使用`Dispatcher.Invoke`。高級功能使用`SynchronizationContext`實現線程間通信,確保清晰、可讀性高的代碼 ...
  • Nuget包 Microsoft.Extensions.Telemetry.Abstractions 包含的新的日誌記錄source generator,它支持使用[LogProperties]將整個對象作為State與日誌一起記錄。 我將展示一種方法來控制如何使用[LogProperties]對象 ...
  • 支持.Net/.Net Core/.Net Framework,可以部署在Docker, Windows, Linux, Mac。 常見的ORM技術(比如:Entity Framework,Dapper,SqlSugar,NHibernate,等…),它們不是在做Sql語句的程式化變種,就是在做Sq ...
  • 一、引言 在現代應用程式開發中,尤其是在涉及I/O操作(如網路請求、文件讀寫等)時,非同步編程成為了提高性能和用戶體驗的關鍵技術。C#作為.NET框架下的主流開發語言,提供了強大的非同步編程支持,通過async/await關鍵字,可以讓開發者以同步的方式編寫非同步代碼,極大地簡化了非同步編程的複雜性。本文將 ...
  • 一、引言 在.NET開發中,操作Office文檔(特別是Excel和Word)是一項常見的需求。然而,在伺服器端或無Microsoft Office環境的場景下,直接使用Office Interop可能會面臨挑戰。為瞭解決這個問題,開源庫NPOI應運而生,它提供了無需安裝Office即可創建、讀取和 ...