In previous two articles, we have seen some basic concepts about Blazor App – Routing Basics and Blazor Component Basics. In this article, let’s try to add a Blazor component.

Prerequisites

You should have .NET 7 installed on your machine. Then I am using Visual Studio 2022 preview version in order to be able to use .NET 7 templates with Visual Studio.

Apart from these, we have created a solution which contains an API project. This API project has some basic CRUD operations implemented using EF Core Code First approach. Then this solution also has a web assembly project which consumes the GET API exposed by API project.

Follow the steps given in previous articles to get the project working. Or alternatively, you can download the solution from my GitHub repository.

Add Blazor Component

Now, let’s open the solution and let’s go to the Blazor WebAssembly Standalone App project. Then right click on the Pages folder and then Select Add -> Razor Component from the context menu.

Let’s name this component as AddStudent.razor. Once the file is added, add a @page directive at the top and set its value to “/add-student” (as per the naming conventions we discussed in the previous article).

Let the default contents be there for now.

Add Navigation Link

Now, let’s modify the navigation links. Let’s open Shared/NavManu.razor file. There let’s add the code given below inside the nav element. Here there are two important things to note:

• href attribute has been set to the same value (i.e. add-student) which was assigned to @page directive in the Blazor component (except the first slash).
• After the span element, the display text for the link is “Add Student”.

In addition, as the application is going to focus on Student APIs, you can also change the display text, Fetch Data, to Get Students.

Form and Inputs

The Blazor framework supports forms and provides built-in input components:

• EditForm component bound to a model that uses data annotations
• Built-in input components

So the component EditForm  can be used and it can be bound to a model. A model basically is a POCO class. In order to validate the data, the properties inside that model can be decorated with validation attributes. This EditForm component provides three callbacks

• OnValidSubmit to assign an event handler to run when a form with valid fields is submitted
• OnInvalidSubmit to assign an event handler to run when a form with invalid fields is submitted
• OnSubmit to assign an event handler to run regardless of the form fields’ validation status

These callbacks can be used to hook the code that we want to invoke on form submission.

In addition, there are also some in-built classes, which can be used to render the input controls. E.g. InputCheckbox, InputDate<TValue>, InputNumber<TValue>, InputRadioGroup<TValue>, InputRadio<TValue>, InputSelect<TValue>, InputText, etc.

For now, this much information should be sufficient to create the basic form that we need. So, let’s create a simple form using this information. The code snippet of the Blazor component is given below.

It contains 3 text fields, for inputting first name, last name and address. The date time field is being hard coded to current time just before making request to API. Then the OnValidSubmit handler invokes the StudentsApiClient, which ultimately invokes the POST API to insert new record in the database.

The EditForm also has an attribute, Model, which specifies the instance of object which should be used for binding to input controls in that form. Here we have used an instance of type Student. Individual properties from this model has been bound to the input controls using directive attribute @bind-value. This @bind directive basically can be used to bind any value with any HTML property. Here, we want to bind with value property hence we used @bind-value.

API Integration

The code snippet given below shows the code which makes call to the Post API.

Run and Verify

Now, if we run the solution, we should be able to see three textboxes and a Submit button on Add Students page. If we provide any inputs and click on Submit, it will call API and save the data to database. We can verify this by opening Get Students page. So, it seems our setup is working as expected.

Although, the code is working as expected, there are many things which can be added / improved. When user clicks on Submit button, there should be notification confirming whether the action was successfully performed. Also, the validations can be added and if there are any validation errors, the UI should show them.

We will try to add these improvements in the coming articles. I hope you find this information helpful. Let me know your thoughts.