C#MVC实现为雇员配置角色(完整详细+数据库)

数据库创建“用户表”“角色表”“用户角色关系表”

create table roles
(
rid int identity,
rname varchar(50),
remark varchar(50)
)
create table userrole
(
users_uid int,
roles_rid int
)
create table users
(
uid int identity,
uname varchar(50),
upwd varchar(50)
)

数据库创建一个view视图

create view user_show
as
select rname,rid,uname,uid from users join userrole on users.uid=userrole.users_uid join roles on userrole.roles_rid=roles.rid 

然后打开vs创建mvc

添加一个控制器

控制器需要引用

using dapper;
using system.data.sqlclient;

控制器代码如下

public actionresult index()
        {
            using (sqlconnection conn = new sqlconnection("data source=.;initial catalog=unit13;integrated security=true"))
            {
                list<userandrole> list = conn.query<userandrole>("select uid,uname,stuff((select ','+rname from user_show where a.uid = uid for xml path('')),1,1,'') as rname from user_show as a group by uid,uname").tolist();
                return view(list);
            }
        }

        // get: user
        public actionresult shezhi(int uid)
        {
            using (sqlconnection conn = new sqlconnection("data source=.;initial catalog=unit13;integrated security=true"))
            {
                session["uid"] = uid;
                viewbag.list = getbind();
                list<userandrole> list = conn.query<userandrole>($"select rid,rname from users join userrole on users.uid = userrole.users_uid join roles on userrole.roles_rid = roles.rid where uid = {uid}").tolist();
                return view(list);
            }
        }
        public list<userandrole> getbind()
        {
            using (sqlconnection conn = new sqlconnection("data source=.;initial catalog=unit13;integrated security=true"))
            {
                return conn.query<userandrole>("select * from  roles ").tolist();
            }
        }

        public int delete(int rid)
        {
            using (sqlconnection conn = new sqlconnection("data source=.;initial catalog=unit13;integrated security=true"))
            {
                return conn.execute($"delete from userrole where roles_rid={rid}");
            }
        }

        public int add(string uid, string rid)
        {
            uid = session["uid"].tostring();
            using (sqlconnection conn = new sqlconnection("data source=.;initial catalog=unit13;integrated security=true"))
            {
                object n = conn.executescalar($"select count(1) from userrole where users_uid={uid} and roles_rid={rid}");
                if (convert.toint32(n) == 0)
                {
                    return conn.execute($"insert into userrole values('{uid}','{rid}')");
                }
                else
                {
                    return 0;
                }

            }
        }

        public class userandrole
        {
            public int uid { get; set; }
            public string uname { get; set; }
            public string rname { get; set; }
            public int rid { get; set; }

        }

然后创建index视图（

1. 页面显示雇员信息
2. 点击“设置角色”跳转shezi页面为以下部分赋值

(1) 右侧显示的是所有“角色”

(2) 左侧显示的是当前雇员 现有的角色）

）

@using 配置角色.controllers
@model list<usercontroller.userandrole>
@{
    viewbag.title = "index";
}

<table class="table-bordered table">
    <tr>
        <td>编号</td>
        <td>雇员姓名</td>
        <td>角色</td>
        <td></td>
    </tr>
    @foreach (var item in model)
    {
        <tr>
            <td>@item.uid</td>
            <td>@item.uname</td>
            <td>@item.rname</td>
            <td> <a href="/user/shezhi?uid=@item.uid">设置角色</a></td>
        </tr>
    }
</table>

运行效果

 

 

再添加一个shezhi视图

@{
    viewbag.title = "shezhi";
}
@using 配置角色.controllers
@model list<usercontroller.userandrole>

<div id="app" style="height:250px;width:100%;border:double">
    <div style="height:150px;width:250px;border:double;float:left;margin-top:45px;margin-left:20px">
        <span>所有可选角色：</span>
        <select id="select1" multiple="true">
            @foreach (var item in viewbag.list as list<usercontroller.userandrole>)
            {
                <option value="@item.rid">@item.rname</option>
            }

        </select>
    </div>
    <div style="height:150px;width:150px;float:left;margin-top:80px;margin-left:25%">
        <button onclick="zuo()">←</button>
        <br>
        <button onclick="you()">→</button>
    </div>
    <div style="height:150px;width:250px;border:double;float:right;margin-top:45px;margin-right:20px">
        <span>当前雇员所属角色：</span>
        <select id="select2" multiple="true">
            @foreach (var item in model)
            {
                <option value="@item.rid">@item.rname</option>
            }

        </select>

        <input id="hidden1" type="@session["uid"]" />
    </div>
</div>

<script>
    function zuo() {
        //alert(1);
        var id = $("#select2").val();
        if (id == null) {
            alert('请选择')
        }
        else {
            $.ajax({
                url: "/user/delete?rid=" + id,
                success: function (d) {
                    if (d > 0) {
                        alert('成功');
                    }
                }

            })

        }

    }
    function you() {
        //alert(1);

        var uid = $("#hidden1").val();
        var rid = $("#select1").val();

        $.ajax({
            url: "/user/add?uid=" + uid + "&rid=" + rid,
            success: function (d) {
                if (d > 0) {
                    alert('成功');
                }
                else {
                    alert('用户已存在');
                }
            }

        })
    }

</script>

实现效果

 

 

(1) 右侧选择了，再点击中部的一个按钮可以删除

(2) 左侧的选择了，再点击中部的另一个按钮可以添加到左侧