Blazor - Two-Way Data Binding

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Two-Way Data Binding

Smart Blazor components support two-way data binding. You can read more about it in the Blazor data binding guide. This means you can use the @bind attribute to implement binding between a component's property and a data field.

The following code uses the @bind-Value attribute to bind an Input's Value property to an inputValue string variable. When the editor is rendered, the property's value comes from the bound field. When a user changes the input value, the property's value is updated.

    <Input @bind-Value="@inputValue" Placeholder="Some Text..." />

    <h3>Input Value: @inputValue </h3>

    @code {
     	string inputValue = "";
    }
      

The equivalent without using the @bind-Text attribute is:

    <Input @ref="input" Value="@inputValue" Placeholder="Some Text..." OnKeyUp="OnKeyUp" />
	
    <h3>Input Value: @inputValue </h3>

    @code {
        Input input;

        string inputValue = "";

        private void OnKeyUp()
        {
            inputValue = input.Value;
        }
    }
      

Without @bind-Text attribute you have to handle the OnKeyUp event explicitly and update the inputValue property manually.

Examples with Two-Way Data Binding

• Checkbox

  <CheckBox @bind-Checked="@CheckBoxValue">Check Box</CheckBox>
  <br/>
  <h3>Check box value: @CheckBoxValue </h3>
      
  @code {
         
    public bool CheckBoxValue = true;
      
  }
            

• Combobox

  @using Smart.Blazor.Demos.Data
  @inject WeatherForecastService ForecastService
  
  @if (forecasts == null)
  {
    <p><em>Loading...</em></p>
  }
  else
  {
    <h2>Forecasts Summary</h2>
    <ComboBox @bind-SelectedIndexes="@SelectedIndex">
      @foreach (var forecast in forecasts)
      {
        <ListItem Label="@forecast.Summary.Trim()"></ListItem>
      }
      </ComboBox>
    <h3>  The Selected index is: @SelectedIndex[0]  </h3>
  }
  @code {
    private WeatherForecast[] forecasts;
  
    int[] SelectedIndex = new int[]{ 1 };
  
    protected override async Task OnInitializedAsync()
    {
      forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
  }
            

• DropDownList

  <DropDownList  @bind-SelectedValues="@DropDownListBoxValue" DataSource="Items" />
  <br/>
  <h3>DropDownList selected value: @DropDownListBoxValue[0] </h3>
  
  @code {
      public string[] Items = new[]
      {
          "One",
          "Two",
          "Three",
          "Four"
      };
  
      public string[] DropDownListBoxValue=new string[] { "Three" };
  }
            

• NumberInput

  <NumberInput @bind-Value=@inputValue Placeholder="Please Enter a Number" />
  <br/>
  <h3>Enter a number: @inputValue  </h3>
          
  @code {
      string inputValue=  "1233";
  }
            

• TextArea

  <TextArea @bind-Value=@TextAreaValue />
  <br/>
  <h3>Enter new text: @TextAreaValue  </h3>
          
  @code {
      string TextAreaValue =  "Your text";        
  }