CODEWITHSUNDEEP
blazor
Kesavan Subramaniam Che
Kesavan Subramaniam Che

Reputation: 877

How to render templates in blazor components?

I have tried to render the templates in blazor via c#.

I have surfed microsoft docs. They suggested to use RenderFragment. But I can't get the correct way to acheive this.

Upvotes: 0

Views: 934

Answers (1)

enet
enet

Reputation: 45586

Define a simple FilmList component that just loops over the films that have been passed in. The FilmTemplate property is a template parameter. Template parameters are what make templated components different from normal components.

Template parameters allow you to define an area of the component that will use a template provided by the component consumer when rendering. They can be defined as either RenderFragment or RenderFragment . I'll cover the generic version in a bit.

FilmList.razor:

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

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

Usage:

<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")
  };
}

In order to use the FilmList component we have to define a template for the film. This is done using elements that match the template parameter name, in our case .

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

Hope this helps... If you've got questions or something is not clear, don't hesitate to ask.

Upvotes: 3

Related Questions