自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

一篇關(guān)于Blazor 組件入門指南

作者： 技術(shù)譯民
開發(fā) 前端
lazor 應(yīng)用程序是組件的組合，這些組件不僅負(fù)責(zé)呈現(xiàn)用戶界面，還協(xié)同工作以促進(jìn)用戶交互。它們是 Blazor 應(yīng)用程序的主要構(gòu)建塊，大多數(shù) Blazor 功能都是圍繞組件展開的。

本文轉(zhuǎn)載自微信公眾號(hào)「技術(shù)譯站」，作者技術(shù)譯民。轉(zhuǎn)載本文請(qǐng)聯(lián)系技術(shù)譯站公眾號(hào)。

翻譯自 Waqas Anwar 2021年3月19日的文章 《A Beginner’s Guide to Blazor Components》 [1]

Blazor 應(yīng)用程序是組件的組合，這些組件不僅負(fù)責(zé)呈現(xiàn)用戶界面，還協(xié)同工作以促進(jìn)用戶交互。它們是 Blazor 應(yīng)用程序的主要構(gòu)建塊，大多數(shù) Blazor 功能都是圍繞組件展開的。在本教程中，我將向您詳細(xì)介紹組件，并向您展示在 Blazor 應(yīng)用程序中創(chuàng)建和使用組件的多種技術(shù)。

下載源碼[2]

Blazor 組件概述

Blazor 組件是 UI 的一個(gè)自包含部分，例如一個(gè)頁(yè)面、一個(gè)側(cè)邊欄菜單、一個(gè)聯(lián)系人表單或儀表盤小工具等。它包括用于呈現(xiàn) UI 的 HTML 標(biāo)簽和用于處理數(shù)據(jù)或處理用戶事件的 C# 代碼。組件可以相互嵌套，也可以在項(xiàng)目中重用，甚至可以跨多個(gè)項(xiàng)目重用。Blazor 組件是作為 Razor 組件實(shí)現(xiàn)的，這正是它們使用 Razor 語(yǔ)法并具有 .razor 文件擴(kuò)展名的原因。

為了理解 Blazor 組件的結(jié)構(gòu)及其工作方式，讓我們回顧一下 Counter.razor 組件(如果您在 Visual Studio 2019 中使用 Blazor App 模板，它會(huì)自動(dòng)為我們生成)。下面是 Counter.razor 的完整代碼。

  1. @page "/counter" 
  2.  
  3. <h1>Counter</h1> 
  4.  
  5. <p>Current count: @currentCount</p> 
  6.  
  7. <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> 
  8.  
  9. @code { 
  10.     private int currentCount = 0; 
  11.  
  12.     private void IncrementCount() 
  13.     { 
  14.         currentCount++; 
  15.     } 
  16. } 

文件中的第一行使用了 Razor @page 指令來(lái)指定組件的路由。這意味著 Counter 組件是頁(yè)面級(jí)或可路由組件，可以在瀏覽器中使用 URL 末尾的 /counter 路徑來(lái)訪問(wèn)它。如果我們不指定 @page 指令，則該組件將變?yōu)樽咏M件，可以通過(guò)將其嵌套在其他組件中來(lái)使用它。

  1. @page "/counter" 

如下所示，我們還可以聲明多個(gè) @page 級(jí)別的指令。這將允許我們使用兩個(gè) URL 訪問(wèn)組件。

  1. @page "/counter" 
  2. @page "/mycounter" 

在 @page 指令之后，是用于指定該組件 UI 的 HTML 標(biāo)記。這些標(biāo)記可以使用 Razor 語(yǔ)法動(dòng)態(tài)地使用表達(dá)式、條件或循環(huán)來(lái)渲染 HTML。在上述的 Counter 組件示例中，其 UI 包含一個(gè)標(biāo)題 (h1)、一個(gè)段落 (p) 和一個(gè)按鈕 (button) 元素。段落 (p) 元素使用 Razor 語(yǔ)法來(lái)輸出 C# 代碼塊中定義的 currentCount 變量的值。

  1. <p>Current count: @currentCount</p> 

 

