Blazor 绑定值：事件 oninput答案

【问题标题】：Blazor bind-value:event oninputBlazor 绑定值：事件 oninput
【发布时间】：2019-11-08 11:54:42
【问题描述】：

我正在尝试使用 EditForm 在 Blazor 中触发模型验证。

由于某种原因，如果使用InputText，似乎不会调用oninput 事件，但它使用简单的input 元素可以工作。

我错过了什么吗？

这是一个 HTML 示例：

<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>

【问题讨论】：

我发现 this issue 对于您使用的 bind-value:event 格式有一些不同的方法和解决方法。尝试使用bind-value-oninput="@Model.Password"
Studio 不会再接受这个，因为语法已经改变，也许它是一个错误，应该发布在 github 上？
看起来应该可以了。除了InputText之外，我能找到的任何示例都与您的示例完全相同。所以是的，可能值得为它创建一个问题
我遇到了同样的问题，我发现使用 input 元素而不是 InputText 元素对我有用。
在@bind-Value 中使用大写V，因为Value 是C# 类InputText 上的属性名称

标签： c# blazor

【解决方案1】：

如果您需要此验证，请参阅此答案：

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

原答案

TLDR：Blazor 输入组件不支持此功能。您需要通过扩展 InputBase 来实现自己的功能，新组件的 Razor 标记会将输入事件绑定直接放在输入元素上。

如果这是一个开箱即用的选项，那就太好了，但至少有一种方法可以做到这一点并不可怕。请注意，对于更复杂的输入类型，这很快就会变得更加复杂。例如，如果您想要自己的 InputBase<DateTime> 派生类，则需要准备好正确处理绑定事件中的 DateTime 格式。

您自己的InputText 版本的标记，我们称之为MyInputTextCode，扩展InputBase<string> 看起来完全像这样：

@inherits MyInputTextCode;

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

其中MyInputTextCode 是InputBase<string> 实现的类名

用法与InputText 基本相同，但您可以使用.razor 标记的文件名（不带扩展名）而不是InputText。

2020 年 4 月 30 日更新 我不再建议在您的代码隐藏中从 InputBase 派生，而是您可以简单地 @inherits 一个现有的表单组件类，例如 InputText 并覆盖 .razor 文件中的标记。如果不清楚，请对此答案发表评论，我将在此更新中进一步详细说明。

【讨论】：

执行此操作时，我收到以下异常：System.ArgumentException: Object of type 'Microsoft.AspNetCore.Components.ChangeEventArgs' cannot be converted to type 'System.String'.?
@WoIIe 很难说为什么会发生这种情况，如果您想发布一个新问题并将其链接到此处，我很乐意看看。跨度>
@WΩLLE-ˈvɔlə 我不认为bind-Value:event="oninput" 在<InputText> 控件上工作。如果您检查此答案中链接的答案，则创建自己的输入控件非常简单，该控件会在每次击键时更新模型值。
感谢您在回答开头提供的有用链接！

【解决方案2】：

它适用于简单的输入，因为您绑定到 html 属性“值”。

InputText 是一个 C# 类。您需要绑定的属性名称是Value，大写V。

将所有出现的@bind-value 更改为@bind-Value，它应该可以工作。

【讨论】：

【解决方案3】：

作为一种解决方法，我发现将 Blazor 组件（如 InputTextArea）更改为纯 HTML textarea 标记并利用它们上的绑定可以解决问题：

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

或者对于input标签：

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

至少在 .Net 5 Blazor WASM 中工作。

【讨论】：