Blazor 學習記錄一_Razor組件_項目結構和路由組件_組件參數_導航參數_級聯參數_事件和事件參數

3.Razor組件

  1. 繼承自ComponentBase或實現了IComponent接口,每個組件都是一個類。
  2. 其命名空間默認爲項目+文件件層級,或用@namespace指定顯示指定命名空間。
  3. 組件的全局命名空間保存地爲 _Imports.razor 文件。此命名爲約定式,此命名的文件可以存在於不同層級,但它只作用於它所在的層級以及子層級。

4.項目結構和路由組件

@page "/Counter" 路由必須用/開頭。一個頁面可以有多個路由,但彼此不能相同。

5.組件的參數

  1. 參數必須是一個C#屬性,前面用[parameter]標籤
  2. 當自己寫的組件需要支持調用者在開始和閉合標籤之間寫文本時,則必須寫一個名稱叫 ChildContent 的約定參數,類型爲RenderFragement? 。
  3. 如果像上一步一樣組件已經有了事先約定名稱爲 ChildContent 的參數,我們又要寫多個類型也爲RenderFragement的參數比如叫 TitleContent 時,則使用者在調用參數時,直接在開始和閉合標籤之間寫html文本只會賦值給名子爲約定名的ChildContent參數,如果要賦給TitleContent參數,則必須顯式把它包裹在以TitleContent爲標籤名稱的html標籤內纔可以。

6.導航參數

  1. 模版匹配
    頁面路由爲 :@page "/nav/{Id:int?} 時,URL中參數Id的值採用聲明一個同名參數(注意大小寫敏感)的方式來獲取:
[parameter]public int? Id{get;set;}
  1. 查詢參數匹配
    查詢URL如:/list/2?page=3&name=小四,此時可以在參數的[Parameter]標籤後再跟一個標籤[SupplyParameterFromQuery],比如:
[Parameter][SupplyParameterFromQuery]public string Name{...}
[Parameter][SupplyParameterFromQuery]public int Page{...}

這時,客戶端調用時從URL中傳入的參數,就會被後端同名的Name、Page參數獲取到(大小寫不敏感)。

7.級聯參數

  1. 爲什麼要用級聯參數?
    因爲普通參數不夠用:在組件內部定義的普通參數,可以方便的讓調用者傳遞信息進入組件內部;但是 1.當參數較多時,一一定義就會很麻煩 2.當層級很深時每個層的組件也都要定義一次所有參數,還是很麻煩。
    所以,我們需要設計一種參數,1.可以以引用類型爲載體,比如類 好處是可以一次傳遞多個參數 2.最外層組件定義一次而在內層組件中可層層傳遞使用。
  2. 級件中級聯參數的定義 CascadingValue
    在組件中
<CascadingValue value="@("張佳樂")" Name="Name">
    ...
</CascadingValue>

其中,value指定了值,name指定了該級聯參數的名稱(用於多個時區分)。級聯參數可以套娃。
3. 級聯參數在子組件中的接收

[CascadingParameter(Name="Name")]string? StudentName{get;set;}
注意:

1.當一個數據類型的級聯參數只有一個時,不需要指定name參數即使有多個參數也能被按類型一一接收到而不會錯位匹配。
2.定義中的類型與接收中的類型必須一至才能接收到,即使指定名稱也不行。

8.事件和事件參數

html元素的事件名稱前加 @ 符號,即成爲Blazor的事件(blazor與js交互時會映射爲去掉 @ 符號後的 html事件從而引發js代碼)舉例如@onclick、onkeypress事件,事件要執行的是一段C#代碼或方法,實際上該事件就是一個C#的EventCallback類型的委託,這也就銜接到了C#委託與事件的知識體系上來了。其中 T 是Blazor爲我們封裝好的事件參數類型(方便使用它很多的屬性),比如MouseEventArgs、KeyEventArgs 他們也一樣繼承自C#中EventArgs類。

  1. 定義事件
    假定我們寫了一個組件名爲 Collapse ,在其內部定義一個事件:
[parameter]public EventCallback OnExpanded {get;set;}

命名一般以On開頭。這樣外部調用都就可以傳遞合適的方法給這個委託,組件內部適當的地方我們就可以執行這個委託從而執行外部傳進來的C#方法,如:{await OnExpanded?.InvokeAsync();}
2. 外部調用者使用事件

@Page "/"
<PageTitle> Home </PageTitle>
<Collapse OnExpanded="Expand">顯示的內容</Collapse>
<h3>@message</h3>
...
@code
{
    string? message;
    void Expand()
    {
        message = "內容被展開";
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章