按鈕 (button) 元素通過(guò)調(diào)用方法 IncrementCount 來(lái)響應(yīng)用戶單擊操作，該方法也定義在代碼塊中。

  1. <button class="btn btn-primary" @onclick="IncrementCount">Click me</button> 

最后，是一個(gè)代碼塊，每次調(diào)用 IncrementCount 方法時(shí)，我們簡(jiǎn)單地將 currentCount 變量的值加 1。

  1. @code { 
  2.     private int currentCount = 0; 
  3.   
  4.     private void IncrementCount() 
  5.     { 
  6.         currentCount++; 
  7.     } 
  8. } 

當(dāng) Blazor 應(yīng)用程序進(jìn)行編譯時(shí)，HTML 標(biāo)記和 C# 代碼將轉(zhuǎn)換成一個(gè)組件類，類名稱與組件的文件名相對(duì)應(yīng)。該類的成員是我們?cè)?@code 中定義的相同的變量和方法。允許使用多個(gè) @code 塊，所有這些代碼塊在編譯后會(huì)合并進(jìn)同一組件類。

在 Visual Studio 2019 中創(chuàng)建 Blazor 組件

如果您要?jiǎng)?chuàng)建一個(gè)頁(yè)面級(jí)組件，請(qǐng)右鍵單擊 Pages 文件夾并選擇 添加 > Razor 組件... 菜單選項(xiàng)。

您也可以在解決方案資源管理器中右鍵單擊項(xiàng)目名稱，然后使用 Razor 組件 模板創(chuàng)建一個(gè)組件。

讓我們創(chuàng)建一個(gè)文件名為 Calculator.razor 的組件，并添加以下代碼。

Calculator.razor

  1. @page "/calculator" 
  2.   
  3. <h3>Calculator</h3> 
  4.   
  5. <div class="form-group"> 
  6.     <label for="number1">Number 1</label> 
  7.     <input type="number" class="form-control" id="number1" @bind="number1"> 
  8. </div> 
  9. <div class="form-group"> 
  10.     <label for="number2">Number 2</label> 
  11.     <input type="number" class="form-control" id="number2"  @bind="number2"> 
  12. </div> 
  13. <div class="form-group"> 
  14.     <label><b>Total: </b>@total</label>  
  15. </div> 
  16.   
  17. <button class="btn btn-primary" @onclick="Calculate">Calculate</button> 
  18.   
  19. @code { 
  20.     private int number1 = 0; 
  21.     private int number2 = 0; 
  22.     private int total = 0; 
  23.   
  24.     private void Calculate() 
  25.     { 
  26.         total = number1 + number2; 
  27.     } 
  28. } 

此 @code 塊具有三個(gè)私有變量和一個(gè) Calculate 方法。Calculate 方法簡(jiǎn)單地將 number1 和 number2 的和賦值給 total 變量。

HTML 標(biāo)記中有兩個(gè)輸入框，它們使用 @bind 屬性來(lái)綁定 number1 和 number2 變量：

  1. <input type="number" class="form-control" id="number1" @bind="number1"> 

變量 total 的值使用 Razor 語(yǔ)法 @total 渲染在頁(yè)面上：

  1. <label><b>Total: </b>@total</label>  

最后，是一個(gè)按鈕元素，它將 Calculate 方法綁定到 @onclick 事件。每當(dāng)用戶點(diǎn)擊按鈕時(shí)，就會(huì)調(diào)用 Calculate 方法，頁(yè)面上的 total 變量的值將更新。

  1. <button class="btn btn-primary" @onclick="Calculate">Calculate</button> 

