分配权限前台ajax显示

@{
Layout = null;
}

<meta name="viewport" content="width=device-width" />
<title>Main</title>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Content/jquery-3.3.1.js"></script>
<style>
    /*实现页面布局*/
    #div1 {
        width: 600px;
        margin: auto;
        margin-top: 50px;
        padding: 20px;
        border: 2px solid black;
    }
    #div2 {
        width: 556px;
        padding: 20px;
        border: 2px solid black;
    }
</style>


<div id="div1">
    <h2>雇员表</h2>
    @*页面上部显示雇员信息*@
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>编号</th>
                <th>雇员姓名</th>
                <th>角色</th>
            </tr>
        </thead>
        <tbody id="tab"></tbody>
    </table>
    <div id="div2">
        <h3>为“<span id="uName"></span>”分配角色</h3>
        @*右侧显示的是所有“角色”*@
        <select id="rList"></select>
        <input id="Button1" type="button" value=">>" onclick="addPower()" />
        <input id="Button1" type="button" value="<<" onclick="delPower()" />
        @*左侧显示的是当前雇员 现有的角色*@
        <select id="pList">
            <option value="0">当前雇员所属角色</option>
        </select>
    </div>
</div>





$(function () {
    show();
    getRoleList();
})

function getRoleList() {
    $.ajax({
        url: "/User/GetRoleInfos",
        type: "get",
        success: function (data) {
            $("#rList").empty();
            $("#rList").append('<option value="0">所有可选角色</option>');
            $(data).each(function () {
                $("#rList").append('<option value="' + this.RId + '">' + this.RName + '</option>');
            })
        }
    })
}

function setRole(uName, uId) {
    $("#uName").text(uName);
    localStorage["uId"] = uId;
    getRoleById();
}

function getRoleById() {
    $.ajax({
        url: "/User/GetUserRolesById?uId=" + localStorage["uId"],
        type: "get",
        success: function (data) {
            $("#pList").empty();
            $("#pList").append('<option value="0">当前雇员所属角色</option>');
            $(data).each(function () {
                $("#pList").append('<option value="' + this.RId + '">' + this.RName + '</option>');
            })
        }
    })
}

function show() {
    $.ajax({
        url: "/User/ShowUserRole",
        type: "get",
        success: function (data) {
            $("#tab").empty();
            $(data).each(function () {
                var rname = "";
                if (this.RName != null) {
                    rname = this.RName;
                }
                var str = '<tr>'
                    + '<td>' + this.UId + '</td>'
                    + '<td>' + this.UName + '</td>'
                    + '<td>' + rname + '</td>'
                    + '<td><a href="javascript:setRole(\'' + this.UName + '\',' + this.UId + ')">设置角色</a></td>'
                    + '</tr>';
                $("#tab").append(str);
            })
        }
    })
}

//左侧的选择了，再点击中部的另一个按钮可以添加到左侧
function addPower() {
    var rId = $("#rList").val();
    if ($("#uName").text() == "") {
        alert("请设置要分配的用户!");
        return;
    }
    if (rId == 0) {
        alert("请选择要分配的角色!");
        return;
    }
    var obj = {};
    obj.UId = localStorage["uId"];
    obj.RId = rId;
    $.ajax({
        url: "/User/AddUserRole",
        data: obj,
        type: "post",
        success: function (data) {
            if (data > 0) {
                alert("权限分配成功!");
                getRoleById();
                show();
            }
        }
    })
}

//右侧选择了，再点击中部的一个按钮可以删除
function delPower() {
    var rId = $("#pList").val();
    if ($("#uName").text() == "") {
        alert("请设置要取消权限的用户!");
        return;
    }
    if (rId == 0) {
        alert("请选择要取消的权限!");
        return;
    }
    $.ajax({
        url: "/User/DelUserRole?uId=" + localStorage["uId"] + "&rId=" + rId,
        type: "post",
        success: function (data) {
            if (data > 0) {
                alert("取消权限成功!");
                getRoleById();
                show();
            }
        }
    })
}