Examining the SurveyPrompt Component

Look at the Razor markup. This simple component displays an icon in front of the Title, as shown in Figure 3-1, and then displays a link to the survey (which you should take ☺ because it will show Microsoft that you’re interested in Blazor).

The @functions code section simply contains property Title, which uses one-way databinding for rendering in the component. Note the [Parameter] attribute. It is required for components that want to expose their properties to the parent component. Parameters cannot be public properties, and the compiler will give you an error when you try to make it so.

You might wonder why [Parameter] properties can’t be public. I asked Daniel Roth, who’s on the Blazor team, and this is his answer: “Think of parameters as like parameters to a method or constructor. They are not something you should generally be able to mutate externally to the component after they have been passed in.” Steve Sanderson, who is the key author of Blazor, explains that changing the value of a parameter from code will not behave as expected because change detection will not see the change. Changing the value through data binding shows the change.

Building a Simple Alert Component with Razor

Let’s build a simple Blazor component that will show a simple alert. Alerts are used to draw the user’s attention to some message, for example a warning.

Creating a New Component with Visual Studio

Open the MyFirstBlazor solution. Right-click the Pages folder and select Add > New Item. The Add New Item window should open, as in Figure 3-2.

Select Razor View and name it Alert.cshtml. Click the Add button.

Implement the Alert Component

Remove all existing content from Alert.cshtml and replace with Listing 3-3.

@if (Show)

{

  <div class="alert alert-secondary mt-4" role="alert">

    @ChildContent

  </div>

}

@functions {

[Parameter]

bool Show { get; set; }

[Parameter]

RenderFragment ChildContent { get; set; }

}

Listing 3-3

The Alert Component

The Alert component will display whatever content you nest in it (using bootstrap styling).

