Blazor includes several ways to share information between components. You can use component parameters or cascading parameters to send values from a parent component to a child component. The AppState pattern is another approach you can use to store values and access them from any component in the application.
Suppose you’re working on the new pizza delivery website. Multiple pizzas should be displayed on the home page in the same way. You want to display the pizzas by rendering a child component for each pizza. Now, you want to pass an ID to that child component that determines the pizza it displays. You also want to store and display a value on multiple components that shows the total number of pizzas you sold today.
In this unit, you learn three different techniques you can use to share values between two or more Blazor components.
Sharing information with other components by using component parameters
In a Blazor web app, each component renders a portion of HTML. Some components render a complete page but others render smaller fragments of markup, such as a table, a form, or a single control. If your component renders only a section of markup, you must use it as a child component within a parent component. Your child component can also be a parent to other smaller components that render within it. Child components are also known as nested components.
In this hierarchy of parent and child components, you can share information between them by using component parameters. Define these parameters on child components, and then set their values in the parent. For example, if you have a child component that displays pizza photos, you could use a component parameter to pass the pizza ID. The child component looks up the pizza from the ID and obtains pictures and other data. If you want to display many different pizzas, you can use this child component multiple times on the same parent page, passing a different ID to each child.
Start by defining the component parameter in the child component. You define it as a C# public property and decorate it with the [Parameter]
attribute:
razorCopy
<h2>New Pizza: @PizzaName</h2>
<p>@PizzaDescription</p>
@code {
[Parameter]
public string PizzaName { get; set; }
[Parameter]
public string PizzaDescription { get; set; } = "The best pizza you've ever tasted."
}
Because the component parameters are members of the child component, you can render them in your HTML by using Blazor’s reserved @
symbol, followed by their name. Also, the preceding code specifies a default value for the PizzaDescription
parameter. This value is rendered if the parent component doesn’t pass a value. Otherwise, the value passed from the parent overrides it.
You can also use custom classes in your project as component parameters. Consider this class that describes a topping:
C#Copy
public class PizzaTopping
{
public string Name { get; set; }
public string Ingredients { get; set; }
}
You can use that as a component parameter in the same way as a parameter value to access individual properties of the class by using dot syntax:
razorCopy
<h2>New Topping: @Topping.Name</h2>
<p>Ingredients: @Topping.Ingredients</p>
@code {
[Parameter]
public PizzaTopping Topping { get; set; }
}
In the parent component, you set parameter values by using attributes of the child component’s tags. You set simple components directly. With a parameter based on a custom class, you use inline C# code to create a new instance of that class and set its values:
razorCopy
@page "/pizzas-toppings"
<h1>Our Latest Pizzas and Topping</h1>
<Pizza PizzaName="Hawaiian" PizzaDescription="The one with pineapple" />
<PizzaTopping Topping="@(new PizzaTopping() { Name = "Chilli Sauce", Ingredients = "Three kinds of chilli.
istqb certification malaysia
Leave a Reply