我希望在 blazor editform 中有一个 InputSelect ,它绑定到模型值,并且还有一个 onchange 事件,该事件根据新值更改模型中的其他属性。
绑定到 @bind-Value 和 @onchange 不起作用(我猜测是因为绑定值同时使用输入的值和值更改属性。
我可以绑定到 oninput,但我想知道是否有更好的方法来做到这一点。
<InputSelect id="inputPeriod" name="inputPeriod" class="form-control" @bind-Value="model.Period" @oninput="periodChanged">
protected void periodChanged(ChangeEventArgs e)
{}
我可以像这样绑定到 oninput
但理想情况下,我想在模型属性更新后绑定到 @onchange 事件,或者知道最佳实践是什么。如果不使用绑定值,模型验证将无法工作,因此我能想到的唯一替代方法是让更改事件在模型的属性内部工作,但这似乎是错误的
这是一个愚蠢的示例,您必须输入您的名字,然后选择您的宠物,结果是以您亲爱的宠物的名字重命名您。该示例描述了当字段发生变化时如何操作模型:
<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; }
}
}
我能想到的唯一替代方法是让更改事件在我的模型中的属性内工作,但这似乎是错误的
一点也不...
模型不需要实现 INotifyPropertyChanged,但如果需要,您可以轻松地将其连接到 EditContext。然后,您无需使用内置的 Input* 组件 - 您可以绑定到常规 HTML 元素,并且仍然可以获得修改通知。这为 UI 的呈现方式提供了更大的灵活性,但代价是模型类中的复杂性和样板代码变得更加复杂。
希望这可以帮助...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)