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

ASP.NET MVC +EasyUI 权限设计(三)基础模块

程序员文章站 2024-01-16 22:51:52
在上一章中呢,我们基本上搭建好了环境,那么本章我们就从基础模块开始写起。由于用户,角色,动作三个当中,都是依赖与动作的,所以本章我们从动作开始做起,先把这个基础模块建立起来,然后才...
在上一章中呢,我们基本上搭建好了环境,那么本章我们就从基础模块开始写起。由于用户,角色,动作三个当中,都是依赖与动作的,所以本章我们从动作开始做起,先把这个基础模块建立起来,然后才能把用户,角色和动作关联起来形成权限。

 

首先建立一个新的Controller为ActionController,为其Index方法创建一个视图文件,由于这样的视图文件太多了,而且重复性的代码也比较多,所以我们把共有的部分移植到Views/Shared/_Layout.cshtml中,换句话说就是使用模板。

 

_Layout.cshtml内容如下:

 

复制代码

<!DOCTYPE html>

 

<html>

 

<head>

 

<title>@ViewBag.Title</title>

 

<link href="/Content/easyui.css" rel="stylesheet" type="text/css" />

 

<link href="/Content/icon.css" rel="stylesheet" type="text/css" />

 

<link href="/Content/base.css" rel="stylesheet" />

 

<script src="/Content/jquery.min.js"></script>

 

<script src="/Content/jquery.easyui.min.js"></script>

 

<script type="text/javascript">

 

function createIFrame(src) {

 

var iframe = "<iframe width='100%' height='100%' scrolling='no' frameborder='0' src='" + src + "'></iframe>";

 

return iframe;

 

        }

 

@RenderSection("script",false)

 

</script>

 

</head>

 

<body>

 

@RenderBody()

 

</body>

 

</html>

复制代码

然后我们建立ActionController的Index方法的View文件,内容如下:

 

复制代码

@{

 

    ViewBag.Title = "动作设置";

 

    Layout = "/Views/Shared/_Layout.cshtml";

 

}

 

@section script{

 

    $(document).ready(function(){

 

        initActionGrid();

 

    });

 

    function initActionGrid(){

 

        $("#grid").datagrid({

 

            url:'/Action/LoadActionData',

 

            fitColumns:true,

 

            rownumbers:true,

 

            toolbar: [{

 

                iconCls: 'sys-icon-add',

 

                text:"添加动作",

 

                handler:addAction

 

            }],

 

            columns:[[

 

                {field:'AId',title:'ID',width:10,align:'center'},

 

                {field:'AName',title:'动作名',width:200,align:'center'},

 

                {field:'AValue',title:'动作值',width:200,align:'center'},

 

                {field:'opt',title:'操作',width:70,align:'center',formatter:function(v,r,i){

 

                return "<a href='javascript:delAction("+r.AId+")'><img src='/Content/sys_icons/decline.png' /></a> <a href='javascript:editAction("+r.AId+")'><img src='/Content/sys_icons/disk_edit.png' /></a>";

 

                }}

 

            ]]

 

        });

 

    }

 

    function addAction(){

 

        $('#dialog').dialog({

 

            title: '添加动作',

 

            iconCls:"sys-icon-add",

 

            width: 400,

 

            height: 300,

 

            closed: false,

 

            cache: false,

 

            modal: true,

 

            onClose:function(){

 

                $("#grid").datagrid("reload");

 

            },

 

            content:createIFrame("/Action/AddAction")

 

        });

 

    }

 

    function delAction(_aid){

 

        $.messager.confirm("提示","确认要删除此动作吗?",function(b){

 

            if(b){

 

            $.get("/Action/DelAction/",{aid:_aid},function(data){

 

                    if(data=="y"){

 

                        $("#grid").datagrid("reload");

 

                    }

 

                },"text");

 

            }

 

        });

 

    }

 

}

 

<table id="grid" data-options="fit:true"></table>

 

<p id="dialog" style="overflow:hidden"></p>

复制代码

这里使用了EasyUI的DataGrid和Dialog组件,同时我们通过相应的JS函数来实现对Action的CRUD操作。

 

在initActionGrid函数中我们队Grid进行了一些初始化的操作,从参数可以看出我们的数据加载是通过Action/LoadData这个Action完成的,所以我们在ActionController中添加这样的方法。

 

复制代码

[HttpPost]

 

public ActionResult LoadActionData()

{

 

var json = new { total = permitBLL.GetAllActionList().Count, rows = permitBLL.GetAllActionList() };

 

return Json(json,JsonRequestBehavior.DenyGet);

 

 }

复制代码

这个方法中使用了B_Permit这个类的实例来获得数据。下面我们看一下这个类的内容:

 

复制代码

#region 查询方法

 

/// <summary>

 

/// 得到所有的Action

 

/// </summary>

 

/// <returns></returns>

 

public List<Model.M_ArHat_Action> GetAllActionList() 

 

        {

 

List<Model.M_ArHat_Action> list = null;

 

DataTable dt = permitDAL.SelectAllAction();

 

if (dt != null && dt.Rows.Count > 0)

 

            {

 

                list = new List<Model.M_ArHat_Action>();

 

                Model.M_ArHat_Action action = null;

 

foreach (DataRow row in dt.Rows)

 

                {

 

                    action = new Model.M_ArHat_Action();

 

                    action.AId = Convert.ToInt32(row["AId"]);

 

                    action.AName = row["AName"].ToString();

 

                    action.AValue = row["AValue"].ToString();

 

                    list.Add(action);

 

                }

 

            }

 

return list;

 

        }

 

        #endregion

 

        #region 添加方法

 

/// <summary>

 

/// 添加一个Action

 

/// </summary>

 

/// <param name="action"></param>

 

public void AddAction(Model.M_ArHat_Action action)

 

        {

 

            permitDAL.AddAction(action);

 

        }

 

        #endregion

复制代码

在这个类中,提供了两个方法,一个是用来查询的,一个是用来插入的。当然了这里肯定少不了DAL层的功劳,同时我们来看看DAL中的D_Permit.cs的内容:

 

复制代码

public class D_Permit 

 

    { 

 

        #region SQL语句 

 

//查询所有的动作(未分页) 

 

private static readonly string sql1 = "select * from ArHat_Action order by AId Desc"; 

 

//添加一个动作 

 

private static readonly string sql2 = "insert into ArHat_Action values(@AName,@AValue)"; 

 

        #endregion 

 

        #region 添加方法 

 

/// <summary> 

 

/// 添加一个动作 

 

/// </summary> 

 

/// <param name="action"></param> 

 

public void AddAction(Model.M_ArHat_Action action) 

 

        { 

 

SqlParameter[] parameters = { 

 

new SqlParameter("@AName",SqlDbType.VarChar,50), 

 

new SqlParameter("@AValue",SqlDbType.VarChar,50) 

 

                                        }; 

 

            parameters[0].Value = action.AName; 

 

            parameters[1].Value = action.AValue; 

 

            DAL.SqlHelper.ExecuteNonQuery(sql2, parameters); 

 

        } 

 

        #endregion 

 

        #region 查询方法 

 

/// <summary> 

 

/// 查询所有的动作 

 

/// </summary> 

 

/// <returns></returns> 

 

public DataTable SelectAllAction()  

 

        { 

 

return DAL.SqlHelper.ExecuteQuery(sql1); 

 

        } 

 

        #endregion 

 

    }

复制代码

在这个类中,我们实现了对Action的查询和添加的SQL实现。说到这里呢,如果说要让项目能够更加的灵活,那么应该在三层架构的基础上添加面向接口的编程,换句话说我们得创建一个IDAL和IBLL两个项目,在这两个项目中要写出对数据库和业务逻辑的抽象操作,这是最好不过了,但是本身由于老魏这个项目比较小,所以就没有采用这中写法,感兴趣的朋友可以再QQ群中来共同的讨论一下。

 

好了,现在我们来看一下最后运行的结果。

 

wps_clip_image-9823

 

当我们点击“添加动作”的时候,界面如下:

 

wps_clip_image-2414

 

这里需要注意的是,在添加动作的js函数中,使用了content:createIFrame("/Action/AddAction")。也就是用iframe来加载AddAction的界面,当点击保存的时候会执行一个Post请求。关于这连个Action我们来看一下内容:

 

复制代码

[HttpGet]

 

public ActionResult AddAction() 

 

        {

 

return View();

 

        }

 

/// <summary>

 

/// 添加动作Post

 

/// </summary>

 

/// <param name="action"></param>

 

/// <returns></returns>

 

        [HttpPost]

 

public ActionResult AddAction(Model.M_ArHat_Action actionInfo)

 

        {

 

try

 

            {

 

                permitBLL.AddAction(actionInfo);

 

StringBuilder sb = new StringBuilder();

 

                sb.Append(@"

 

                    <script>    

 

                        parent.$(""#dialog"").dialog(""close"");

 

                    </script>

 

                ");

 

return Content(sb.ToString());

 

            }

 

catch (Exception ex)

 

            {

 

return Content("添加失败:" + ex.Message);

 

            }

 

        }

复制代码

这里由于老魏没有使用Jquery提供的jquery.unobtrusie-ajax.js,所以这里使用了Content来执行关闭对话框的方法。当然了,在UI端,需要注意的是要给Dialog设置一个onClose的事件,让其关闭的时候能够刷新父页面。

 

至于删除,老魏这里没有做,如果大家在做的过程中遇到了,希望能够自行的实现。本章到这里就写到这里吧,虽然都是一堆代码,看起来没有什么,但是在写js的时候真是费劲啊。

 

在这里得抱歉说一下了,老婆的预产期就要到了,所以后续的章节可能跟新的慢了,但是老魏保证的是肯定不会夭折的。