How to Get a Variable from HTML Input in Blazor C#

Blazor is a powerful web framework that allows you to build interactive web applications using C# instead of JavaScript. When working with forms and user input in Blazor, it’s common to capture the data entered by users and store it in variables for processing. In this article, we’ll guide you through the process of capturing HTML input values in a Blazor application using C#.

Why Capture HTML Input in Blazor?

Capturing user input is a critical part of web development, whether it’s for submitting a form, performing validation, or dynamically updating the user interface. In Blazor, this process is more straightforward than in traditional JavaScript-based frameworks because you can use C# for both client-side and server-side logic.

Here are some common reasons to capture HTML input in Blazor:

• User Registration Forms: Collecting usernames, passwords, and other details.
• Search Filters: Allowing users to search or filter data based on input criteria.
• User Preferences: Storing options or settings selected by the user.

How to Get a Variable from HTML Input in Blazor

In Blazor, binding an HTML input element to a C# variable allows you to access and manipulate the input data easily. Blazor supports two-way data binding, which ensures that any changes made by the user are reflected in your C# variables and vice versa.

Here’s how you can capture user input and store it in a variable:

Step 1: Create a New Blazor Component

First, create a new Blazor component (for example, InputExample.razor) where you will handle the user input. This component can be placed in your Pages or Components folder.

Step 2: Define the Input Field

You can use Blazor’s @bind directive to bind an HTML input element to a C# variable. The @bind directive allows you to automatically update the variable as the user types in the input field.

Here’s an example:

@page “/input-example”

<h3>Get Variable from HTML Input in Blazor</h3>

<p>Enter your name:</p>
<input type=”text” @bind=”userName” placeholder=”Enter your name” />

<p>You entered: @userName</p>

@code {
private string userName = string.Empty;
}

Explanation of the Code:

1. HTML Input Element: We have an <input type="text"> element where users can type their name.
2. @bind Directive: The @bind="userName" directive binds the value of the input field to the userName variable in C#. This means that any text entered in the input field will automatically be reflected in the userName variable.
3. Displaying the Variable: The entered value of userName is displayed below the input field using the @userName syntax. As the user types, this will update in real-time.

Step 3: Run the Application

Once you’ve written this code, run the Blazor application and navigate to the page where you have placed the InputExample.razor component. You should see an input box where you can type your name, and it will be immediately displayed below the field.

Handling Other Input Types

Blazor also supports other types of inputs like checkboxes, radio buttons, and select dropdowns. The same @bind syntax can be used for these types of inputs.

Here are a few examples:

Checkbox Input:

<p>Agree to terms:</p>
<input type=”checkbox” @bind=”isAgreed” /> I agree

<p>You agreed: @isAgreed</p>

@code {
private bool isAgreed = false;
}

In this example, isAgreed will be a boolean that reflects whether the checkbox is checked.

Radio Button Input:

<p>Choose your favorite color:</p>
<input type=”radio” @bind=”selectedColor” value=”Red” /> Red
<input type=”radio” @bind=”selectedColor” value=”Blue” /> Blue
<input type=”radio” @bind=”selectedColor” value=”Green” /> Green

<p>Your favorite color is: @selectedColor</p>

@code {
private string selectedColor = string.Empty;
}

In this case, selectedColor will hold the value of the selected radio button.

Select Dropdown Input:

<p>Select a country:</p>
<select @bind=”selectedCountry”>
<option value=”USA”>USA</option>
<option value=”Canada”>Canada</option>
<option value=”UK”>UK</option>
</select>

<p>You selected: @selectedCountry</p>

@code {
private string selectedCountry = string.Empty;
}

Here, selectedCountry will contain the country that the user selects from the dropdown.

---

Using Input Data for Actions

Once you have captured the input data, you can use it to trigger other actions. For example, you might want to submit the form, validate the input, or store it in a database.

Here’s how you can handle a button click to use the captured data:

<button @onclick=”SubmitForm”>Submit</button>

<p>@message</p>

@code {
private string userName = string.Empty;
private string message = string.Empty;

private void SubmitForm()
{
message = $”Hello, {userName}! Your form has been submitted.”;
}
}

When the button is clicked, the SubmitForm method is called, and the message is updated with the entered name.

Conclusion

Capturing and working with HTML input in Blazor is simple and effective. By using the @bind directive, you can easily bind user input to C# variables, allowing you to handle data in real-time. Whether you’re working with text inputs, checkboxes, radio buttons, or dropdowns, Blazor makes it easy to capture and process data without needing to rely on JavaScript. This seamless integration between the UI and C# makes Blazor a powerful tool for building interactive web applications.

Have you used Blazor’s input binding in your project? Share your experience or any challenges you’ve faced in the comments below!