@bind-Value:event="oninput" does not work for InputText blazor component?

PrateekArora-1569 15

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?

Ruikai Feng - MSFT 2,526 Microsoft Vendor

Hi,@Prateek Arora,here's the source codes of InputText Component:

public class InputText : InputBase<string?>
{
    /// <summary>
    /// Gets or sets the associated <see cref="ElementReference"/>.
    /// <para>
    /// May be <see langword="null"/> if accessed before the component is rendered.
    /// </para>
    /// </summary>
    [DisallowNull] public ElementReference? Element { get; protected set; }

    /// <inheritdoc />
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        builder.AddAttributeIfNotNullOrEmpty(2, "name", NameAttributeValue);
        builder.AddAttributeIfNotNullOrEmpty(3, "class", CssClass);
        builder.AddAttribute(4, "value", CurrentValueAsString);
        builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        builder.SetUpdatesAttributeName("value");
        builder.AddElementReferenceCapture(6, __inputReference => Element = __inputReference);
        builder.CloseElement();
    }

    /// <inheritdoc />
    protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

part of the source codes of InputBase class:

/// <summary>
/// Gets or sets the value of the input. This should be used with two-way binding.
/// </summary>
/// <example>
/// @bind-Value="model.PropertyName"
/// </example>
[Parameter]
public TValue? Value { get; set; }
/// <summary>
/// Gets or sets a callback that updates the bound value.
/// </summary>
[Parameter] public EventCallback<TValue> ValueChanged { get; set; }
/// <summary>
/// Gets or sets an expression that identifies the bound value.
/// </summary>
[Parameter] public Expression<Func<TValue>>? ValueExpression { get; set; }

@bind-Value:event allow you override EventCallback<TValue> ValueChanged defined in parent class

@bind-Value:event="OnValueChanged"
....
public EventCallback<string> OnValueChanged { get; set; }

You got the error Object of type 'Microsoft.AspNetCore.Components.ChangeEventArgs' cannot be converted to type 'System.String'.

due to

EventCallback<ChangeEventArgs>  oninput

PrateekArora-1569 15 Reputation points

2023-12-23T12:29:05.39+00:00
@Ruikai Feng - MSFT So, are you saying I can't simply use this? And only onchange is allowed for InputText?

<InputText @bind-Value:event="oninput" />

Ruikai Feng - MSFT 2,526 Microsoft Vendor

Hi,@Prateek Arora,You could try the codes below:

<InputText @bind-Value="customerRecord.CustomerName" @oninput="OnInput">

@code{
    ............
    
    
    private void OnInput(ChangeEventArgs e)
    {
    
    }
}

John Rogers 0 Reputation points

2024-04-11T22:00:15.28+00:00

What is the "best practice"....

I find it odd that the the "regular" input element allows binding to the oninput event, yet the blazor component requires a manual eventhandler and manual data-update... Seems like a step back... or at least it seems to suggest using the html input tag....

Thoughts?
Bruce (SqlWork.com) 56,526 Reputation points

2024-04-18T21:31:44.4433333+00:00

the blazor components are abstracts of the underlying html components. they have a defined behavior and do not define what html they generate. They also simplify the binding.

if you want to use browser events, then you should use native browser elements.