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 = "内容被展开";
    }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章