Установить значение для модели при смене флажка

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

Когда я нажимаю флажок, я хочу установить значениеof Model.EmployeeList [i] .IsChanged to true.

Answer 1

Чтобы решить эту проблему, вы должны знать, что идентификатор должен быть уникальным для любого элемента.По этой причине вы получите разные идентификаторы для скрытых.Я не помню, как составляется MVC Id для повторяющихся элементов, но это не проблема: вы должны получить Id с помощью HTML helper @ Html.Id (Model.EmployeeList [i] .IsChanged). Таким образом, вы можете связать HiddenИдентификатор для атрибута флажка следующим образом:

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

Затем вы можете привязать событие onchange в Javascript, проверить привязку «data-updatedHidden» измененного флажка, получитьэлемент по id и обновить его val.Например, в каждой строке вы получите что-то вроде:

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

Затем вы можете использовать javascript для подписки на помеченное событие флажка, получить его атрибут data-changehidden и потому что это идентификатор скрытого, который являетсяРендеринг в строке, вы можете использовать его для достижения конкретного скрытого и обновления его значения.Для простоты, пример с jQuery:

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