為了輕松訪問(wèn)您的 Calculator 組件，可以通過(guò)在 NavMenu.razor 組件中添加以下標(biāo)記，在應(yīng)用程序側(cè)邊欄中添加 Calculator 組件。

  1. <li class="nav-item px-3"> 
  2.    <NavLink class="nav-link" href="calculator"> 
  3.       <span class="oi oi-calculator" aria-hidden="true"></span> Calculator 
  4.    </NavLink> 
  5. </li> 

按 F5 運(yùn)行您的應(yīng)用程序，您應(yīng)該會(huì)看到如下所示的頁(yè)面。嘗試在輸入框中輸入一些數(shù)字，您應(yīng)該能看到頁(yè)面上顯示的數(shù)字之和。點(diǎn)擊 Calculate 按鈕運(yùn)行了服務(wù)端的 C# 代碼，卻并沒(méi)有瀏覽器回傳或頁(yè)面刷新。一切都感覺(jué)那么流暢和快速，就像您在瀏覽器中使用 JavaScript 進(jìn)行計(jì)算一樣。

如果您想檢驗(yàn)一下代碼是在服務(wù)端上運(yùn)行的，只需嘗試在 Calculate 方法中添加一個(gè)斷點(diǎn)，然后再次按下 F5。這次，當(dāng)您點(diǎn)擊 Calculate 按鈕時(shí)，您將看到代碼執(zhí)行到斷點(diǎn)處停止，您還可以在 tooltips 中看到用戶輸入，如下圖所示：

拆分 Blazor 組件中的標(biāo)簽和代碼

如果您創(chuàng)建的是小型組件，那么您可能希望在單個(gè) .razor 文件中編寫所有 C# 代碼;但如果您有大量的邏輯要寫并且為了更好的代碼維護(hù)，您希望將 C# 代碼與 HTML 標(biāo)簽分開，那么可以通過(guò)以下兩種方式來(lái)實(shí)現(xiàn)。

  1. §使用基類拆分組件 

使用這種方式，您可以創(chuàng)建一個(gè)獨(dú)立的類，該類應(yīng)該從 ComponentBase 類派生。然后，您可以將組件中的屬性和方法從 @code 塊移動(dòng)到這個(gè)新創(chuàng)建的類，最后，您可以使用 @inherits 指令來(lái)指定組件的基類。讓我們將這種方式應(yīng)用于我們上面創(chuàng)建的 Calculator 組件。在項(xiàng)目中創(chuàng)建一個(gè) CalculatorBase 類，并將 C# 代碼從 Calculator.razor 移動(dòng)到這個(gè)新類中。

CalculatorBase.cs

  1. public class CalculatorBase : ComponentBase 
  2. { 
  3.     private int number1 = 0; 
  4.     private int number2 = 0; 
  5.     private int total = 0; 
  6.   
  7.     private void Calculate() 
  8.     { 
  9.         total = number1 + number2; 
  10.     } 
  11. } 

然后在 Calculator.razor 文件的頂部添加 @inherits 指令，如下：

Calculator.razor

  1. @page "/calculator" 
  2. @inherits CalculatorBase 
  3.   
  4. <h3>Calculator</h3> 
  5.   
  6. <div class="form-group"> 
  7.     <label for="number1">Number 1</label> 
  8.     <input type="number" class="form-control" id="number1" @bind="number1"> 
  9. </div> 
  10. <div class="form-group"> 
  11.     <label for="number2">Number 2</label> 
  12.     <input type="number" class="form-control" id="number2"  @bind="number2"> 
  13. </div> 
  14. <div class="form-group"> 
  15.     <label><b>Total: </b>@total</label>  
  16. </div> 
  17.   
  18. <button class="btn btn-primary" @onclick="Calculate">Calculate</button> 
  19.   
  20. @code { 
  21.       
  22. } 

此時(shí)如果您嘗試構(gòu)建應(yīng)用程序，則會(huì)遇到很多錯(cuò)誤抱怨字段和方法的可訪問(wèn)性。

