ＮＯＷ現在行動！

Blazor是一個基于C#， Razor和 HTML的新的Web UI框架。它通過WebAssembly運行在瀏覽器中。有利于使用C#而不是JavaScript構建交互式的Web UI。這篇文章演示了如何使用Blazor構建SPA應用。Blazor簡化了可在任何瀏覽器中運行的快速且美觀的SPA的任務。它通過使開發人員能夠編寫基于Dotnet的Web應用程序來實現此目的。這些應用程序可以在使用了開放Web標準的瀏覽器中運行。讓我們開始使用Blazor吧。在這篇文章中，我們將討論一下內容：

• 主機模型

• 啟用身份驗證和授權

• 深入了解默認Blazor頁面

前期準備

• Visual Sudtion 2019

• Install .NET Core 3.1

• 安裝Blazor項目模版

主機模型（Hosting models）

你有兩種選擇來托管應用程序。首先，在服務器端使用Razor組件，接下來，在瀏覽器中將應用程序作為Web Assembly運行。

服務器端

支持在 ASP.NETCore 應用程序的服務器上托管 Razor組件。用戶交互將通過 SignalR連接和處理。

客戶端

Blazor應用程序以及.NET運行時和其他依賴項已下載到瀏覽器中。另外，你可以在客戶端和服務器端之間共享模型、驗證和其他業務邏輯。此外，你還可以利用在瀏覽器上直接運行的幾個.NET 庫。

顯然，每個模型都有其自身的優缺點。特別是它們大多數與依賴性，性能，瀏覽器兼容性等有關。選擇其中的一種實現方法依賴于你的決定。在本文中，我們將以一個示例討論服務器端托管。但是，這個決定不是這篇文章的主要目的。

開始使用

首先，在創建新項目時搜索“Blazor”，然后選擇“Blazor 應用”。

點擊“下一步”，在出現的頁面上輸入項目名稱，并選擇適當的項目存儲的位置。

在下一頁上，選擇要創建的應用程序的類型。為此，在這篇文章中，我將創建一個“Blazor Server 應用”的應用程序。

在創建項目之前，點擊“身份驗證”部分下面的“更改”鏈接。選擇“個人用戶賬戶(I)”，并在右側的下拉選項中選擇“存儲應用內的用戶賬戶”。其他可用的選項包括：“不進行身份驗證”、“工作或學校賬戶”和“Windows 身份驗證”。點擊“確定”按鈕之后，點擊“創建”按鈕實現項目的創建工作。項目創建完成后，可以從項目的屬性頁（“調試”選項卡）禁用HTTPS。

現在，我們創建了啟用身份驗證的Blazor項目，運行項目后，可以看到以下界面。

了解項目結構

該項目的結構與MVC應用程序的結構相似，你可以在項目中看到 Areas， appsetting.json， Program.cs、 Startup.cs。除此之外，你還可以看到帶 razor擴展名的文件，這些文件特定于“Blazor”。讓我們詳細的看一下。

• Identity — 這個文件夾被創建是因為我們在創建項目時選擇了身份驗證方法。它具有“AuthenticationStateProvider”類和用于登錄和注銷的HTML文件。

• Data — 項目創建時，默認情況下會提供與Entity Framework相關的nuget軟件包。這個文件夾包含一個遷移文件，用于創建和身份驗證相關的表，例如用戶，角色等。此外，它還包含“DBContext”文件，模型和服務。該服務獲取默認演示頁面的天氣預報詳細信息。

• Pages — 如果你是.NET 開發人員，可能聽說過Razor。Blazor應用程序基于組件。組件是可重用的構建塊。它可以是單個控件，也可以是具有多個控件的塊。這些組件以 Razor標記編寫。但是Blazor的上下文中， Razor的主要區別在于，它是基于UI 邏輯構建的，而不是基于請求/ 響應傳遞的。

啟用身份驗證和授權

要啟用身份驗證，請執行一下步驟。

