blazor editform更改事件 [英] blazor editform change events

问题描述

我希望在blazor editform中具有一个与模型值绑定的InputSelect，并且还希望具有一个onchange事件，该事件会基于新值更改模型中的其他属性.

I want to have an InputSelect in a blazor editform that is bound to a model value and also has an onchange event that changes other properties in the model based on the new value.

同时绑定到@ bind-Value和@onchange都无效(我想是因为绑定值同时使用了输入的值和值更改的属性.

binding to both @bind-Value and @onchange does not work (im guessing because bind value uses both the value and the value changed properties of the input.

我可以绑定到oninput，但是我想知道是否有更好的方法可以做到这一点.

I can bind to oninput, but I would like to know if there is a better way to do this.

<InputSelect id="inputPeriod" name="inputPeriod" class="form-control" @bind-Value="model.Period" @oninput="periodChanged">


protected void periodChanged(ChangeEventArgs e)
        {}

我可以这样绑定到oninput

I can bind to oninput like this

，但理想情况下，我想在更新模型属性后绑定到@onchange事件，或者知道这样做的最佳实践是什么.不使用绑定值，模型验证将无法进行，因此我能想到的唯一替代方法是让更改事件在模型的属性内运行，但这似乎是错误的

but ideally I would like to bind to the @onchange event after the model property has been updated, or know what the best practice is for this. without using the bind-value the model validation will not work so the only alternative way I can think of is to have the change events working inside the properties in my model, but that seems wrong

推荐答案

这是一个愚蠢的示例，您必须在其中输入名称，然后选择您的宠物，其结果是将您重命名为您的亲爱的宠物.该示例描述了当字段更改时如何操作模型:

Here's a silly sample in which you have to enter your name, and then select your pet, the result of which is renaming you after your dear pet. The sample describes how you can manipulate your model when a field changes:

<EditForm EditContext="@EditContext">
<DataAnnotationsValidator />

<div class="form-group">
    <label for="name">Enter your Name: </label>
    <InputText Id="name" Class="form-control" @bind-Value="@person.Name"></InputText>
    <ValidationMessage For="@(() => person.Name)" />

</div>
<div class="form-group">
    <label for="body">Select your pet: </label>
    <InputSelect @bind-Value="@person.Pet">
        <option value="Cat">Cat</option>
        <option value="Dog">Dog</option>
        <option value="Horse">Horse</option>
        <option value="Lion">Lion</option>
    </InputSelect>
     <ValidationMessage For="@(() => person.Pet)" />
</div>

<p>
    <button type="submit">Submit</button>
</p>
</EditForm>


 @code
 {
    private EditContext EditContext;
    private Person person = new Person();


    protected override void OnInitialized()
    {
        EditContext = new EditContext(person);
        EditContext.OnFieldChanged += EditContext_OnFieldChanged;

        base.OnInitialized();
    }

    // Note: The OnFieldChanged event is raised for each field in the model
    private void EditContext_OnFieldChanged(object sender, FieldChangedEventArgs e)
    {
        if (e.FieldIdentifier.FieldName == "Pet")
        {

            person.Name = person.Pet;

        }
    }


    public class Person
    {
        public string ID { get; set; }
        public string Name { get; set; }
        public string Pet { get; set; }
    }
}

我能想到的唯一替代方法是让更改事件在模型的属性中运行，但这似乎是错误的

the only alternative way I can think of is to have the change events working inside the properties in my model, but that seems wrong

一点也不...

不需要模型来实现INotifyPropertyChanged，但是如果这样做，则可以轻松地将其连接到EditContext.然后，您无需使用内置的Input *组件-您可以绑定到常规HTML元素，并且仍然会收到修改通知.这样可以在呈现UI方面提供更大的灵活性，但会增加模型类的复杂性和样板.

There's no requirement for models to implement INotifyPropertyChanged, but if they do, you can easily wire that up to the EditContext. Then you have no need to use the built-in Input* components - you can instead bind to regular HTML elements and still get modification notifications. This provides more flexibility in how the UI is rendered, at the cost of more complexity and boilerplate in your model classes.

希望这对您有帮助...

Hope this helps...

这篇关于blazor editform更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！