出現(xiàn)上述所有錯(cuò)誤的原因是 Calculator 組件繼承自 CalculatorBase 類，而我們?cè)?CalculatorBase 類中粘貼的屬性和方法是 private。為了確保子組件可以訪問(wèn)這些字段和方法，您需要將它們聲明為 public。

  1. public class CalculatorBase : ComponentBase 
  2. { 
  3.     public int number1 = 0; 
  4.     public int number2 = 0; 
  5.     public int total = 0; 
  6.   
  7.     public void Calculate() 
  8.     { 
  9.         total = number1 + number2; 
  10.     } 
  11. } 

譯者注：

  • 基類中的字段和方法改為 protected， 在 .razor 中也是可以的訪問(wèn)的。
  • CalculatorBase 類必須包含在一個(gè)命名空間中，否則會(huì)報(bào)錯(cuò)。
  1. §使用部分類拆分組件 

Blazor 組件生成為部分類，這意味著我們可以創(chuàng)建一個(gè)與我們的組件同名的 partial 類，并將所有 C# 代碼移動(dòng)到該部分類中。然后，此部分類將成為代碼隱藏文件，該文件中聲明的字段和屬性可在 Blazor 組件中直接使用。讓我們創(chuàng)建一個(gè)類 Calculator.razor.cs，并將 Calculator 的代碼放在這個(gè)新類中。

Calculator.razor.cs

  1. public partial class Calculator 
  2. { 
  3.     public int number1 = 0; 
  4.     public int number2 = 0; 
  5.     public int total = 0; 
  6.   
  7.     public void Calculate() 
  8.     { 
  9.         total = number1 + number2; 
  10.     } 
  11. } 

如果啟用了文件嵌套，您將看到 Visual Studio 會(huì)自動(dòng)將組件和代碼隱藏文件顯示在一起。

再次運(yùn)行應(yīng)用程序，Calculator 會(huì)以前面相同的方式工作。

創(chuàng)建和使用子組件

Blazor 子組件是沒(méi)有 @page 指令的組件。這些組件可以使用標(biāo)準(zhǔn)的 HTML 語(yǔ)法包含在其他組件中。然后，我們可以通過(guò)在頁(yè)面上添加組件來(lái)構(gòu)建復(fù)雜的 UI，我們甚至可以在同一個(gè)頁(yè)面上添加同一子組件的多個(gè)實(shí)例。如果一個(gè)子組件可能在多個(gè)父組件或頁(yè)面中重復(fù)使用，那么最好將它放在 Shared 文件夾中。讓我們?cè)? Shared 文件夾中創(chuàng)建一個(gè)簡(jiǎn)單的 Heading.razor 子組件，并在其中添加以下代碼。

Heading.razor

  1. <h3>Calculator</h3> 

接下來(lái)，將父組件 Calculator.razor 中的 h3 元素替換為<Heading /> 元素。運(yùn)行應(yīng)用程序，您會(huì)看到 h3 標(biāo)題從子組件中渲染到了頁(yè)面上。

 

Calculator.razor

  1. @page "/calculator" 
  2. @inherits CalculatorBase 
  3.   
  4. <Heading /> 
  5.   
  6. <div class="form-group"> 
  7.     <label for="number1">Number 1</label> 
  8.     <input type="number" class="form-control" id="number1" @bind="number1"> 
  9. </div> 
  10. <div class="form-group"> 
  11.     <label for="number2">Number 2</label> 
  12.     <input type="number" class="form-control" id="number2"  @bind="number2"> 
  13. </div> 
  14. <div class="form-group"> 
  15.     <label><b>Total: </b>@total</label>  
  16. </div> 
  17.   
  18. <button class="btn btn-primary" @onclick="Calculate">Calculate</button> 

您甚至可以通過(guò)復(fù)制和粘貼相同的 元素來(lái)添加子組件的多個(gè)實(shí)例。 

  1. <Heading /> 
  2. <Heading /> 
  3. <Heading /> 

