1

我有一个 MatBlazor 表，它有一个数据源（项目）和与表中每一行关联的复选框。如果我使用@bind-Value，我没有任何问题，一切都按设计工作。但是我正在向一个按钮添加验证，该按钮取决于列表中的任何项目是否已“选中”以启用它。

所以，我转而使用 ValueChanged 属性，它是一个 EventCallback 并且没有运气用所选值更新 UI。

我试过调用 StateHasChanged() 甚至 InvokeAsync()，但 UI 没有更新。

  <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>

这是方法

   void CheckBoxValue(bool e, MyProjectKey key)
{
    foreach(var p in Projects)
    {
        if(p.Key == key.Key)
        {
            p.IsChecked = true;
        }
    };
//-- I'll do more stuff here.
}

当它调用该函数但不更新 UI 时，我是否缺少某些东西。

4

1 回答 1

0

我不确定这是否是 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 跟踪可能不会影响您...

于 2021-01-22T15:39:25.860 回答