MVC4做網站六后台管理:6.1.4管理員列表、添加及刪除

一、管理員列表

1、首先【AdministratorController】中添加返回分部視圖的public PartialViewResult Index()

/// <summary>
        /// 管理員列表
        /// </summary>
        /// <returns></returns>
        [AdminAuthorize]
        public PartialViewResult Index()
        {
            return PartialView(); ;
        }

2、在添加public JsonResult List()返回管理員列表數據

/// <summary>
        /// 管理員列表
        /// </summary>
        /// <returns></returns>
        [AdminAuthorize]
        public JsonResult List()
        {
            return Json(adminRsy.Find());
        }

3、為Index()添加局部視圖。視圖中利用easyui的datagrid進行管理

@Scripts.Render("~/Areas/Admin/Scripts/Administrator.js")
<div class="c_navbar">網站設置 >> 管理員管理</div>
<div id="admin_wapper" class="fs_wapper">
    <div class="header">管理員設置 </div>
    <table id="admin_datagrid" class="easyui-datagrid" data-options="url:'@Url.Action("List", "Administrator")',singleSelect:true,toolbar:'#toolbar'">
        <thead>
            <tr>
                <th data-options="field:'AdministratorId'">ID</th>
                <th data-options="field:'IsPreset'">系統賬號</th>
                <th data-options="field:'AdminName'">用戶名</th>
                <th data-options="field:'Name'">姓名</th>
                <th data-options="field:'Email'">電子郵件</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="AdminAddDlgShow()">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="AdminDelRow('@Url.Action("Delete", "Administrator")')">刪除</a>
    </div>
    <div id="adminadddlg" class="easyui-dialog" title="添加管理員" style="width:620px;height:290px;" data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,href:'@Url.Action("Add", "Administrator")'"></div>
</div>

4、管理員添加

首先添加一個顯示添加視圖的action  public PartialViewResult Add()

/// <summary>
        /// 添加管理員
        /// </summary>
        /// <returns></returns>
        [AdminAuthorize]
        public PartialViewResult Add()
        {
            return PartialView();
        }

再添加一個提交后的處理action public JsonResult Add(Administrator admin)

[AdminAuthorize]
        [HttpPost]
        public JsonResult Add(Administrator admin)
        {
            JsonData _jdata = new JsonData();
            if (ModelState.IsValid)
            {
                if (adminRsy.Find(admin.AdminName) != null)
                {
                    _jdata.Success = false;
                    _jdata.Message = "管理員名稱已存在！";
                }
                else
                {
                    admin.IsPreset = false;
                    if (adminRsy.Add(admin))
                    {
                        _jdata.Success = true;
                        _jdata.Message = "保存成功√！";
                    }
                    else
                    {
                        _jdata.Success = false;
                        _jdata.Message = "數據未能保存到數據庫！";
                    }
                }
            }
            else
            {
                var _eItem = ModelState.Where(m => m.Value.Errors.Count > 0);//獲取驗證失敗的項
                foreach (var i in _eItem)
                {
                    _jdata.MessageLsit.Add(i.Key, "驗證失敗！");
                }
            }
            return Json(_jdata);
        }

為Add（）添加局部視圖

@model Ninesky.Areas.Admin.Models.Administrator
<div class="fs_wapper">
    @using (Html.BeginForm("Add", "Administrator", FormMethod.Post, new { id = "adminadd_form" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()
        <table>
            <tr>
                <th>@Html.LabelFor(model => model.AdminName)</th>
                <td>@Html.EasyuiInput(model => model.AdminName, new { @class = "easyui-validatebox" })
                    @Html.DisplayDescriptionFor(model => model.AdminName)</td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.PassWord)</th>
                <td>@Html.EasyuiInput(model => model.PassWord, new { @class = "easyui-validatebox",type="password" })
                    @Html.DisplayDescriptionFor(model => model.PassWord)</td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.Name)</th>
                <td>@Html.EasyuiInput(model => model.Name, new { @class = "easyui-validatebox" })
                    @Html.DisplayDescriptionFor(model => model.Name)</td>
            </tr>
            <tr>
                <th>@Html.LabelFor(model => model.Email)</th>
                <td>@Html.EasyuiInput(model => model.Email, new { @class = "easyui-validatebox" })
                    @Html.DisplayDescriptionFor(model => model.Email)</td>
            </tr>
        </table> 
    }
</div>
<div style="margin:20px;">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="AdminAddSave()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel" onclick="AdminAddDlgClose()">關閉</a>
</div>

打開Administrator.js 寫點擊保存和點擊關閉的js函數

//添加管理員保存
function AdminAddSave() {
    
    $('#adminadd_form').form('submit', {
        success: function (data) {
            var rt = jQuery.parseJSON(data);
            if (rt.Success) {
                $.messager.alert("保存成功", rt.Message,"" ,function () {
                    $("#adminadddlg").dialog("close");
                    $('#admin_datagrid').datagrid("reload");
                });
            }
            else {
                var msg = "";
                if (rt.MessageLsit != undefined) {
                    $.each(rt.MessageLsit, function (i, val) {
                        msg += "<li>" + i + ":" + val + "</li>";
                    });
                }
                if (msg != "") msg = rt.Message + "<br /> <p> 原因如下：" + "<ul>" + msg + "</ul></p>";
                else msg = rt.Message;
                $.messager.alert("保存失敗", msg, "error");
            }
        }
    });
}

//關閉添加管理員窗口
function AdminAddDlgClose() {
    $("#adminadddlg").dialog("close");
}

再添加一個顯示添加管理員窗口的方法

//顯示添加對話框
function AdminAddDlgShow()
{
    $("#adminadddlg").dialog("open");
    $("#adminadddlg").dialog("refresh");
}

5、刪除管理員

在控制器添加public JsonResult Delete(int Id)

 

/// <summary>
        /// 刪除管理員
        /// </summary>
        /// <param name="Id">管理員Id</param>
        /// <returns></returns>
        [AdminAuthorize]
        [HttpPost]
        public JsonResult Delete(int Id)
        {
            JsonData _jdata = new JsonData();
            var _admin = adminRsy.Find(Id);
            if (_admin == null)
            {
                _jdata.Success = false;
                _jdata.Message = "Id為: " + Id + " 的管理員不存在!";
            }
            else if (_admin.IsPreset)
            {
                _jdata.Success = false;
                _jdata.Message = "不能刪除系統預置管理員賬號！";
            }
            else
            {
                if (adminRsy.Delete(Id))
                {
                    _jdata.Success = true;
                    _jdata.Message = "刪除成功√";
                }
                else
                {
                    _jdata.Success = false;
                    _jdata.Message = "刪除失敗！";
                }
            }
            return Json(_jdata);

        }

在Administrator.js 中增加 刪除管理員的客戶端js方法

//刪除管理員
function AdminDelRow(url) {
    var row = $('#admin_datagrid').datagrid('getSelected');
    if (row) {
        $.messager.confirm('確認', '你確定要刪除此管理員', function (r) {
            if (r) {
                $.post(url, { Id: row.AdministratorId }, function (data) {
                    if (data.Success) {
                        $.messager.alert("刪除成功", data.Msg, "", function () { $("#admin_datagrid").datagrid("reload"); });
                    }
                    else $.messager.alert("錯誤", data.Msg, "error");
                });
            }
        });
    }
}

大功告成！

代碼http://pan.baidu.com/s/1rG1vH