Blazor 绑定值：输入事件

Question

I am trying to trigger the model validation in Blazor by using EditForm .

For some reason, the oninput event doesn't seem to be called if using the InputText , but it works using a simple input element.

Have I missed something?

Here is an HTML sample:

<EditForm Model="@Model" OnValidSubmit="@OnValidSubmit" id="authorize">
    <h1 class="mb-3">
       <span class="d-block">Authorize</span>
    </h1>
    <DataAnnotationsValidator />
    <div class="form-group">
        <label class="sr-only" for="AuthorizeUsername">Username</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-user"></i></div>
            </div>
            <InputText type="text" class="form-control" id="AuthorizeUsername" placeholder="Username" @bind-value="@Model.Username" @bind-value:event="oninput" />
        </div>
    </div>
    <div class="form-group">
        <label class="sr-only" for="AuthorizePassword">Password</label>
        <div class="input-group mb-2">
            <div class="input-group-prepend">
                <div class="input-group-text"><i class="fas fa-asterisk"></i></div>
            </div>
            <InputText type="password" class="form-control" id="AuthorizePassword" placeholder="Password" @bind-value="@Model.Password" @bind-value:event="oninput" />
        </div>
    </div>
    <div class="form-group">
        <ValidationSummary />
        <button type="submit" class="btn btn-outline-primary"><i class="fas fa-sign-in-alt mr-1"></i> Login</button>
    </div>
</EditForm>

Answer 1

If you need this for validation, see the answer for this:

How to make an EditForm Input that binds using oninput rather than onchange

Original Answer

TLDR: Blazor Input components do not support this out of the box. You need to roll your own by extending InputBase, and your Razor markup for your new component will put the input event binding directly on the input element.

It would be nice if this came as an out-of-the-box option, but at least there is a way to do it that isn't terrible. Be aware though that this quickly gets more complicated for more complicated input types. If you want your own InputBase<DateTime> derived class, for example, you need to be prepared to correctly handle DateTime formatting in the binding events.

The markup for your own version of InputText , lets call it MyInputTextCode that extends InputBase<string> would look something exactly like this:

@inherits MyInputTextCode;

<input type="text" id="@Id" class="@Class" @bind-value="CurrentValueAsString" @bind-value:event="oninput" />

where MyInputTextCode is the class name of your implementation of InputBase<string>

The usage would essentially be the same as InputText , but you would instead use the file name (witout the extension) of your .razor markup instead of InputText .

UPDATE 4-30-2020 I no longer recommend deriving from InputBase in your code-behind, instead you can simply @inherits an existing form component class such as InputText and override the markup in your .razor file. If this isn't clear please comment on this answer and I'll elaborate further in this update.

Answer 2

It works on a simple input because you are binding to the html attribute "value".

InputText is a C# class. The property name you need to bind to is Value with a capital V.

Change all @bind-value occurrences to @bind-Value and it should work.

Answer 3

As a workaround, I found that changing from Blazor components such as InputTextArea to plain HTML textarea tag and leveraging the binding on them can fix the problem:

<textarea @bind="@ViewModel.TargetProperty" @bind:event="oninput"/>

or for input tags:

<input type="email" @bind="@ViewModel.Email" @bind:event="oninput"/>

Works in .Net 5 Blazor WASM at least.

Answer 4

I found this answer and a workaround:

https://github.com/dotnet/aspnetcore/issues/12657

Basically @bind-Value:event="oninput" is not supported on <InputText> but you can easily derive a new control from 'InputText' which does update on input.

Quoted from the original github post for reference:

Create MyInputText.razor containing:

@inherits Microsoft.AspNetCore.Components.Forms.InputText
<input @attributes="@AdditionalAttributes" class="@CssClass" @bind="@CurrentValueAsString" @bind:event="oninput" />

Now when you use <MyInputText @bind-Value="@someval" /> it will behave just like InputText except it updates on each keystroke.

Answer 5

A similar technique as Amir Mahdi said in another answer, I just wanted to point out that this is explained on the official docs also now for As.netcore 6.0 and 7.0. https://learn.microsoft.com/en-us/as.net/core/blazor/forms-and-input-components?view=as.netcore-6.0

See the heading ' InputText based on the input event '.

Here is how they suggest to use it, I however see the value of also being in charge of which client side event will trigger update (usually it will be 'oninput', but maybe you want to use another client side event?)

Just define a new reusable component like CustomInputText.razor with the following content:

@inherits InputText

    <input @attributes="AdditionalAttributes"
           class="@CssClass"
           @bind="CurrentValueAsString"
           @bind:event="@UpdateSourceTrigger" />
    
    
    @code {
        [Parameter]
        public string UpdateSourceTrigger { get; set; } = "oninput";
     }

To use it inside a razor view just use it like a regular InputText field, the only thing that is adjusted is that it automatically binds to the 'oninput' client side event. You can adjust which event also is bound to do an update. This can both be positive sine you see your changes on key stroke and negative in case updating the backend from the UI is slow, as every keyboard stroke will write data back to the bound property, possibly trigger additional processing too if you have bound it to an 'autosave' feature or similar.

I used the name UpdateSourceTrigger here for the property trigger event - as this reminds me a bit how we adjusted things in WPF when to write back to two way bound fields !