Microsoft.AspNetCore.Components.Forms.InputDate 需要 EditContext 类型的级联参数

Question

我正在开发 ASP.NET 5.0 blazor web assembly 应用程序。我需要在仪表板屏幕中有一个日期选择器 select 显示详细信息的日期。

这是我的代码：

<input class="input" type="month" id="staffPicker" name="staffPicker"
        aria-label="Staff Sales Detail Period"
        @bind="StaffSaleDetailsPeriod"
        max="@DateTime.Now.ToString("yyyy-MM")">

我需要在更改日期时触发 API 调用。所以我尝试在上面的代码中添加 @onchange 如下所示。

<input class="input" type="month" id="staffPicker" name="staffPicker"
        aria-label="Staff Sales Detail Period"
        @bind="StaffSaleDetailsPeriod"
        max="@DateTime.Now.ToString("yyyy-MM")"
        @onchange="OnStaffSalePeriodChange">

但这会产生新的错误，如下所示：

The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.

所以我尝试用<InputDate>替换上面的input元素，如下所示，

<InputDate class="input is-small"
        ValueExpression="() => StaffSaleDetailsPeriod"
        Value="StaffSaleDetailsPeriod"
        ValueChanged="(DateTime staffSalesPeriod) => OnStaffSalePeriodChange()"
        max="@DateTime.Now.ToString("yyyy-MM")"/>

这会产生运行时错误，如下所示：

Microsoft.AspNetCore.Components.Forms.InputDate1[System.DateTime] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputDate1[[System.DateTime, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm

缺少什么或这个 <InputDate> 不能与 EditForm 一起使用？有什么解决方法吗？

Answer 1

<input class="input" type="month" id="staffPicker" name="staffPicker"
        aria-label="Staff Sales Detail Period"
        @bind="StaffSaleDetailsPeriod"
        max="@DateTime.Now.ToString("yyyy-MM")"
        @onchange="OnStaffSalePeriodChange">

当您使用 @bind 编译器指令时，编译器会在幕后创建一些代码，其结果就像您执行了这样的操作一样：

<input class="input" type="month" id="staffPicker" name="staffPicker"
            aria-label="Staff Sales Detail Period"
            value="StaffSaleDetailsPeriod"
            max="@DateTime.Now.ToString("yyyy-MM")"
            @onchange="@((args) => OnStaffSalePeriodChange=args.Value.ToString())">

因此，如果您使用@bind，则不能使用@onchange 指令，但您可以执行我上面所做的。

关于第二个问题：InputDate 组件必须嵌入到 EditForm 中，其 Model 属性或 EditContext 具有必要的值

Microsoft.AspNetCore.Components.Forms.InputDate 需要 EditContext 类型的级联参数

Microsoft.AspNetCore.Components.Forms.InputDate requires a cascading parameter of type EditContext

asp.net-core

asp.net5

blazor

blazor-webassembly