Blazor advanced features
This section collects short descriptions of various Blazor advanced features organized in subsections. For lack of space, we can't give all the details of each feature, but the lacking details are covered by links in the Further reading section. We start with how to reference components and HTML elements defined in Razor markup.
References to components and HTML elements
Sometimes we might need a reference to a component in order to call some of its methods. This is the case, for instance, for a component that implements a modal window:
<Modal @ref="myModal">
...
</Modal>
...
<button type="button" class="btn btn-primary"
@onclick="() => myModal.Show()">
Open modal
</button>
...
@code{
private Modal myModal {get; set;}
...
}
As the preceding example shows, references are captured with the @ref directive. The same @ref directive can also be used to capture references...