ASP.NET Razor页面按钮/ActionLink传值至AccountController的AssignRole方法

我来给你几个靠谱的解决方案，都是ASP.NET Razor里常用的做法，你可以根据自己的需求来选：

方案1：用表单同步提交（最稳妥的传统方式） #

这种方式不用写JS，依赖ASP.NET的模型绑定自动传值，不容易出错，适合不需要无刷新的场景。

先把你的下拉列表放到表单里，按钮点击直接提交：

@model SpecSelRepos.Models.AccountViewModels.ManageRolesViewModel

<fieldset>
    <label for="selectUserName">Users:</label>
    <select asp-for="ManageRolesUser" asp-items="@Model.UserList" class="form-control">
        <option value="">请选择用户</option>
    </select>

    <label for="selectRoleName">Roles:</label>
    <select asp-for="ManageRolesRole" asp-items="@Model.RoleList" class="form-control">
        <option value="">请选择角色</option>
    </select>

    <!-- 包裹下拉的表单，指定控制器和方法 -->
    <form asp-controller="Account" asp-action="AssignRole" method="post" class="mt-3">
        <!-- 这里的asp-for会自动生成匹配模型属性的name，确保模型绑定生效 -->
        <select asp-for="ManageRolesUser" asp-items="@Model.UserList" class="form-control mb-2"></select>
        <select asp-for="ManageRolesRole" asp-items="@Model.RoleList" class="form-control mb-2"></select>
        <button type="submit" class="btn btn-primary">分配角色</button>
    </form>
</fieldset>

然后你的AccountController里的AssignRole方法可以直接接收模型，或者单独的参数：

[HttpPost] // 必须加HttpPost，因为表单是Post提交
[ValidateAntiForgeryToken] // 防CSRF攻击，ASP.NET表单会自动生成令牌
public async Task<IActionResult> AssignRole(ManageRolesViewModel model)
{
    if (!ModelState.IsValid)
    {
        // 如果验证失败，返回原页面并显示错误
        return View(model);
    }

    // 用模型里的选中值来处理角色分配
    var user = await _userManager.FindByIdAsync(model.ManageRolesUser);
    if (user != null)
    {
        var result = await _userManager.AddToRoleAsync(user, model.ManageRolesRole);
        if (result.Succeeded)
        {
            // 成功后重定向到角色管理页面
            return RedirectToAction("ManageRoles");
        }
        // 把错误信息添加到ModelState，返回页面显示
        foreach (var error in result.Errors)
        {
            ModelState.AddModelError("", error.Description);
        }
    }
    else
    {
        ModelState.AddModelError("", "选中的用户不存在");
    }

    return View(model);
}

方案2：用ActionLink配合JS动态传值（适合链接样式的按钮） #

如果你想保留ActionLink的样式，不想用表单，可以用JS动态修改ActionLink的URL参数：

@model SpecSelRepos.Models.AccountViewModels.ManageRolesViewModel

<fieldset>
    <label for="userSelect">Users:</label>
    <select id="userSelect" asp-for="ManageRolesUser" asp-items="@Model.UserList" class="form-control">
        <option value="">请选择用户</option>
    </select>

    <label for="roleSelect">Roles:</label>
    <select id="roleSelect" asp-for="ManageRolesRole" asp-items="@Model.RoleList" class="form-control">
        <option value="">请选择角色</option>
    </select>

    <!-- 初始的ActionLink，参数留空 -->
    <a id="assignRoleLink" asp-controller="Account" asp-action="AssignRole" 
       asp-route-userId="" asp-route-roleName="" 
       class="btn btn-primary mt-3 disabled">分配角色</a>
</fieldset>

@section Scripts {
    <script>
        // 获取元素
        const userSel = document.getElementById('userSelect');
        const roleSel = document.getElementById('roleSelect');
        const link = document.getElementById('assignRoleLink');

        // 动态更新链接的方法
        function updateAssignLink() {
            const userId = userSel.value;
            const roleName = roleSel.value;
            
            if (userId && roleName) {
                // 拼出正确的URL
                link.href = `/Account/AssignRole?userId=${encodeURIComponent(userId)}&roleName=${encodeURIComponent(roleName)}`;
                link.classList.remove('disabled');
            } else {
                // 没选全的话禁用链接
                link.href = '#';
                link.classList.add('disabled');
            }
        }

        // 监听下拉变化和页面加载
        userSel.addEventListener('change', updateAssignLink);
        roleSel.addEventListener('change', updateAssignLink);
        updateAssignLink(); // 页面加载时初始化状态
    </script>
}

