无法在 .NET 6 中的下拉列表更改上绑定复选框

Question

我正在使用.NET 6，我想绑定下拉列表的复选框

onchange

事件。在下拉

onchange

事件中，不执行 for 循环。当我更改下拉值时，调用 Javascript 方法（该方法调用操作方法），我获取类对象中的数据，但 for 循环不在视图内执行，并且我的复选框未绑定。

查看模型类：

public class UserRoleViewModel
{
    [Display(Name = "User")]
    public int? EmployeesEmpId { get; set; }
    [NotMapped]
    public List<RoleAddViewModel> lstRoleAddViewModels { get; set; }
}

public class RoleAddViewModel
{
    [Display(Name = "Role")]
    public int RoleId { get; set; }
    public string RoleName { get; set; } = string.Empty;
    public bool Checked { get; set; }
}

控制器代码：

[HttpGet]
public IActionResult AddUserRole(int UserId = 0)
{
    UserRoleViewModel userRoleviewmodel = new UserRoleViewModel();

    if (UserId == 0)
    {
        var users = _employeeRepository.GetUsers();
        ViewBag.Users = users;
        userRoleviewmodel.lstRoleAddViewModels = _employeeRepository.UserRoles();
    }
    else if (UserId > 0)
    {
        userRoleviewmodel = _employeeRepository.GetUserRole(UserId);
    }

    return View(userRoleviewmodel);
}

查看标记：

@model EmpTest.ViewModel.UserRoleViewModel

@{
    ViewData["Title"] = "AddUserRole";
}

<h1>AddUserRole</h1>

<h4>UserRoleViewModel</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="AddUserRole">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="EmployeesEmpId" class="control-label"></label>
                @* <input asp-for="UserId" class="form-control" /> *@
                <select asp-for="EmployeesEmpId" class="form-control" asp-items="@(new SelectList(ViewBag.Users, "EmpId", "Name"))">
                    <option value="">Select</option>
                </select>
                <span asp-validation-for="EmployeesEmpId" class="text-danger"></span>
            </div>
            <div>
                @for (var i = 0; i <= Model.lstRoleAddViewModels.Count - 1; i++)
                {
                    <input type="checkbox" asp-for="@Model.lstRoleAddViewModels[i].Checked" />
                    <label asp-for="@Model.lstRoleAddViewModels[i].Checked">@Model.lstRoleAddViewModels[i].RoleName</label>
                    <input type="hidden" asp-for="@Model.lstRoleAddViewModels[i].RoleId" />
                    <input type="hidden" asp-for="@Model.lstRoleAddViewModels[i].RoleName" />
                    <br />
                }
            </div>
            <div class="form-group">
                <input type="submit" value="Add Role" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script>
        $('#EmployeesEmpId').change(function () {
            debugger;
            var url = '@Url.Content("~/")' + "Employee/AddUserRole";
            var source = '#EmployeesEmpId';
            $.getJSON(url, { UserId: $(source).val() }, function (data) {
                // var items = '';

            });
        });

    </script>
}

请帮忙

Answer 1

下面是一个建议：创建一个局部视图来显示角色，您可以参考。

_roleparttailView：

@model EmpTest.ViewModel.UserRoleViewModel
<div>
    @for (var i = 0; i <= Model.lstRoleAddViewModels.Count - 1; i++)
    {
        <input type="checkbox" asp-for="@Model.lstRoleAddViewModels[i].Checked" />
        <label asp-for="@Model.lstRoleAddViewModels[i].Checked">@Model.lstRoleAddViewModels[i].RoleName</label>
        <input type="hidden" asp-for="@Model.lstRoleAddViewModels[i].RoleId" />
        <input type="hidden" asp-for="@Model.lstRoleAddViewModels[i].RoleName" />
        <br />
    }
</div>

在控制器中创建一个操作来调用 _roleparttailView：

[HttpPost]
public IActionResult Update(int UserId)
{
    UserRoleViewModel userRoleviewmodel = new UserRoleViewModel();

if (UserId == 0)
{
    var users = _employeeRepository.GetUsers();
    ViewBag.Users = users;
    userRoleviewmodel.lstRoleAddViewModels = _employeeRepository.UserRoles();
}
else if (UserId > 0)
{
    userRoleviewmodel = _employeeRepository.GetUserRole(UserId);
    return PartialView("_rolepartialView", userRoleviewmodel);
}

return View(userRoleviewmodel);
   
}

然后在视图中使用ajax显示角色，添加

id="divToUpdated"

:

 <div id="divToUpdated">
     @for (var i = 0; i <= Model.lstRoleAddViewModels.Count - 1; i++)
     {
         <input type="checkbox" asp-for="@Model.lstRoleAddViewModels[i].Checked" />
         <label asp-for="@Model.lstRoleAddViewModels[i].Checked">@Model.lstRoleAddViewModels[i].RoleName</label>
         <input type="hidden" asp-for="@Model.lstRoleAddViewModels[i].RoleId" />
         <input type="hidden" asp-for="@Model.lstRoleAddViewModels[i].RoleName" />
         <br />
     }
 </div>
...
<script>
    $('#EmployeesEmpId').change(function () {
        debugger;
        var url = '@Url.Content("~/")' + "Home/Update";
        var source = '#EmployeesEmpId';
        // $.getJSON(url, { UserId: $(source).val() }, function (data) {
        //     // var items = '';

        // });
        $.ajax({
            type: 'POST',
            url: '@Url.Content("~/")' + "Home/Update",

            data: { UserId: $(source).val() },
            success: function (data) {
                $("#divToUpdated").html(data);
            }

        });
    });

</script>