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

Question

我有一个MatBlazor表，它有一个数据源(Items(和与表中每一行关联的复选框。如果我使用@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时，我缺少了什么吗。

Answer 1

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

所以，如果你把你的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跟踪可能不会影响你。。。