UI不保存Blazor中所选项目的复选框值

如何解决UI不保存Blazor中所选项目的复选框值

我有一个MatBlazor表，该表具有数据源（项）和与表中每一行关联的复选框。如果我使用@ bind-Value，则不会有任何问题，并且所有工作均按设计进行。但是我要向按钮添加验证，该按钮取决于是否启用了“选中”列表中的任何项目。

因此，我开始使用ValueChanged属性，该属性是一个EventCallback，没有运气用所选值更新UI。

我尝试调用StateHasChanged（）甚至InvokeAsync（），但UI不会更新。

std::array

这是方法

  <MatTable Items="@Projects" class="mat-elevation-z5 create-build-list" PageSize="50" ShowPaging="false" FilterByColumnName="ProjectName" Striped="true">
                        <MatTableHeader>
                            <th>Name</th>
                            <th>Key</th>
                            <th>Type</th>
                            <th>Include</th>
                        </MatTableHeader>
                        <MatTableRow>
                            <td>@context.ProjectName</td>
                            <td>@context.Key</td>
                            <td>@context.ProjectType</td>
                            <td><MatCheckBox Label="Add To Build" ValueChanged="@((bool val) => CheckBoxValue(val,context))" ValueExpression="@(() => context.IsChecked)"></MatCheckBox></td>
                        </MatTableRow>
                    </MatTable>

我是否缺少某些东西，因为它调用了该函数但没有更新UI。

解决方法

我不确定这是否是 Blazor/MatBlazor 的预期行为，但我遇到了同样的问题，我找到的唯一解决方案是首先使用“Value”而不是“ValueExpression”，因为这不是设置为我正确设置 UI，然后直接在“ValueChanged”回调中设置“上下文”中的字段值，这导致 UI 更新为“上下文”中设置的值。

因此，如果您将 Razor 代码更改为：-

<MatTable Items="@Projects" class="mat-elevation-z5 create-build-list" PageSize="50" ShowPaging="false" FilterByColumnName="ProjectName" Striped="true">
<MatTableHeader>
    <th>Name</th>
    <th>Key</th>
    <th>Type</th>
    <th>Include</th>
</MatTableHeader>
<MatTableRow>
    <td>@context.ProjectName</td>
    <td>@context.Key</td>
    <td>@context.ProjectType</td>
    <td><MatCheckbox Label="Add To Build" Value="@context.IsChecked" ValueChanged="@((bool val) => CheckBoxValue(val,context))"></MatCheckbox></td>
</MatTableRow>

然后把回调代码改成这样：-

void CheckBoxValue(bool val,MyProjectKey context)
{
    // This line updates the UI
    context.IsChecked = val;
    
    foreach (var p in Projects)
    {
        if (p.Key == context.Key)
        {
            p.IsChecked = true;
        }
    };
    
    // I'll do more stuff here.
}

希望这应该有效...

我遇到的另一个问题是与实体框架有关，因此您可能会也可能不会遇到与我相同的问题，具体取决于您在回调中执行的其他操作。

无论好坏，我在 ValueChanged 回调中调用了数据库插入/更新。问题是，实体框架正在“跟踪”表列表中的所有模型，并且更新 Blazor 的“上下文”（不是 DbContext）也在修改被跟踪的实体！

但是，由于它只是用于显示表行/列的模型列表，因此我在 DbContext 调用中添加了“AsNoTracking”。如果我不这样做，下一次我在任何地方调用“SaveChanges”时，我都会收到关于 EF 尝试保存值的错误（有问题的 DbSet 只是链接到数据库中的一个视图，该视图显然是只读的）！ ;-)

编辑

抱歉，忘记提及这是在 Blazor 服务器项目中，因此如果您使用 Blazor 客户端项目，EF 跟踪可能不会影响您...