如何在blazor组件中渲染模板?

时间:2019-06-18 11:03:03

标签: blazor

我试图通过c#在blazor中渲染模板。

我已经浏览了Microsoft文档。他们建议使用RenderFragment。但是我无法获得实现这一目标的正确方法。

1 个答案:

答案 0 :(得分:2)

定义一个简单的FilmList组件,该组件仅循环播放已传入的电影。FilmTemplate属性是模板参数。模板参数是使模板化组件与常规组件不同的原因。

模板参数允许您定义组件的区域,该区域将在渲染时使用组件使用者提供的模板。它们可以定义为RenderFragment或RenderFragment。我将简要介绍通用版本。

FilmList.razor:

<div>
  @foreach (var film in Films)
  {
    @FilmTemplate(film)
  }
</div>

@code{
  [Parameter] RenderFragment FilmTemplate { get; set; }
  [Parameter] IReadOnlyList Films { get; set; }
}

用法:

<FilmList Films="@Films">
  <FilmTemplate>
    <div>@context.Title (@context.YearReleased)</div>
  </FilmTemplate>
</FilmList>

@code {
  public List Films { get; set; } = new List {
    new Film("Pulp Fiction", "1994", "pulp-fiction.jpg"),
    new Film("Bad Boys II", "2003", "bad-boys2.jpg"),
    new Film("The Fast and the Furious", "2001", "tfatf.jpg"),
    new Film("The Greatest Showman", "2017", "greatest-showman.jpg")
  };
}

为了使用FilmList组件,我们必须为影片定义一个模板。在本例中,使用与模板参数名称匹配的元素来完成此操作。

来源:https://visualstudiomagazine.com/articles/2018/12/01/blazor-templated-components.aspx

希望这会有所帮助... 如果您有疑问或不清楚的地方,请不要犹豫。