• 創建存儲用戶和角色詳細的表

• 添加用戶和角色

• 實施授權

創建表

執行 EntityFramework的 update-database命令進行創建表。默認情況下，應用程序在 localdb中創建數據庫。或者，你可以根據需要在 appsetting.json中修改連接字符串。默認遷移會創建于身份驗證相關的表，例如 AspNetUsers， AspNetRoles等。具體操作為：選擇 工具-> Nuget包管理器-> 程序包管理器控制臺。在界面上輸入 update-database。

用戶注冊

第一種選擇是使用注冊界面，這將有助于將用戶添加到系統中。

public void ConfigureServices(IServiceCollection services) {services.AddDbContext<ApplicationDbContext>(options =>options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));services.AddDefaultIdentity<IdentityUser>(options =>{options.Password.RequireNonAlphanumeric = false;options.Password.RequireLowercase = false;options.Password.RequireUppercase = false;options.Password.RequireDigit = false;options.SignIn.RequireConfirmedAccount = true;}).AddEntityFrameworkStores<ApplicationDbContext>();services.AddRazorPages();services.AddServerSideBlazor();services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();services.AddSingleton<WeatherForecastService>(); }

實施授權

現在我們已經創建了表，添加了用戶和角色。讓我們啟用頁面授權。Blazor具有用于授權目的的 AuthorizeView組件。此組件根據授權狀態進行顯示內容。如果頁面內容位于 AuthorizeView中，則只有授權用戶才能看到它。修改 Counter.razor頁面內容。

<AuthorizeView><h1>Counter</h1><p>Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button> </AuthorizeView>

如果你需要為授權和未授權用戶顯示不同的內容怎么辦？你可以在 AuthorizeView中使用 Authorized和 NotAuthorized元素，這有助于根據授權狀態提供不同的內容。

<AuthorizeView><Authorized><h1>Counter</h1><p>Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button></Authorized><NotAuthorized>You are not authorized to view this page!</NotAuthorized> </AuthorizeView>

深入探索?Blazor頁面

讓我們分析 razor組件，并嘗試了解它的基本組成部分。我將使用 FetchData.razor進行介紹。

@page "/fetchdata" @using BlazorServerApp.Data @inject WeatherForecastService ForecastService <h1>Weather forecast</h1> <p>This component demonstrates fetching data from a service.</p> @if (forecasts == null) {<p><em>Loading...</em></p> } else {<table class="table"><thead><tr><th>Date</th><th>Temp. (C)</th><th>Temp. (F)</th><th>Summary</th></tr></thead><tbody>@foreach (var forecast in forecasts){<tr><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.TemperatureF</td><td>@forecast.Summary</td></tr>}</tbody></table> } @code {private WeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts = await ForecastService.GetForecastAsync(DateTime.Now);} }

@page - 使用 @page屬性設置組件中的 route屬性。這指定組件的路由端點。一個組件可以通過具有多個 @page指令來具有多個路由屬性。

@inject - 你可以使用 @inject屬性將服務注入組件。在該示例中， WeatherForecastService已注入，以用于檢索數據。你可以通過 Startup.cs中注冊他們來使用服務。該服務類似于 ASP.NET CORE MVC。

@code - 該塊包含用于渲染和事件處理的代碼。它可以像方法的變量聲明一樣。有一個類似于 @code的東西， @function具有相同的功能。從 ASP.NET CORE3.0開始，建議使用 @code，而不是 @function。

總結

簡而言之，本文試圖介紹 Blazor，以及如何使用 Blazor創建你的第一個應用程序。除此之外，我們還討論了托管模型，身份驗證，授權的實現以及默認頁面中使用的指令。

下一步工作

除了此篇文章外，我還計劃寫其他幾篇文章：

• 使用?Blazor和?EntityFrameworkCore進行CRUD操作

• Blazor中模型驗證

• Blazor應用程序的容器化

• Blazor的路由

總結

以上是生活随笔為你收集整理的Blazor入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。