Question

我有一个页面，其中包含每个用户的用户名和复选框。它看起来像矩阵。

现在，当更改其中一个复选框时，我想更改用户的值，因此我知道更改了哪个用户。这样，我可以检查数据库中需要更新的用户。

我的页面代码如下：

@for(var i = 0; i < Model.EmployeeList.Count; i++)
{
    <input type="hidden" asp-for="EmployeeList[i].Id"/>
    <tr>
    <th scope="row">@Model.EmployeeList[i].Name @Model.EmployeeList[i].Surname</th>
<th scope="row">@Model.EmployeeList[i].Location</th>
@for (var j = 0; j < Model.EmployeeList[i].SelectedSkillList.Count; j++)
{
<td>

    @*<div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="customCheck1">
        <label class="custom-control-label" for="customCheck1">Check</label>
    </div>*@
        <label class="label">
            <input asp-for="EmployeeList[i].SelectedSkillList[j].IsSelected" type="checkbox" class="label__checkbox"/>
            <span class="label__text">
                <span class="label__check">
                    <i class="fa fa-check icon"></i>
                </span>
            </span>
        </label>

    @*<input asp-for="EmployeeList[i].SelectedSkillList[j].IsSelected" type="checkbox" />*@
    @*If this is not included, prefix becomes null*@
    @Html.HiddenFor(x => Model.EmployeeList[i].SelectedSkillList[j].Prefix)
    @Html.HiddenFor(x => Model.EmployeeList[i].IsChanged)
</td>
}
</tr>
}

当我单击复选框时，我想将Model.EmployeeList [i] .IsChanged的值设置为true。

Answer 1

要解决此问题，您应该知道ID对于任何元素都应该是唯一的。因此，您将获得不同的隐藏ID。我不记得重复元素的MVC ID是如何组成的，但这不是问题：您应该使用HTML帮助程序@ Html.Id（Model.EmployeeList [i] .IsChanged）获取ID，因此，您可以绑定隐藏的以此方式将其标识为复选框属性：

<input asp-for=" .. ... " data-changedHidden="@Html.Id(Model.EmployeeList[i].IsChanged)"

然后，您可以在Javascript中绑定onchange事件，检查已更改复选框的绑定“ data-changedHidden”，通过id获取元素并刷新其val。例如，在foreach行中，您将得到类似的内容：

<input type="checkbox" data-changedHidden="IsChanged-3" class="label__checkbox"... />

然后，您可以使用javascript订阅onchanged复选框事件，获取其data-changedhidden属性，并且由于它是在行中呈现的隐藏对象的ID，因此您可以使用它来达到特定的隐藏对象并更新其值。为了方便起见，使用jQuery的示例：

$( function(){ 
    $(".label__checkbox").on("change",
        function(){ 
            var t=$(this); 
            var hdnIsChangedId=t.data("changedHidden"); 
            var hidden=$("#"+hdnIsChangedId); 
            hidden.val("changed!!"); 
        }); 
    } );
  );

复选框更改时在模型上设置值

1 个答案: