Blazor复选框onchange事件（带参数）

以下代码适用于我：

@if (data == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <button class="btn btn-primary" @onclick="Save">Save all changes</button>

    <table class="table">
        <thead>
            <tr>
                <th>Concern ID</th>
                <th>CDC</th>
                <th>Context</th>
                <th>Reporting</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var c in data)
            {
                <tr>
                    <td>@c.ConcernId</td>
                    <td><input type="checkbox" @bind="@c.PassingAllowed" /></td>
                    <td><input type="checkbox" @bind="@c.ContextPassingAllowed" /></td>
                    <td><input type="checkbox" @bind="@c.ReportingPassingAllowed" /></td>
                </tr>
            }
        </tbody>
    </table>
}

@code{
    private ConcernData[] data;  

    protected override async Task OnInitializedAsync()
    {
        await GetData().ConfigureAwait(false);
    }

    private async Task GetData()
    {
        data = await Http.GetFromJsonAsync<ConcernData[]>("ConcernFilter").ConfigureAwait(false);
    }

    private async Task Save()
    {
        await Http.PostAsJsonAsync<ConcernData[]>("ConcernFilter/Update", data).ConfigureAwait(false);
    }

    private async Task Update(int concernId)
    {
        Console.Write(concernId);
    }
}

@if（数据==null）
{
加载

}
其他的
{
保存所有更改
关注ID
疾病控制中心
上下文
报告
@foreach（数据中的var c）
{
@c、 康塞尼
}
}
@代码{
私有ConcernData[]数据；
受保护的重写异步任务OnInitializedAsync（）
{
wait GetData（）.configurewait（false）；
}
专用异步任务GetData（）
{
data=await Http.GetFromJsonAsync（“ConcernFilter”）.ConfigureAwait（false）；
}
专用异步任务保存（）
{
等待Http.PostAsJsonAsync（“ConcernFilter/Update”，data）；
}
专用异步任务更新（int concernId）
{
Console.Write（concernId）；
}
}

但是，这会将所有数据（更改和未更改）发送回服务器，我需要在服务器上确定（或者简单地逐个更新）数据库中需要更新的数据

这感觉不对，因为我通过网络发送了太多的数据，向数据库发送了太多的update语句（在本例中为3）

我可以想出几种方法来解决这个问题：

在客户端上，将更改后的列表与原始列表进行比较，并仅将项目发送到真正需要更新的服务器

找到一种方法，在Blazor中为这样一个列表中的复选框编写如何调用Update方法并将正确的concernId作为参数传递

我正在寻找帮助来完成选项2。

Blazor中没有“魔力”。它无法知道哪些特定行已更新，除非您实际跟踪该行。这只是故事的一半。 您的代码--

Save（）

方法实际上是将完整的

数据

数组发布到服务器

听起来你想要的是解决这两个问题。为此，您需要：

跟踪已更改行并可能将其存储在单独阵列中的逻辑

更新

Save

方法，改用新列表，只向服务器发送更改行中的数据，而不是整个数据集

这里Blazor特有的部分是如何实际检测已更改的行。实际上，您可以通过稍微修改数据模型、引入状态跟踪逻辑并通过属性公开这些逻辑来简化这一过程。以下仅是一个简单的演示：

公共类相关数据
{
内部布尔状态更改{get；private set；}
允许公共交通
{
get=>\u passingAllowed；
设置
{
如果（值！=\u允许通过）
{
_passingAllowed=值；
StateChanged=true；
}
}
}
//其他属性也有类似的更改检测逻辑
}

请注意，这是一个非常幼稚的实现，它不考虑用户再次将数据更改回其原始值的情况。但是，这将使您能够更新

Save

方法，如下所示：

private async Task Save（）
{
wait Http.PostAsJsonAsync（“ConcernFilter/Update”，data.Where（c=>c.StateChanged））.configurewait（false）；
}

---

希望这能有所帮助。

是的，我知道目前我正在发送所有数据（也是未更改的数据），因此我的问题是：-）。谢谢你提到这一点，@KrisvanderMast。对于选项2，您应该使用

@键

功能。我相信这将帮助你确切地了解该做什么以及如何做。如果你想让我在回答中包括这一点，请告诉我：