The default Blazor templates use Bootstrap 4 for styling. Bootstrap ( http://getbootstrap.com ) is a very popular CSS framework, originally build for Twitter, providing easy layout for web pages. However, Blazor does not require you to use Bootstrap, so you can use whatever styling you prefer. If you so, you must update all the Razor files in the solution to use the other styles, just like in regular web development. In this book, we will use Bootstrap.

The @ChildContent will hold this content and needs to be of type RenderFragment because this is the way the Blazor engine passes it (you will look at this later in this chapter).

Go back to Index.cshtml and add the Alert element. Visual Studio is smart enough to provide you with IntelliSense (see Figure 3-3) for the Alert component and its parameters! Visual Studio Code unfortunately (at the time of writing this chapter) does not offer IntelliSense yet.

Complete the Alert and add a button as in Listing 3-4.

<Alert Show="@ShowAlert">

  <span class="oi oi-check mr-2" aria-hidden="true"></span>

  <strong>Blazor is soo cool!</strong>

</Alert>

<button class="btn btn-default" onclick="@ToggleAlert">

  Toggle

</button>

@functions {

public bool ShowAlert { get; set; } = true;

public void ToggleAlert()

{

  ShowAlert = !ShowAlert;

}

}

Listing 3-4

Using the Alert Component

Inside the <Alert> tag is a <span> displaying a checkmark icon and a <strong> element displaying a simple message. They will be set as the @ChildContent property of the Alert component. Build and run your project. When you click the <button>, it calls the ToggleAlert method, which will hide and show the Alert, as shown in Figure 3-4.

Separating View and View-Model

You might not like this mixing of markup (view) and code (view-model). If you like, you can use two separate files, one for the view using Razor and another for the view model using C#. The view will display the data from the view model, and event handlers in the view will invoke methods from the view model. Some people prefer this way of working because it’s more like the MVVM pattern. Let’s try this!

Using Component-to-Component Data Binding

So why doesn’t your DismissableComponent hide itself after 5 seconds?

Look at the markup, which is in Listing 3-10, for DismissibleAlert again. It shows the component based on the Show parameter, and it gets set through data binding. The problem is that the parent Index component’s ShowAlert stays true. Changing the value of the DismissableAlert local show field will not update the Index component’s ShowAlert property. What you need is two-way data binding between components, and Blazor has that.

With two-way data binding, changing the value of the Show parameter will update the value of the ShowAlert property of the parent, and vice versa.

Open the DismissableAlertViewModel class and change the Show property implementation, as shown in Listing 3-12. Here you add an extra parameter that should be called <<yourproperty>>Changed and should be of type Action<<typeofyourproperty>>.

public class DismissableAlertViewModel : BlazorComponent

{

  private bool show = true;

  [Parameter]

  protected bool Show

  {

    get => show;

    set

    {

      if (show != value)

      {

        show = value;

        ShowChanged?.Invoke(show);

      }

    }

  }

  [Parameter]

  protected Action<bool> ShowChanged { get; set; }

  [Parameter]

  protected RenderFragment ChildContent { get; set; }

  public void Dismiss()

  {

    Show = false;

  }

}

Listing 3-12

The DismissableAlertViewModel Class with Two-Way Binding Support

Now whenever someone or something changes the Show property’s value, the property’s setter triggers the ShowChanged delegate. This means the parent component can inject some code into the ShowChanged delegate property, which will invoke when the property is changed (internally or externally).

Remember to check if the value has changed. This will help you avoid a nasty bug where the child property updates the parent property, which triggers the child property to update, and so on ad infinitum.

Run again. Still, the alert does not disappear. Think about this. You invoke a method asynchronously using a Timer. When the timer fires, you set the ShowAlert property to false. But you still need to update the UI. You could do this by calling StateHasChanged in the DismissAlert method from Listing 3-11. But there is a better way, which is shown in Listing 3-13. Here you call StateHasChanged whenever the ShowAlert property gets a new value.

public bool ShowAlert

{

  get => showAlert;

  set

  {

    if (showAlert != value)

    {

      showAlert = value;

      this.StateHasChanged();

    }

  }

}

Listing 3-13

Updating the UI When ShowAlert Changes Value

Run. Wait 5 seconds.

The alert should automatically hide, as illustrated by Figure 3-5 and Figure 3-6.

Creating the Component Library Project

For the moment, you cannot create Blazor component libraries from Visual Studio, so you will have to use the command-line prompt.

The dotnet new command will create a new project based on a template. The template you want is the blazorlib template. If you want the project to be created in a subdirectory, you can specify it using the -o subdirectory parameter.

This time you want to change the solution, and dotnet sln add allows you to add a project (which is the last argument) to the solution. When you go back to Visual Studio, it will tell you about a file modification, as shown in Figure 3-7.

Simply press Reload to continue working.

Adding Components to the Library

Previously, you built a couple of components. Some of them are very reusable, so you will move them to your library project. Start with Timer.

Drag-and-drop the Timer.cs file from your client project to the components project. You should see a new Timer.cs file, as illustrated by Figure 3-8.

Visual Studio creates a copy of the file, so remove the Timer.cs file from the client project (no need to do this with Code). Right-click the Timer.cs file in the client project and select Delete, as in Figure 3-9.

Building the solution will still trigger compiler errors from the client project because you need to add a reference from the client project to the component library, which you will fix in the next part.

Refering to the Library from Your Project

Now that your library is ready, you are going to use it in your project. The way the library works is that you can use it in other projects. Hey, you could even make it into a NuGet package and let the rest of the world enjoy your work!

Referring to Another Project with Visual Studio

Start by right-clicking your client project and selecting Add ➤ Reference. Visual Studio will show Figure 3-10.

Make sure you check MyFirstBlazor.Components and click OK.

Creating a Component to Display a List of Pizzas

Open the PizzaPlace Blazor project from the previous chapter. Start by reviewing index.cshtml. This is your main component, and it has three main sections: a menu, a shopping basket, and customer information.

The menu lists the pizzas and displays each one with a button to order. The shopping basket also displays a list of pizzas (but now from the shopping basket) with a button to remove them from the order. Looks like both have something in common: they need to display pizzas with an action you choose by clicking the button.

The PizzaItem component will display a pizza, so it should not come as a surprise that it has a Pizza parameter. This component also displays a button, but how this button looks and behaves will differ depending on where you use it. And that is why it has a ButtonTitle and ButtonClass parameter to change the button’s look, and it also has a Selected action that gets invoked when you click the button.

The PizzaList component displays a Title and all the pizzas from the Menu, so it takes them as parameters. It also takes a Selected action that you invoke by clicking the button next to a pizza. Note that the PizzaList component uses the PizzaItem component to display each pizza, and that the PizzaList Selected action is passed directly to the PizzaItem Selected action. The Index component will set this action, and it will be executed by the PizzaItem component.

Run the application and try to order a pizza. The shopping basket does not display when you click the Order buttons! Why? Because the UI does not get updated. You need to fix this. You have already seen how to do so. Think about it.

Updating the UI after Changing the State Object

Run and order a couple of pizzas. It works!

Think about this. Components rerender themselves after events, but only themselves. When a component makes a change affecting other components, you need to call StateHasChanged on the affected components.

Showing the ShoppingBasket Component

The ShoppingBasket component is similar to the PizzaList component, but there are some big differences. The basket class keeps track of the order using only ids of pizzas, so you need something to get the pizza object. This is done through the GetPizzaFromId delegate. Another change is the OnParametersSet method. The OnParametersSet method gets called when the component’s parameters have been set. Here you override it to build a list of (pizza, position) tuples that you need during data binding, and to calculate the total price of the order.

Tuples are just another type in C#. But modern C# offers a very convenient syntax; for example, IEnumerable<(Pizza pizza, int post)> means you have a type that is a list of pizza and position pairs.

Creating a Validation Component Library

The third section of the Index component is about entering and validating details about the customer. You could say that validation is a very common thing, but there is no built-in validation in Blazor so you will create a component library for validation and then use it for building the CustomerEntry component. The Customer class already implements the INotifyDataErrorInfo interface, so this part does not need to change.

This creates a new Blazor library project.

This adds the new project to your solution.

You expect the Subject and Property parameters to be set to an object implementing either the IDataErrorInfo or INotifyDataErrorInfo interface. You use this to dynamically build the Error collection, which is then used to list any validation errors.

Remember the validation-error style you added in the previous chapter to change the color of validation errors? Move this CSS to the /content/styles.css file from the component library. This concludes the validation component library.

Adding the CustomerEntry Component

I’ll explain the implementation a bit. You should pass the name of the property in the PropertyChanged event. You could pass this name as a string to the OnPropertyChanged method, but when you change the name of the property there is a large chance you will forget to update this string. It’s better to pass nothing and have the compiler figure out the name of the property. This can be done using the CallerMemberName attribute, which will make the compiler figure out the name of the caller, in this case the name of the property!

Which kind of code is the most maintainable and bug-free code you can write? Code you did not write!

Implement the Street and City properties in the same way.

Build and run. Now when you make a change to the customer the debugging tip will update. You might think, “So what?” The customer could also be used by another component that needs to see changes.

OnInit and OnInitAsync

When your component has been completely initialized, the OnInit and OnInitAsync methods are called. Implement one of these methods if you want to do some extra initialization after the component has been created, such as fetching some data from a server, like the FetchData component from the MyFirstBlazor project.

OnParametersSet and OnParametersSetAsync

When you need one or more parameters for initialization, use OnParametersSet or OnParametersSetAsync instead of the OnInit/OnInitAsync methods. These methods get called after the component has been initialized and after the parameters have been data-bound. For example, you could have a DepartmentSelector component that allows the user to select a department from a company, and another EmployeeList component that takes the selected department as a parameter. The EmployeeList component can then fetch the employees for that department in its OnParametersSetAsync method.

OnAfterRender and OnAfterRenderAsync

The OnAfterRender and OnAfterRenderAsync methods are called after Blazor has completely rendered the component. This means that the browser’s DOM has been updated with changes made to your Blazor component. You can use these methods to invoke JavaScript code that needs access to elements from the DOM (which we will cover in the JavaScript chapter).

IDisposable

If you need to run some cleanup code when your component is removed from the UI, implement IDisposable. You can implement this interface in Razor using @implements, as shown in Listing 3-38. Normally you put the @implements at the top of the CSHTML file.

If you’ve separated the view and view model, you implement this interface on the view model.

Creating the Grid Templated Component

Open the MyFirstBlazor project you have been using. Now add a new component (a Razor view) to the MyFirstBlazor.Client project’s Pages folder and name it Grid as in Listing 3-40. This is a templated component because it states the TItem as a type parameter using the @typeparam TItem syntax. This is like a generic type stated in C# with public class List<T> where T is a type parameter.

The Grid component has four parameters. The Header and Footer parameter are of type RenderFragment, which represents some HTML that you can specify when you use the Grid component (you will look at an example right after exploring the Grid component further). Look for the <thead> element in Listing 3-40 in the Grid component. Here you use the @Header razor syntax to tell the Grid component to put the HTML for the Header parameter here (same thing for the Footer).

The Row parameter is of type RenderFragment<TItem>, which is a generic version of RenderFragment. In this case you can specify HTML with access to the TItem allowing you access to properties and methods of the TItem. The Items parameter is an IReadOnlyList<TItem> which can be data-bound to any class with the IReadOnlyList<TItem> interface. Look for the <tbody> element in Listing 3-40. You iterate over all the items (of type TItem) of the IReadOnlyList<TItem> and you use the @Row(element) Razor syntax to apply the Row parameter, passing the current item as an argument.

Using the Grid Templated Component

Now let’s look at an example of using the Grid templated component. Open the FetchData.cshtml component in the MyFirstBlazor.Client project. Replace the <table> (comment the <table> because you will come back to it in later chapters) with the Grid component in Listing 3-41.

The FetchData component uses a couple of things such as @page and @inject. I will discuss them in later chapters, so bear with the example.

Now look at the <Header> parameter of the Grid component in Listing 3-41. This syntax binds whatever is inside the <Header> to the Grid’s Header parameter. In this example, you specify some table headers. The Grid puts them inside the <tr> element from Listing 3-40. Again, the <Footer> is similar.

Examine the <Row> parameter in Listing 3-41. Inside the <Row> you want to use the current item from the iteration in Listing 3-40. But how should you access the current item? By default, Blazor will pass the item as the context argument (of type TItem), so you access the date of the forecast instance as @context.Date. But you can override the name of the argument, and this is what you do with the Context parameters (provided by Blazor) using <Row Context="forecast">. Now the item from the iteration can be accessed using the forecast argument.

Run your solution and select the Fetch data link from the navigation menu. Admire your new templated component, shown in Figure 3-11!

Now you have a reusable Grid component that you can use to show any list of items by passing the list to the Items parameters and specifying what should be shown in the Header, Row, and Footer parameters! But there’s more!

Specifying the Type Parameter’s Type Explicitly

Razor Templates

Razor templates are a great way to reuse a UI snippet because you can invoke it in different components.