Question

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

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

我尝试过的事情：

使用SetParametersAsync或OnParametersSetAsync函数，但是它仅在首次设置模型时触发，而不是在我期望的模型属性每次更改时触发。
试图使用模型的集合访问器，但是这样做并在调试器中运行时，浏览器崩溃，并且在调试控制台中，我收到一个没有上下文的访问冲突错误：

私人订单 { 得到{退货订单； } 设置{ 顺序=值； CalculateTotals（）; } }

程序“ [11992] iisexpress.exe：程序跟踪”已退出，代码为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中一样。

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

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

Blazor，有关editform中的模型更改的事件

1 个答案:

ChildComponent.razor