日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
一篇關(guān)于Blazor組件入門指南

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

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出汾陽免費(fèi)做網(wǎng)站回饋大家。

翻譯自 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è)頁面、一個(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 語法并具有 .razor 文件擴(kuò)展名的原因。

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

 
 
 
 
    
  
  
  
  
  1. @page "/counter" 
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3. Counter
     
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. Current count: @currentCount
     
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. Click me 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. @code { 
    10.   
  
  
  
  10.     private int currentCount = 0; 
    11.   
  
  
  
  11.  
    12.   
  
  
  
  12.     private void IncrementCount() 
    13.   
  
  
  
  13.     { 
    14.   
  
  
  
  14.         currentCount++; 
    15.   
  
  
  
  15.     } 
    16.   
  
  
  
  16. } 
    17.

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

 
 
 
 
    
  
  
  
  
  1. @page "/counter" 
    2.

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

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

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

 
 
 
 
    
  
  
  
  
  1. Current count: @currentCount
     
    2.

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

 
 
 
 
    
  
  
  
  
  1. Click me 
    2.

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

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

當(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è)頁面級(jí)組件，請(qǐng)右鍵單擊 Pages 文件夾并選擇 添加 > Razor 組件... 菜單選項(xiàng)。

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

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

Calculator.razor

 
 
 
 
    
  
  
  
  
  1. @page "/calculator" 
    2.   
  
  
  
  2.   
    3.   
  
  
  
  3. Calculator
     
    4.   
  
  
  
  4.   
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     Number 1 
    7.   
  
  
  
  7.      
    8.
 
  •  
  •     Number 2 
  •      
  •  
  •  
  •       
  •  
  •   
  • Calculate 
  •   
  • @code { 
  •     private int number1 = 0; 
  •     private int number2 = 0; 
  •     private int total = 0; 
  •   
  •     private void Calculate() 
  •     { 
  •         total = number1 + number2; 
  •     } 
  • } 

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

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

     
 
 
 
      
  
  
  
  
    1.  
      2.

    變量 total 的值使用 Razor 語法 @total 渲染在頁面上：

     
 
 
 
      
  
  
  
  
    1.   
      2.

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

     
 
 
 
      
  
  
  
  
    1. Calculate 
      2.

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

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.     
      3.   
  
  
  
    3.        Calculator 
      4.   
  
  
  
    4.     
      5.   
  
  
  
    5.  

    按 F5 運(yùn)行您的應(yīng)用程序，您應(yīng)該會(huì)看到如下所示的頁面。嘗試在輸入框中輸入一些數(shù)字，您應(yīng)該能看到頁面上顯示的數(shù)字之和。點(diǎn)擊 Calculate 按鈕運(yùn)行了服務(wù)端的 C# 代碼，卻并沒有瀏覽器回傳或頁面刷新。一切都感覺那么流暢和快速，就像您在瀏覽器中使用 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)簽分開，那么可以通過以下兩種方式來實(shí)現(xiàn)。

     
 
 
 
      
  
  
  
  
    1. §使用基類拆分組件 
      2.

    使用這種方式，您可以創(chuàng)建一個(gè)獨(dú)立的類，該類應(yīng)該從 ComponentBase 類派生。然后，您可以將組件中的屬性和方法從 @code 塊移動(dòng)到這個(gè)新創(chuàng)建的類，最后，您可以使用 @inherits 指令來指定組件的基類。讓我們將這種方式應(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.   
  
  
  
    2. { 
      3.   
  
  
  
    3.     private int number1 = 0; 
      4.   
  
  
  
    4.     private int number2 = 0; 
      5.   
  
  
  
    5.     private int total = 0; 
      6.   
  
  
  
    6.   
      7.   
  
  
  
    7.     private void Calculate() 
      8.   
  
  
  
    8.     { 
      9.   
  
  
  
    9.         total = number1 + number2; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11. } 
      12.

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

    Calculator.razor

     
 
 
 
      
  
  
  
  
    1. @page "/calculator" 
      2.   
  
  
  
    2. @inherits CalculatorBase 
      3.   
  
  
  
    3.   
      4.   
  
  
  
    4. Calculator
       
      5.   
  
  
  
    5.   
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.     Number 1 
      8.   
  
  
  
    8.      
      9.
     
  •  
  •     Number 2 
  •      
  •  
  •  
  •       
  •  
  •   
  • Calculate 
  •   
  • @code { 
  •       
  • } 

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

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

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

    譯者注：

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

    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.   
  
  
  
    2. { 
      3.   
  
  
  
    3.     public int number1 = 0; 
      4.   
  
  
  
    4.     public int number2 = 0; 
      5.   
  
  
  
    5.     public int total = 0; 
      6.   
  
  
  
    6.   
      7.   
  
  
  
    7.     public void Calculate() 
      8.   
  
  
  
    8.     { 
      9.   
  
  
  
    9.         total = number1 + number2; 
      10.   
  
  
  
    10.     } 
      11.   
  
  
  
    11. } 
      12.

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

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

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

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

    Heading.razor

     
 
 
 
      
  
  
  
  
    1. Calculator
       
      2.

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

     

    Calculator.razor

     
 
 
 
      
  
  
  
  
    1. @page "/calculator" 
      2.   
  
  
  
    2. @inherits CalculatorBase 
      3.   
  
  
  
    3.   
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5.   
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7.     Number 1 
      8.   
  
  
  
    8.      
      9.
     
  •  
  •     Number 2 
  •      
  •  
  •  
  •       
  •  
  •   
  • Calculate 

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

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  
      4.

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

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

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

    Heading.razor

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

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

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

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

     
 
 
 
      
  
  
  
  
    1.   
      2.

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

    CalculatorTotal.razor

     
 
 
 
      
  
  
  
  
    1.  
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3. @code { 
      4.   
  
  
  
    4.     [Parameter] 
      5.   
  
  
  
    5.     public int Total { get; set; } 
      6.   
  
  
  
    6. } 
      7.

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

    Calculator.razor

     
 
 
 
      
  
  
  
  
    1. @page "/calculator" 
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.  
      4.   
  
  
  
    4.   
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     Number 1 
      7.   
  
  
  
    7.      
      8.
     
  •  
  •     Number 2 
  •      
  •  
  •  
  •      
  •  
  •   
  • Calculate 

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

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

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

    MathTable.razor

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

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

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

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

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

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

    總結(jié)

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


    分享題目：一篇關(guān)于Blazor組件入門指南
    當(dāng)前地址：http://www.dlmjj.cn/article/dpehpoe.html

    其他資訊