How do I get a variable from an HTML input in Blazor?

In Blazor, retrieving a variable from an HTML input involves using data binding and event handling. Here's a breakdown of how to achieve this:

1. Using `@bind` for Two-Way Data Binding:

- The most straightforward way to get a variable from an HTML input is by using the `@bind` directive. This creates a two-way binding between the input's value and a C# property in your Blazor component.

2. Example with a Text Input:

- Here's an example of how to bind a text input to a string variable:

<input type="text" @bind="InputValue" />
<p>You entered: @InputValue</p>

@code {
  public string InputValue { get; set; } = "";
}

- In this example, `InputValue` is a C# property that will be updated whenever the user types in the input field. The value is also displayed below the input.

3. Using `@bind:event` for Specific Events:

- You can also specify the event that triggers the binding update using `@bind:event`. For example, you might want to update the variable only when the input loses focus (onblur):

<input type="text" @bind="InputValue" @bind:event="onblur" />
<p>You entered: @InputValue</p>

@code {
  public string InputValue { get; set; } = "";
}

4. Handling Other Input Types:

- The `@bind` directive works with various input types, such as `number`, `checkbox`, `radio`, and `select`. The data type of the bound property should match the input type (e.g., `int` for number inputs, `bool` for checkboxes).

5. Using Event Handlers for More Control:

- If you need more control over the input handling, you can use event handlers like `@oninput` or `@onchange`. This allows you to perform additional logic when the input value changes.

6. Example with Event Handler:

<input type="text" @oninput="HandleInput" />
<p>You entered: @InputValue</p>

@code {
  public string InputValue { get; set; } = "";
  private void HandleInput(ChangeEventArgs e)
  {
    InputValue = e.Value.ToString();
  }
}

By using these methods, you can effectively retrieve and manage variables from HTML inputs in your Blazor applications. The `@bind` directive is generally the easiest for simple scenarios, while event handlers provide more flexibility for complex interactions.

Learn more about this