对应的控制器方法可以用HttpGet（但注意：修改数据的操作建议用Post，所以这种方式更适合查询类操作，如果要用来分配角色，最好还是改成Post，或者用方案3的AJAX）：

[HttpGet]
public async Task<IActionResult> AssignRole(string userId, string roleName)
{
    // 这里处理角色分配逻辑，注意Get请求不建议做修改操作，只是演示传参
    var user = await _userManager.FindByIdAsync(userId);
    if (user != null)
    {
        await _userManager.AddToRoleAsync(user, roleName);
    }
    return RedirectToAction("ManageRoles");
}

方案3：AJAX异步提交（无刷新页面） #

如果想要页面不刷新就能完成分配，提升用户体验，可以用AJAX：

@model SpecSelRepos.Models.AccountViewModels.ManageRolesViewModel

<fieldset>
    <label for="userSelect">Users:</label>
    <select id="userSelect" asp-for="ManageRolesUser" asp-items="@Model.UserList" class="form-control">
        <option value="">请选择用户</option>
    </select>

    <label for="roleSelect">Roles:</label>
    <select id="roleSelect" asp-for="ManageRolesRole" asp-items="@Model.RoleList" class="form-control">
        <option value="">请选择角色</option>
    </select>

    <button id="assignBtn" class="btn btn-primary mt-3">分配角色</button>
    <!-- 用来显示结果的容器 -->
    <div id="resultMsg" class="mt-2"></div>
</fieldset>

@section Scripts {
    <script>
        document.getElementById('assignBtn').addEventListener('click', async (e) => {
            e.preventDefault();
            
            const userId = document.getElementById('userSelect').value;
            const roleName = document.getElementById('roleSelect').value;
            const resultMsg = document.getElementById('resultMsg');

            // 验证是否选全
            if (!userId || !roleName) {
                resultMsg.innerHTML = '<div class="alert alert-warning">请先选择用户和角色！</div>';
                return;
            }

            try {
                // 发送Post请求，带上CSRF令牌
                const response = await fetch('/Account/AssignRole', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'RequestVerificationToken': document.querySelector('input[name="__RequestVerificationToken"]').value
                    },
                    body: `userId=${encodeURIComponent(userId)}&roleName=${encodeURIComponent(roleName)}`
                });

                const data = await response.json();
                if (data.success) {
                    resultMsg.innerHTML = '<div class="alert alert-success">角色分配成功！</div>';
                    // 可以在这里清空下拉或者刷新用户列表
                } else {
                    resultMsg.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            } catch (err) {
                resultMsg.innerHTML = '<div class="alert alert-danger">请求失败，请稍后重试！</div>';
            }
        });
    </script>
}

控制器方法返回JSON结果：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> AssignRole(string userId, string roleName)
{
    if (string.IsNullOrEmpty(userId) || string.IsNullOrEmpty(roleName))
    {
        return Json(new { success = false, message = "用户和角色不能为空" });
    }

    var user = await _userManager.FindByIdAsync(userId);
    if (user == null)
    {
        return Json(new { success = false, message = "选中的用户不存在" });
    }

    var result = await _userManager.AddToRoleAsync(user, roleName);
    if (result.Succeeded)
    {
        return Json(new { success = true, message = "角色分配成功" });
    }

    // 把错误信息拼接起来返回
    var errorStr = string.Join("；", result.Errors.Select(e => e.Description));
    return Json(new { success = false, message = errorStr });
}

常见问题排查 #

如果你之前的尝试没成功，大概率是这几个原因：

• 控制器方法没加[HttpPost]，而你用了Post提交；
• 下拉列表的name属性和控制器参数名/模型属性名不匹配，导致模型绑定失败；
• Post请求没带CSRF令牌，被ASP.NET拦截；
• JS里的元素ID写错了，导致获取不到选中值。

内容的提问来源于stack exchange，提问作者Steve W