欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-21 09:29:05
数据库创建“用户表”“角色表”“用户角色关系表” create table roles ( RId int identity, RName varchar(50), Remark varchar(50) ) create table UserRole ( Users_UId int, roles_R ......

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

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>

运行效果

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

 

 

再添加一个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>

实现效果

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

 

 

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

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

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