itemtemplate是什么(解析Blazor中的模板化组件)

网站编辑01 2022-08-02 13:18:12 阅读:12

  实际项目当中经常会有很多重复使用的组件,她们具有相同的布局,只是填充的内容不一样,如果不停的复制粘贴也是件费劲的事情,而且也不好维护和更新,这时候就可以考虑使用模板化组件。

  比如以下Bootstrap自带的Card组件:

  红色框的部分就是公共的部分,我们可以把它们封装到模板化组件里。

  1. RenderFragment

itemtemplate是什么(解析Blazor中的模板化组件)

  模板化组件需要用到RenderFragment类型的参数。对于上面的例子,我们可以分成Header和Body两个部分,如下:

  @Header

  @Body

  @code { [Parameter] public RenderFragment Header { get; set; } [Parameter] public RenderFragment Body { get; set; }}1234567891011121314151617

  调用的时候可以这样写:

  Featured12345678910

  RenderFragment 不仅可以使用静态内容,还可以使用Razor语法,如下:

  Featured@foreach (var item in this.Items) { } @code { string[] Items = new string[] { "Cras justo odio","Dapibus ac facilisis in","Vestibulum at eros" };}1234567891011121314151617

  你还可以把Items封装到Card组件里面:

  @Header

  @foreach (var item in this.Items) {

  @item

  }

  @code { [Parameter] public RenderFragment Header { get; set; } [Parameter] public IEnumerable Items { get; set; }}1234567891011121314151617181920

  调用如下:

  Featured12345

  2. RenderFragment

  RenderFragment还可以带一个类型参数,这个参数有什么用呢? 看下面的例子:

  @Header

  @foreach (var item in this.Items) { @ItemTemplate(item) }

  @code { [Parameter] public RenderFragment Header { get; set; } [Parameter] public RenderFragment ItemTemplate { get; set; } [Parameter] public IEnumerable Items { get; set; }}1234567891011121314151617181920212223

  这里的ItemTemplate定义成了string类型的RenderFragment,并通过@ItemTemplate(item)来呈现内容,似乎有点不太好理解,先来看看调用方式:

  Featured12345678

  与前面的例子一样,ItemTemplate可以包含静态内容,也可以使用Razor语法,但是它多了一个@context,这个@context的类型其实就是参数声明里的string,她的值就是foreach里面当前item的值。

  3. typeparam

  RenderFragment 不仅可以使用固定类型,还可以通过typeparam来声明为泛型,如下:

  @typeparam TItem

  @Header

  @foreach (var item in this.Items) { @ItemTemplate(item) }

  @code { [Parameter] public RenderFragment Header { get; set; } [Parameter] public RenderFragment ItemTemplate { get; set; } [Parameter] public IEnumerable Items { get; set; }}12345678910111213141516171819202122232425

  与前面的例子的区别就是string换成了TItem, 同时声明了@typeparam,这样我们就可以使用任意类型的列表了,如下:

  Featured@code { Dictionary Users = new Dictionary() { { 1, "Cras justo odio" }, { 2, "Dapibus ac facilisis in" }, { 3, "Vestibulum at eros" } };}12345678910111213141516

  由于这里传递的是Dictionary,所以@context就是KeyValuePair(因为Dictionary就是IEnumerable的实现)。

  4 context

  通过前面的例子我们已经可以知道@context其实就是RenderFragment中使用的类型,Blazor通过隐式的方式把当前的值传给了她。当然你也可以换成其他的名字,比如:

  12345

  通过Context属性,就可以将context修改成你想要的名字。

  虽然这里的Context属性你可以放在ItemTemplate标签中,也可以放在Card标签中,但是笔者建议只放在ItemTemplate,以将修改控制在最小范围。

  Cras justo odio

  Dapibus ac facilisis in

  Vestibulum at eros

  @item

  @context

  @context.Value

  @user.Value

二维码