現(xiàn)在，如果您運(yùn)行應(yīng)用程序，您將會(huì)在頁(yè)面上看到三個(gè) h3 標(biāo)題。

自定義帶參數(shù)的 Blazor 組件

只是生成具有相同內(nèi)容的靜態(tài)組件不是很有用。如果我們可以將一些數(shù)據(jù)傳遞給組件，而不僅僅是自定義它生成的 UI，還自定義其行為或功能，那就更好了。我們可以使用參數(shù)來(lái)自定義 Blazor 組件。這些參數(shù)可以是簡(jiǎn)單的 int、bool 等，也可以是復(fù)雜的 Customer、Order 等。一旦聲明了參數(shù)，我們便可以使用屬性將數(shù)據(jù)傳遞給組件。讓我們通過(guò)在 Heading 組件中聲明一個(gè)簡(jiǎn)單的 Title 參數(shù)來(lái)學(xué)習(xí)一下這個(gè)概念。要指定一個(gè)參數(shù)，我們要將 [Parameter] 特性附加到一個(gè)屬性上。

Heading.razor

  1. <h3>@Title</h3> 
  2.   
  3. @code { 
  4.     [Parameter] 
  5.     public string Title { get; set; } = "Default Title"; 
  6. } 

我們還為 Title 屬性設(shè)置了一個(gè)默認(rèn)值 Default Title，當(dāng)未提供 Title 時(shí)，則顯示該默認(rèn)字符串。

Visual Studio 智能感知也可以提示組件參數(shù)，因此我們不需要記憶這些參數(shù)，這很有用。

我們可以通過(guò)傳遞任意字符串作為 Title 的值來(lái)從外部自定義 Title，Heading 組件將自動(dòng)渲染傳遞給它的不同字符串。

  1. <Heading Title="Calculator" />  

我們還可以使用表達(dá)式從父組件到子組件傳遞數(shù)據(jù)。讓我們創(chuàng)建另外一個(gè)子組件 CalculatorTotal.razor，并向其添加以下代碼。

CalculatorTotal.razor

  1. <label><b>Total: </b>@Total</label> 
  2.   
  3. @code { 
  4.     [Parameter] 
  5.     public int Total { get; set; } 
  6. } 

現(xiàn)在，您可以使用我們?cè)诟?Calculator 控制器中聲明和設(shè)置的 @total 字段來(lái)傳遞 Total 的值。

Calculator.razor

  1. @page "/calculator" 
  2.   
  3. <Heading Title="Calculator" /> 
  4.   
  5. <div class="form-group"> 
  6.     <label for="number1">Number 1</label> 
  7.     <input type="number" class="form-control" id="number1" @bind="number1"> 
  8. </div> 
  9. <div class="form-group"> 
  10.     <label for="number2">Number 2</label> 
  11.     <input type="number" class="form-control" id="number2" @bind="number2"> 
  12. </div> 
  13. <div class="form-group"> 
  14.     <CalculatorTotal Total="@total"/> 
  15. </div> 
  16.   
  17. <button class="btn btn-primary" @onclick="Calculate">Calculate</button> 

將路由參數(shù)傳遞給 Blazor 組件

Blazor 組件還可以接受在 @page 指令中提供的來(lái)自路由模板的參數(shù)。路由器使用路由參數(shù)自動(dòng)填充相應(yīng)的組件參數(shù)。

讓我們看一個(gè)如何通過(guò)路由將數(shù)據(jù)傳遞給組件的示例。創(chuàng)建一個(gè)新的名為 MathTable.razor 的 Blazor 組件并添加以下代碼。

