Search⌘ K
AI Features
Home
Courses
Building Real-Life Applications with Blazor WebAssembly

RenderFragment Parameters

Explore how to use RenderFragment parameters to pass customizable UI content from parent to child components in Blazor. Understand naming conventions, including the ChildContent property, and how to handle multiple RenderFragments. This lesson helps you create flexible templated components for dynamic user interfaces.

We'll cover the following...

A RenderFragment parameter is a segment of UI content. A RenderFragment parameter is used to communicate UI content from the parent to the child. The UI content can include plain text, HTML markup, Razor markup, or another component.

The following code is for the Alert component. The UI content of the Alert component is displayed when the value of its Show property is true:

HTML
@if (Show)
{
  <div class="dialog-container">
    <div class="dialog">
      <div>
        @ChildContent
      </div>
      <div>
        <button @onclick="OnOk">
          OK
        </button>
      </div>
    </div>
  </div>
}
@code {
  [Parameter] public bool Show { get; set; }
  [Parameter] public EventCallback OnOk { get; set; }
  [Parameter] public RenderFragment? ChildContent { get; set; }
}

The preceding code, for the Alert component, includes three different types of parameters: Boolean, RenderFragment, and ...