Blazor，editform 中的模型更改事件

Question

我有一个表，其中的控件绑定到模型，当其中一些控件的值发生变化时，我需要调用一个函数。（重新计算总额和税金）

该表处于编辑表单中，并且控件绑定到模型，因此我无法在控件中使用onchange事件。

我尝试过的：

• 使用 SetParametersAsync 或 OnParametersSetAsync 函数，但它仅在第一次设置模型时触发，而不是像我预期的那样在模型中属性的每次更改时触发。

• 尝试使用模型的 set 访问器，但是这样做并在调试中运行浏览器崩溃，并且在我的调试控制台中出现没有上下文的访问冲突错误：

  私人订单 order { 获取 { 返回订单; } 设置 { 顺序 = 值; 计算总计(); } }

程序“[11992] iisexpress.exe：Program Trace”已退​​出，代码为 0 (0x0)。程序“[11992] iisexpress.exe”已退出，代码为-1073741819 (0xc0000005)“访问冲突”。

有人有什么想法吗？

Answer 1

你可以这样做：

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

    <div class="form-group">
        <label for="amount">Amount: </label>
        <InputNumber Id="amount" Class="form-control" @bind- 
                                         Value="@Model.Amount"> 
        </InputNumber>
             <ValidationMessage For="@(() => Model.Amount)" />

    </div>
    <div class="form-group">
        <label for="items">Items: </label>
    <InputNumber Id="items" Class="form-control" @bind-Value="@Model.Items"> 
    </InputNumber>
        <ValidationMessage For="@(() => Model.Items)" />
    </div>

</EditForm>


@code
{
    private EditContext EditContext;
    private Order Model = new Order();


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

        base.OnInitialized();
    }

    private void EditContext_OnFieldChanged(object sender, 
                                                      FieldChangedEventArgs e)
    {
        Console.WriteLine(e.FieldIdentifier.FieldName);

         if (EditContext.Validate())
         {
            // You can validate the EditContext here, and do necessary 
            calculation 
         }

    }

    }

希望这可以帮助...

更新：

我以前从未这样做过，但让我建议如下：按如下方式定义您的子组件：

ChildComponent.razor

<div class="form-group">
<label for="item">Item: </label>

 <select id="Item" class="form-control-sm" @bind="@Model.Item">
    @foreach (var item in items)
    {
        <option value="@item">@item</option>

    }
</select>

<ValidationMessage For="@(() => Model.Item)" />

</div>

@code
{

   [Parameter]
   public Order Model { get; set; }
}

在父组件的 EditForm 中插入以下内容

现在，您可以在子组件中执行各种操作，就好像其代码位于 EditForm 中一样。

注意：我希望这项工作...以前从未做过，当然我没有执行这段代码...

注意：您必须在此处提供项目列表，可以将其作为组件参数从父组件传递，也可以在子组件中创建项目列表，从数据库检索等。