Question

我正在尝试为管理员创建页面以创建新用户。创建这些用户后，他们还将获得一个已分配的角色，并且这些角色中的每一个将拥有关联权限的列表。该角色将从角色的下拉列表中选择。在选择了角色之后，但在创建用户之前，我希望相关角色的列表显示在表单的侧面，以便他们可以查看与该角色相关的权限是否是他们想要的。

我不确定在选择角色后如何在不重新加载整个页面的情况下解决此问题。我确定当信息更改时如何刷新div

Answer 1

您可以使用AJAX来实现。

这是一个简单的解决方案。首先，在您的控制器中创建一个action方法，该方法接受roleId值并获取与该角色关联的权限，并将其作为JSON数组返回。

在下面的示例中，我只是对2个权限进行硬编码。您可以使用roleId参数值来替换此实现，但是要获取数据（可能来自数据库）。

public JsonResult RoleDetails(int roleId)
{
    // Hard coded data.
    // Replace with data from your db using roleId value
    var rightList = new List<string> { "Admin", "Editor" };

    return Json(rightList);
}

因此，当使用诸如/Home/RoleDetails?roleId=2之类的请求URL进行调用时，此操作方法将返回此类数据（JSON数组）。

["Admin","Editor"]

现在，使用“角色”作为选项渲染选择元素。我们将把动作方法的路径存储在SELECT元素的data属性中。例如，您呈现的HTML应该是这样的。

<select id="selectedRole" data-url="/Home/RoleDetails">
    <option>Select one</option>
    <option value="1">Role A</option>
    <option value="2">Role B</option>
    <option value="3">Role C</option>
</select>

<div id="role-details"></div>

我们还渲染了一个div来显示细节。

我假设您知道如何呈现SELECT元素。如果您不这样做，请参考

Select Tag Helper in ASP.NET Core MVC帖子

您可以使用Url.Action助手来生成RoleDetails操作方法的正确路径，例如

<select id="selectedRole" data-url="@Url.Action("RoleDetails","Home")">

现在，您可以使用JavaScript侦听SELECT元素的change事件，读取所选的选项值，对我们上面创建的action方法进行ajax调用，获取数据（它是一个JSON数组），并更新用户界面使用的。

这是一个使用jQuery进行DOM操作的工作示例。

$(function () {

    // Listen to "change" event on SELECT
    $("#selectedRole").change(function () {
        //Get the value of selected option
        var roleId = $(this).val();
        var url = $(this).data("url") + "?roleId=" + roleId;

        //Make the AJAX call
        $.getJSON(url).then(function (data) {
            var list = "";
            // Loop through the JSON array and build HTML for a list of P tags.
            $.each(data, function (index, item) {
                list += "<p>" + item + "</p>";
            });
            // Update the Div content
            $("#role-details").html(list);
        }).fail(function (e) {
            $("#role-details").html("Error getting data");
            console.warn(e);
        });
    });

})

根据所选选项生成列表

1 个答案: