.NET 6中下拉框change事件无法绑定复选框问题求助

你的核心问题是：页面首次加载时的服务器端for循环不会在前端AJAX请求后重新执行——因为for循环是服务器渲染阶段生成HTML的逻辑，前端JS无法触发服务器重新运行这段代码。你需要通过AJAX获取JSON数据后，手动在前端生成复选框DOM元素来更新页面。

步骤1：修改控制器，支持AJAX请求返回JSON #

在原控制器方法中添加AJAX判断，当请求来自前端异步调用时，直接返回JSON格式的视图模型，而非完整视图：

[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);
    }

    // 判断是否为AJAX请求，返回JSON数据
    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    {
        return Json(userRoleviewmodel);
    }

    return View(userRoleviewmodel);
}

步骤2：给复选框容器添加ID，方便前端操作 #

修改视图中的复选框容器，增加唯一ID用于定位：

<div id="roles-container">
    @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>

步骤3：修改前端JS，动态生成复选框 #

替换原JS代码，实现AJAX请求成功后，根据返回的JSON数据生成对应的复选框元素：

$('#EmployeesEmpId').change(function () {
    var userId = $(this).val();
    var requestUrl = '@Url.Action("AddUserRole", "Employee")';

    // 选择空选项时，重置为初始角色列表
    if (!userId) {
        $.getJSON(requestUrl, { UserId: 0 }, function (data) {
            renderRoleCheckboxes(data.lstRoleAddViewModels);
        });
        return;
    }

    // 请求选中用户的角色数据
    $.getJSON(requestUrl, { UserId: userId }, function (data) {
        renderRoleCheckboxes(data.lstRoleAddViewModels);
    });
});

// 封装渲染复选框的函数
function renderRoleCheckboxes(roles) {
    var container = $('#roles-container');
    container.empty(); // 清空原有内容

    $.each(roles, function(index, role) {
        // 构建符合模型绑定规则的HTML元素
        var roleHtml = `
            <input type="checkbox" name="lstRoleAddViewModels[${index}].Checked" ${role.Checked ? 'checked' : ''} />
            <label> ${role.RoleName}</label>
            <input type="hidden" name="lstRoleAddViewModels[${index}].RoleId" value="${role.RoleId}" />
            <input type="hidden" name="lstRoleAddViewModels[${index}].RoleName" value="${role.RoleName}" />
            <br />
        `;
        container.append(roleHtml);
    });
}

关键说明 #

1. 为什么原方法无效：页面上的for循环是服务器在首次渲染时生成的静态HTML，前端JS无法触发服务器重新执行这段C#代码，必须通过前端动态生成DOM来更新内容。
2. 模型绑定兼容性：生成的name属性严格遵循ASP.NET Core模型绑定规则（lstRoleAddViewModels[index].XXX），确保表单提交时能正确绑定到视图模型。

内容的提问来源于stack exchange，提问作者Rahul Aggarwal