@bind-Value:event="oninput" does not work for InputText blazor component?
I am new to Blazor and I am having trouble understanding why the oninput
event does not work for the InputText
Blazor component but works for the HTML input
tag. I am also getting errors, which I do not understand. I am using .NET 8 Blazor Server app. Could someone please help me understand what is causing these errors and how I can fix them? Thank you!
Also, please note that there are some code snippets and errors provided that may be helpful in understanding my issue.
Data/customer.cs
using System.ComponentModel.DataAnnotations;
namespace TestApp2.Data
{
public class Customer
{
public int CustomerID { get; set; }
public string CustomerName { get; set; }
public Boolean Archived { get; set; }
}
}
Pages/CustomerView.razor (E.g. 1 - bind:event)
@page "/customer"
@using TestApp2.Data
<h3>Customers</h3>
<EditForm Model="@customerRecord" FormName="CutomerEntry">
<InputText @bind="customerRecord.CustomerName" @bind:event="oninput" />
</EditForm>
@if (!string.IsNullOrWhiteSpace(@customerRecord.CustomerName))
{
<div>
<span> Customer Name: </span> <span>@customerRecord.CustomerName </span>
</div>
}
@code {
public Customer customerRecord { get; set; }
protected override void OnInitialized() => customerRecord ??= new();
}
Console Error:
Error: System.InvalidOperationException: Microsoft.AspNetCore.Components.Forms.InputText requires a value for the 'ValueExpression' parameter. Normally this is provided automatically when using 'bind-Value'.
at Microsoft.AspNetCore.Components.Forms.InputBase`1.SetParametersAsync(ParameterView parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)
So, tried using bind-Value instead but then got a different error
Pages/CustomerView.razor (E.g. 2 - bind-Value:event) - changed the following line from E.g. 1
<EditForm Model="@customerRecord" FormName="CutomerEntry">
<InputText @bind-Value="customerRecord.CustomerName" @bind-Value:event="oninput" />
</EditForm>
Console Error:
Error: System.ArgumentException: Object of type 'Microsoft.AspNetCore.Components.ChangeEventArgs' cannot be converted to type 'System.String'.
at System.RuntimeType.CheckValue(Object& value, Binder binder, CultureInfo culture, BindingFlags invokeAttr)
at System.Reflection.MethodBaseInvoker.InvokeWithOneArg(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
at System.Delegate.DynamicInvokeImpl(Object[] args)
at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsync[T](MulticastDelegate delegate, T arg)
at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs, Boolean waitForQuiescence)
Pages/CustomerView.razor (E.g. 3 - <input>) - changed the following line from E.g. 1
<EditForm Model="@customerRecord" FormName="CutomerEntry">
<input @bind="customerRecord.CustomerName" @bind:event="oninput" />
</EditForm>
No errors here, works fine but it is not InputText component which I guess is more optimized for blazor?