三、功能实现
按照设想，要在Index界面完成管理员的浏览、添加和删除功能。这些功能采用ajax方式。
在添加AdminController的时候自动添加了Index()方法。
添加Index视图
在Index方法上右键添加视图
@{ ViewBag.Title = "管理员"; } <ol> <li><span></span> @Html.ActionLink("首页", "Index", "Home")</li> <li>@Html.ActionLink("管理员", "Index", "Admin")</li> </ol> @section style{ @Styles.Render("~/Content/bootstrapplugincss") } @section scripts{ @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrapplugin") }
添加侧栏导航视图
Ninesky.Web/Areas/Control/Views/Admin【右键】->添加->视图
视图代码如下
<div> <div> <div><span></span> 管理员</div> </div> <div> <div> <div><span></span> @Html.ActionLink("管理","Index")</div> </div> </div> </div>
在Index视图中添加@section SideNav{@Html.Partial("SideNavPartialView")}（如图）
1、管理员列表
在Admin控制器中添加ListJson()方法
/// <summary> /// 管理员列表 /// </summary> /// <returns></returns> public JsonResult ListJson() { return Json(adminManager.FindList()); }
为在index中使用bootstrap-table显示和操作管理员列表，在index视图中添加下图代码。
<div role="group"> <button><span></span> 添加</button> <button><span></span> 删除</button> </div> <table></table>
在@section scripts{ } 中添加js代码
<script type="text/javascript"> $(document).ready(function () { //表格 var $table = $('#admingrid'); $table.bootstrapTable({ toolbar: "#toolbar", showRefresh: true, showColumns: true, showFooter: true, method: "post", url: "https://www.jb51.net/@Url.Action("ListJson")", columns: [ { title: "state", checkbox: true }, { title: "ID", field: "AdministratorID" }, { title: "帐号", field: "Accounts" }, { title: "登录时间", field: "LoginTime", formatter: function (value) { return moment(value).format("YYYY-MM-DD HH:mm:ss") } }, { title: "登录IP", field: "LoginIP" }, { title: "创建时间", field: "CreateTime", formatter: function (value) { return moment(value).format("YYYY-MM-DD HH:mm:ss") } }, { title: "操作", field: "AdministratorID", formatter: function (value, row, index) { return "<a href=https://www.jb51.net/article/\"javascript:void(0)\" onclick=https://www.jb51.net/article/\"ResetPassword(" + value + ",'" + row.Accounts + "')\">重置密码</a>" } } ] }); //表格结束 }); </script> }
显示效果如图：
2、添加管理员
在控制器中添加AddPartialView()方法