當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Blazor 组件库开发指南

發(fā)布時(shí)間：2023/12/4 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 Blazor 组件库开发指南小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

翻譯自 Waqas Anwar 2021年5月21日的文章?《A Developer’s Guide To Blazor Component Libraries》?^[1]

Blazor 的核心是組件，我們創(chuàng)建不同類型的組件并在整個(gè)項(xiàng)目中重用它們。沒有人想重復(fù)造輪子，因此創(chuàng)建一個(gè)可重用的 Blazor 組件庫(kù)始終是一個(gè)好主意，這些組件不僅可以在多個(gè)項(xiàng)目之間共享，還可以作為 NuGet 包與其他人共享。Blazor 允許我們基于一個(gè)名為 Razor 類庫(kù)（Razor Class Library）的新模板創(chuàng)建這樣的組件庫(kù)，在本文中，我將向您演示如何創(chuàng)建這樣一個(gè)庫(kù)，不僅僅共享組件，還共享靜態(tài)內(nèi)容（比如圖片、樣式表等等）。

下載源碼^[2]

創(chuàng)建一個(gè) Razor 組件庫(kù)

在 Visual Studio 2019 中創(chuàng)建一個(gè)新的名為?BlazorClassLibraryDemo?的 Blazor Server 應(yīng)用程序，確保您可以正常構(gòu)建和運(yùn)行該項(xiàng)目。如果您不確定如何創(chuàng)建 Blazor Server 應(yīng)用程序，那么我建議您閱讀我的文章《Blazor Server 和 WebAssembly 應(yīng)用程序入門指南》

要在 Blazor 項(xiàng)目中添加一個(gè)新組件庫(kù)，請(qǐng)右鍵點(diǎn)擊解決方案并選擇?添加 > 新建項(xiàng)目...?選項(xiàng)。從項(xiàng)目模板列表中選擇?Razor 類庫(kù)（Razor Class Library）?項(xiàng)目模板。

為項(xiàng)目提供任意合適的名稱，我這里將其命名為?MyComponentsLibrary。

然后，會(huì)詢問您選擇一些其他設(shè)置項(xiàng)，直接點(diǎn)擊?創(chuàng)建?按鈕就好。

默認(rèn)情況下，模板會(huì)創(chuàng)建一個(gè)名為?Component1.razor?的示例組件和一些附加文件。在開始創(chuàng)建我們的第一個(gè)共享組件之前，我們需要?jiǎng)h除?Component1.razor、ExampleJsInterop.cs?以及?wwwroot?文件夾中的所有內(nèi)容，以便我們有一個(gè)純凈的開始。

在 Razor 類庫(kù)中創(chuàng)建一個(gè)組件

讓我們?cè)?Razor 類庫(kù)項(xiàng)目?MyComponentsLibrary?中創(chuàng)建我們的第一個(gè)可重用的共享組件。右鍵點(diǎn)擊類庫(kù)項(xiàng)目并選擇?添加 > 新建項(xiàng)…?選項(xiàng)。選擇?Razor 組件?模板并指定組件名稱?TableWidget.razor。

如果您希望將 C# 代碼與組件視圖分開，您還可以添加代碼隱藏文件?TableWidget.razor.cs。該 TableWidget 組件是一個(gè)簡(jiǎn)單的模板化組件，可用于從任何對(duì)象列表生成 HTML 表格。如果您想了解有關(guān) Blazor 模板化組件的更多知識(shí)，那么您可以閱讀我的文章《Blazor 模板化組件開發(fā)指南》。

在 TableWidget.razor 組件視圖文件中添加以下標(biāo)記。

TableWidget.razor

@typeparam TItem <table class="table table-striped table-bordered"><thead class="thead-green"><tr>@HeaderTemplate</tr></thead><tbody>@foreach (var item in Items){<tr>@RowTemplate(item)</tr>}</tbody><tfoot><tr>@FooterTemplate</tr></tfoot> </table>

下面是 TableWidget 組件的代碼隱藏文件。該組件具有 RenderFragment 類型的 Header、Row 和 Footer 模板，用于在視圖中生成 HTML 表格的表頭、數(shù)據(jù)行和頁(yè)腳。

TableWidget.razor.cs

using System.Collections.Generic; using Microsoft.AspNetCore.Components;namespace MyComponentsLibrary {public partial class TableWidget<TItem>{[Parameter]public RenderFragment HeaderTemplate { get; set; }[Parameter]public RenderFragment<TItem> RowTemplate { get; set; }[Parameter]public RenderFragment FooterTemplate { get; set; }[Parameter]public IReadOnlyList<TItem> Items { get; set; }} }

