Blazor Using Forms with Model Binding

Blazor is a popular framework in .NET for building web applications using C#. One key aspect of building web applications is handling user input with forms. Fortunately, Blazor comes with built-in support for working with forms via model binding.

Syntax

Here is an example of how to use model binding in a Blazor form:

<form @onsubmit="HandleSubmit">

    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" @bind="person.FirstName" />

    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" @bind="person.LastName" />

    <button type="submit">Save</button>

</form>

In this example, we have an HTML form with two text input fields for the user's first and last name. We use the @bind directive to bind these fields to the person model. When the user submits the form by clicking the 'Save' button, the HandleSubmit method will be called.

@code {
    private Person person = new Person();

    private void HandleSubmit()
    {
        // Handle form submission
    }

    private class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
    }
}

Here, we define a Person class with properties for the user's first and last name. We also define a HandleSubmit method that will be called when the user submits the form. This method can access the person model to retrieve the values of the form fields.

Example

Let's take a look at an example of how to use model binding in a more complete scenario. Suppose we have a web application for managing a list of contacts. We can use the following Blazor component to display a form for creating a new contact:

@page "/contacts/create"

<h1>Create Contact</h1>

<form @onsubmit="@HandleSubmit" class="form-horizontal">
    <div class="form-group">
        <label for="firstName" class="control-label col-md-2">First Name:</label>
        <div class="col-md-10">
            <input type="text" id="firstName" name="firstName" @bind="@Contact.FirstName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="lastName" class="control-label col-md-2">Last Name:</label>
        <div class="col-md-10">
            <input type="text" id="lastName" name="lastName" @bind="@Contact.LastName" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="email" class="control-label col-md-2">Email:</label>
        <div class="col-md-10">
            <input type="email" id="email" name="email" @bind="@Contact.Email" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="phone" class="control-label col-md-2">Phone:</label>
        <div class="col-md-10">
            <input type="text" id="phone" name="phone" @bind="@Contact.Phone" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label for="notes" class="control-label col-md-2">Notes:</label>
        <div class="col-md-10">
            <textarea id="notes" name="notes" @bind="@Contact.Notes" class="form-control"></textarea>
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
</form>

@code {
    private Contact Contact { get; set; } = new Contact();

    private async Task HandleSubmit()
    {
        // Submit contact form
    }

    private class Contact
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string Notes { get; set; }
    }
}

In this example, we have a form that allows the user to enter information about a new contact (first name, last name, email, phone, and notes). We use the @bind directive to bind each input field to the Contact model. When the user submits the form by clicking the 'Save' button, the HandleSubmit method will be called. This method can access the Contact model to retrieve the values of the form fields.

Output

The output of this example is a new contact object with the values entered by the user:

private async Task HandleSubmit()
{
    var newContact = new Contact
    {
        FirstName = Contact.FirstName,
        LastName = Contact.LastName,
        Email = Contact.Email,
        Phone = Contact.Phone,
        Notes = Contact.Notes
    };

    // Save new contact to database
}

Explanation

Model binding is a powerful feature in Blazor that simplifies the process of handling user input with forms. When using model binding, we create a model to represent the data we want to collect from the user. We then bind the form fields to the properties of this model using the @bind directive. When the user submits the form, the values of these fields are automatically updated in the model. We can then use this model to retrieve the values of the form fields and process them as needed.

In the example above, we used model binding to collect information about a new contact from the user. We created a Contact model with properties for each field in the form. We then bound each input field to the corresponding property in the model using the @bind directive. When the user submits the form, the values of these fields are automatically updated in the Contact model. We can then access the Contact model in the HandleSubmit method to retrieve the values of the form fields and save them to the database.

Use

You can use model binding in Blazor whenever you need to collect information from the user using a form. To use model binding, you need to create a model to represent the data you want to collect. You then bind the form fields to the properties of this model using the @bind directive. When the user submits the form, the values of these fields are automatically updated in the model. You can then access the model in the HandleSubmit method to retrieve and process the values as needed.

Important Points

• Model binding simplifies the process of handling user input with forms in Blazor.
• To use model binding, you need to create a model to represent the data you want to collect from the user.
• You then bind the form fields to the properties of this model using the @bind directive.
• When the user submits the form, the values of these fields are automatically updated in the model.
• You can access the model in the HandleSubmit method to retrieve and process the values as needed.

Summary

In this article, we learned about how to use model binding in Blazor to collect information from the user using a form. We saw an example of how to create a form for creating a new contact, and how to use model binding to bind the form fields to a Contact model. We also saw how to access the Contact model in the HandleSubmit method to retrieve and process the values of the form fields. Model binding is a powerful feature in Blazor that simplifies the process of handling user input with forms.