1

I have seen the use of ValueChanged and ValueExpression in blazor component but does not have any idea wy they are used and what does ValueChanged and ValueEpression do in blazor?

If any body can explain them in simple language, it would be really a great help/

sudip chand
  • 225
  • 6
  • 14
  • check this https://stackoverflow.com/questions/60658450/when-to-use-valuechanged-and-valueexpression-in-blazor – AL.Sharie Feb 28 '21 at 15:18
  • @AL.Sharie what is bound value in the answer can you help me – sudip chand Feb 28 '21 at 15:23
  • [AL.Sharie](https://stackoverflow.com/users/15116229/al-sharie) [suggests](https://stackoverflow.com/a/66410717/3744182), *check this link to know more about data binding https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-5.0&viewFallbackFrom=aspnetcore-3.0#data-binding* – dbc Feb 28 '21 at 17:45

1 Answers1

3

Please check the InputBase Class Properties:

  • ValueChanged: Gets or sets a callback that updates the bound value.

  • ValueExpression: Gets or sets an expression that identifies the bound value.

Generally, Razor components provide data binding features via an HTML element attribute named @bind with a field, property, or Razor expression value, we could use it to bind values to the html elements. If we are not using the bind attribute, we could use the ValueExpression and ValueChanged to update the bound value. Please refer to the following sample:

<EditForm Model="form">
    <p>Current value: @form.MyProperty</p>
    <InputSelect ValueChanged="@((string s) => DoThing(s))"
                 ValueExpression="@(()=> form.MyProperty)">
        <option value="0">0</option>
        <option value="100">100</option>
        <option value="200">200</option>
        <option value="300">300</option>
    </InputSelect> 
</EditForm>

@code {
    MyForm form = new MyForm(); //create an model instance.

    void DoThing(string s) //value changed event.
    {
        form.MyProperty = s; //get the current selected value and assign to the Model.
    }
    //define a class to get/set the dropdownlist selected value.
    public class MyForm
    {
        public string MyProperty { get; set; }
    } 
}

If using the @bind attribute, the sample code as below:

    <p>Current Season: @model.Season</p>
    <InputSelect @bind-Value="model.Season">
        @foreach (var value in Enum.GetValues(typeof(Season)))
        {
            <option>@value</option>
        }
    </InputSelect>

@code { 
    Model model = new Model();    
    class Model
    {
        public Season Season { get; set; }
    }    
    enum Season
    {
        Spring,
        Summer,
        Autumn,
        Winter
    } 
}

The screenshot as below:

enter image description here

Reference:

ASP.NET Core Blazor data binding

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
  • ValueChanged: Gets or sets a callback that updates the bound value. What is this bound value means. Please can you tell me actually I am not getting it that what does it mean – sudip chand Mar 01 '21 at 11:37
  • The bound value is the value of bind to the [Input component](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-5.0#built-in-forms-components), for example, the InputText component will be rendered as the `` element, then, we can use `` to bind value for the InputText component, the `@Value` is used to bound a value to the input element's value attribute, the value is the bound value. – Zhi Lv Mar 02 '21 at 01:13