我們?cè)?Razor 類庫(kù)中創(chuàng)建的每個(gè)可重用組件還可以有對(duì)應(yīng)的樣式表來定義組件的外觀。例如，如果我們希望我們的 TableWidget 組件生成帶有深綠色表頭的表格，我們可以在?TableWidget.razor.css?文件中定義組件的樣式。

TableWidget.razor.css

.thead-green {background-color: darkgreen;color: white; }

使用 Razor 類庫(kù)中的 Razor 組件

現(xiàn)在我們已經(jīng)在類庫(kù)項(xiàng)目中定義了我們的 TableWidget 組件，是時(shí)候在我們的 Blazor 項(xiàng)目中使用這個(gè)組件了。右鍵單擊解決方案資源管理器中的?依賴項(xiàng)（Dependencies）?節(jié)點(diǎn)，然后從上下文菜單中選擇?添加項(xiàng)目引用...（Add Project Reference...）?選項(xiàng)。選中?MyComponentsLibrary?項(xiàng)目并點(diǎn)擊確定。

如果您想在多個(gè)頁(yè)面上使用 TableWidget 組件，那么推薦您在?_Imports.razor?文件中添加該類庫(kù)的引用。

@using MyComponentsLibrary

Blazor 項(xiàng)目模板默認(rèn)生成一個(gè)?FetchData.razor?頁(yè)面，顯示來自后端服務(wù)的天氣預(yù)報(bào)對(duì)象。我們可以在此頁(yè)面上測(cè)試我們的?TableWidget?組件。打開?FetchData.razor?文件，并使用?TableWidget?組件替換其中的 HTML 表格，如下面的代碼片段所示。

FetchData.razor

@page "/fetchdata"@using BlazorClassLibraryDemo.Data @inject WeatherForecastService ForecastService<h1>Weather forecast</h1>@if (forecasts == null) {<p><em>Loading...</em></p> } else {<TableWidget Items="forecasts" Context="forecast"><HeaderTemplate><th>Date</th><th>Temp. (C)</th><th>Temp. (F)</th><th>Summary</th></HeaderTemplate><RowTemplate><td>@forecast.Date.ToShortDateString()</td><td>@forecast.TemperatureC</td><td>@forecast.TemperatureF</td><td>@forecast.Summary</td></RowTemplate></TableWidget> }@code {private WeatherForecast[] forecasts;protected override async Task OnInitializedAsync(){forecasts = await ForecastService.GetForecastAsync(DateTime.Now);} }

運(yùn)行該項(xiàng)目，您會(huì)看到使用我們的 TableWidget 組件生成的天氣預(yù)報(bào)表格。現(xiàn)在，您可以在多個(gè)頁(yè)面或項(xiàng)目中重用該 TableWidget 組件，并且將會(huì)看到始終為您生成相同的表格。

使用 Razor 類庫(kù)中的圖片

Razor 類庫(kù)可以公開靜態(tài)資源（比如圖片），并且這些資源可以由使用該庫(kù)的 Blazor 應(yīng)用程序使用。讓我們?cè)?MyComponentsLibrary?項(xiàng)目的?wwwroot/images?文件夾中添加一個(gè)圖片?blazor_logo.jpg。為了在 Blazor 組件中使用此圖片，請(qǐng)?jiān)?MyComponentsLibrary?項(xiàng)目中添加一個(gè)名為?BlazorLogo.razor?的組件。

使用簡(jiǎn)單的?img?標(biāo)簽將?blazor_logo.jpg?圖片添加到?BlazorLogo.razor?組件中。

BlazorLogo.razor

要在 Blazor 應(yīng)用程序中使用此?BlazorLogo.razor?組件，請(qǐng)從我們上面創(chuàng)建的 Blazor 示例應(yīng)用中打開?Index.razor?頁(yè)面，然后直接使用 BlazorLogo 組件，如下面的代碼片段所示。

Index.razor

<h1>Hello, Blazor!</h1><BlazorLogo></BlazorLogo>

運(yùn)行該項(xiàng)目，您會(huì)注意到圖片并未如預(yù)期那樣顯示出來。這是因?yàn)闊o法從類庫(kù)項(xiàng)目外訪問圖片的相對(duì)路徑?images/blazor_logo.jpg。

要解決上述問題，您需要使用下面給出的特殊路徑語法：

