CODEWITHSUNDEEP
asp.net-coreblazorblazor-server-side
dozieogbo
dozieogbo

Reputation: 563

How to use bind-value and bind-value:event on a custom component Blazor

In Blazor, while using inputs,

<input bind-value="@InputValue" bind-value:event="oninput"/>

This creates a 2 way binding that updates with the oninput event.

I would like to recreate this on a custom component with custom events and custom properties.

CustomInput.razor

<input value="@Value" oninput="@OnInput" />

@code {
   [Parameter]
   public string Value { get; set; }

   [Parameter]
   public EventCallback<ChangeEventArgs> OnInput { get; set; }
}

I want to be able to use it this way.

<CustomInput bind-Value="@InputValue" bind-Value:event="OnInput" />

Is this possible on Blazor right now? If yes, how do I achieve it?

EDIT:

For anyone that comes across this, it seems to work as is. I am not sure if the feature was added after the question was asked or if it always worked that way but the code above should work as is. Conventionally, your event name should be ValueChanged but if you have a reason to use another event name like in inputs where you have OnInput and OnChange, then you can use this format.

Upvotes: 36

Views: 78435

Answers (3)

Major
Major

Reputation: 6658

Yes Blazor supports 2 way binding. It works with EventCallbacks (which must be triggered) and default uses name convention based Events e.g.: {PropertyName}Changed. Also you can override this naming convention @bind-{Prop}:event="{EventCallbackName}". In your code example you are just overriding this default Event name, never triggering it.

In your code you have 2 issues:

  1. You MUST define bind starting with @ and inside "" it is not necessary to use @ correct for is: @bind-{PropertyName}="{variable}".

Change your code to: <CustomInput @bind-value="InputValue" @bind-value:event="OnInput" />

  1. Already wrote that these events MUST be triggered when actual value has changed. Update your code to:
private string _value;
[Parameter] public string Value 
{ 
   get => _value; 
   set
   {
      if(value == _value)
        return;

      _value = value;  
      if(OnInput.HasDelegate)
      {
         OnInput.InvokeAsync(_value);
      }  
   }
}

Upvotes: 20

Seyed Reza Dadrezaei
Seyed Reza Dadrezaei

Reputation: 583

Simply use @bind attribute in your input!

 <input @bind="myProperty" />
 
 @code{
     private string? myProperty; 
}

reference: ASP.NET Core Blazor data binding

Upvotes: 0

agua from mars
agua from mars

Reputation: 17404

The event parameter MUST be called ValueChanged

<input value="@Value" @oninput="ValueChanged" />

@code {
   [Parameter]
   public string Value { get; set; }

   [Parameter]
   public EventCallback<ChangeEventArgs> ValueChanged { get; set; }
}

Read Binding with component parameters

Upvotes: 17

Related Questions