MathTable.razor

  1. @page "/MathTable/{number:int}" 
  2.   
  3. <h3>Math Table</h3> 
  4.   
  5. <table class="table table-bordered w-25"> 
  6.     @for (int i = 1; i <= 10; i++) 
  7.     { 
  8.         <tr> 
  9.             <td>@Number</td> 
  10.             <td>x</td> 
  11.             <td>@i</td> 
  12.             <td>=</td> 
  13.             <td>@(Number * i)</td> 
  14.         </tr> 
  15.     } 
  16. </table> 
  17.   
  18. @code { 
  19.     [Parameter] 
  20.     public int Number { get; set; }  
  21. } 

我們指定了一個(gè)帶有 int 參數(shù) number 的路由模板：

  1. @page "/MathTable/{number:int}" 

該路由參數(shù)將自動(dòng)映射到以下組件參數(shù)：

  1. [Parameter] 
  2. public int Number { get; set; } 

在 HTML 標(biāo)記中，我使用 number 參數(shù)生成一個(gè)數(shù)學(xué)公式表。運(yùn)行項(xiàng)目并嘗試在路由 URL 中傳遞不同的數(shù)字，您將看到根據(jù)每一參數(shù)值更新的數(shù)學(xué)公式表。

總結(jié)

在本教程中，我介紹了 Blazor 組件的基礎(chǔ)知識(shí)。我試圖用易于理解的示例來(lái)演示每個(gè)概念，以便您可以快速學(xué)習(xí)基本概念。Blazor 組件提供的功能比我在本教程中介紹的要多得多，而且還有許多其他與 Blazor 組件相關(guān)的高級(jí)主題。在接下來(lái)的幾周里，我將嘗試寫更多關(guān)于 Blazor 的文章，因此請(qǐng)繼續(xù)訪問(wèn)我的網(wǎng)站以學(xué)習(xí)有關(guān) Blazor 的更多知識(shí)。

相關(guān)閱讀：

Blazor Server 和 WebAssembly 應(yīng)用程序入門指南

Blazor 組件入門指南(本文)

相關(guān)鏈接：

https://www.ezzylearning.net/tutorial/a-beginners-guide-to-blazor-components A Beginner’s Guide to Blazor Components ??

https://github.com/ezzylearning/BlazorComponentsDemo ??

作者 ：Waqas Anwar

譯者 ：技術(shù)譯民

出品 ：技術(shù)譯站(https://ITTranslator.cn/)

 

責(zé)任編輯：武曉燕 來(lái)源： 技術(shù)譯站
Blazor組件入門
相關(guān)推薦

2021-07-21 09:48:20

etcd-wal模塊解析數(shù)據(jù)庫(kù)

2021-08-18 10:28:09

MySQL SQL 語(yǔ)句數(shù)據(jù)庫(kù)

2021-01-12 09:04:12

Django FormForm組件開發(fā)

2021-06-01 05:51:55

ASP.NET Cor項(xiàng)目NuGet

2023-04-20 08:00:00

ES搜索引擎MySQL

2021-09-15 19:05:16

數(shù)據(jù)開源項(xiàng)目

2022-07-06 07:57:37

Zookeeper分布式服務(wù)框架

2021-10-11 11:08:33

HDFS快照系統(tǒng)

2022-11-08 10:52:25

Flowable節(jié)點(diǎn)表單

2024-11-04 08:54:30

2023-05-08 08:00:38

架構(gòu)KafkaProducer

2022-02-21 09:44:45

Git開源分布式

2021-01-28 08:55:48

Elasticsear數(shù)據(jù)庫(kù)數(shù)據(jù)存儲(chǔ)

2022-08-26 10:32:21

MongoDB數(shù)據(jù)庫(kù)

2022-03-24 12:28:03

React 17React 18React

2022-02-25 15:50:05

OpenHarmonToggle組件鴻蒙

2021-05-14 16:34:12

Semaphore原理

2022-05-08 19:58:10

JSONPJavaScript

2021-09-05 07:55:36

Lsm核心實(shí)現(xiàn)

2021-08-27 07:47:06

SQL靜態(tài)程序
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)