_content/{Razor Class Library Name}/{Path to file}

在上面的語法中，{Razor Class Library Name}?是類庫(kù)名稱的占位符（例如 MyComponentsLibrary），{Path to file}?是?wwwroot?文件夾下的文件路徑。

讓我們使用上面描述的特殊語法來修復(fù)我們的圖片路徑。

BlazorLogo.razor

再次運(yùn)行項(xiàng)目，這次您會(huì)注意到圖片按預(yù)期顯示了。

我們還可以使用上述特殊語法直接訪問 Razor 類庫(kù)中的圖片。例如，下面的代碼片段將使用?BlazorLogo?組件以及?img?標(biāo)簽顯示 Razor 類庫(kù)中的圖片。請(qǐng)注意，Blazor 應(yīng)用中的?img?標(biāo)簽使用相同的特殊語法來訪問?MyComponentsLibrary?中的圖片。

Index.razor

<h1>Hello, Blazor!</h1><h4>Showing Image from a Component available inside Class Library</h4><BlazorLogo></BlazorLogo><h4>Showing Image directly from Class Library</h4><img src="_content/MyComponentsLibrary/images/blazor_logo.jpg" alt="Blazor Logo" />

再次運(yùn)行該項(xiàng)目，這次您應(yīng)該會(huì)看到相同的圖片使用了兩種不同的方式顯示兩次。

使用 Razor 類庫(kù)中樣式表

我們還可以在 Razor 類庫(kù)中添加樣式表，并且 Blazor 應(yīng)用程序可以使用這些樣式表中定義的樣式。讓我們?cè)?wwwroot/css?文件夾中添加一個(gè)樣式表?components.css。

出于演示目的，讓我們添加一些與?img?標(biāo)簽相關(guān)的樣式。

components.css

img {background-color: lightgreen;padding: 5px;border: 1px solid black; }

要在我們的 Blazor 應(yīng)用程序中包含?components.css?文件，我們可以使用與上面看到的相同的特殊語法。打開 Blazor Server 應(yīng)用程序中的?_Host.cshtml?文件，并使用以下?link?標(biāo)簽將?components.css?文件包含在?head?標(biāo)簽內(nèi)。

_Host.cshtml

運(yùn)行項(xiàng)目，您會(huì)發(fā)現(xiàn)我們?cè)?components.css?文件中定義的與?img?標(biāo)簽相關(guān)的樣式被應(yīng)用到了項(xiàng)目中的所有圖片上。

總結(jié)

我在本文中介紹了可重用組件的非常基礎(chǔ)的示例，但您可以借此領(lǐng)會(huì)到 Razor 類庫(kù)的強(qiáng)大功能。開發(fā)者可以創(chuàng)建一些又酷又炫的可重用 Blazor 組件庫(kù)，這些庫(kù)不僅可以為您的項(xiàng)目添加一些高級(jí)功能，還可以提升開發(fā)速度。許多組件供應(yīng)商已經(jīng)開發(fā)了一些開源和商業(yè)庫(kù)，例如 MatBlazor^[3]、Radzen^[4]、Syncfusion^[5]?等。

相關(guān)閱讀：

Blazor Server 和 WebAssembly 應(yīng)用程序入門指南
Blazor 組件入門指南
Blazor 數(shù)據(jù)綁定開發(fā)指南
Blazor 事件處理開發(fā)指南
Blazor 組件之間使用 EventCallback 進(jìn)行通信
Blazor 路由及導(dǎo)航開發(fā)指南
Blazor 模板化組件開發(fā)指南
Blazor Server 應(yīng)用程序中進(jìn)行 HTTP 請(qǐng)求
Blazor WebAssembly 應(yīng)用程序中進(jìn)行 HTTP 請(qǐng)求
Blazor 組件庫(kù)開發(fā)指南(本文)

相關(guān)鏈接：

https://www.ezzylearning.net/tutorial/a-developers-guide-to-blazor-component-libraries?A Developer’s Guide To Blazor Component Libraries???

https://github.com/ezzylearning/BlazorClassLibraryDemo?下載源碼???

https://www.matblazor.com/???

https://blazor.radzen.com/???

https://www.syncfusion.com/blazor-components???

作者：Waqas Anwar
譯者：技術(shù)譯民
出品：技術(shù)譯站（https://ITTranslator.cn/）

總結(jié)

以上是生活随笔為你收集整理的Blazor 组件库开发指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：简单三分钟，本地搭建k8s
下一篇：有BUG！！！慎用default文本