一、安装插件。
展示层前端框架以Bootstrap为主，因为Bootstrap的js功能较弱，这里添加一些插件作补充。其实很多js插件可以通过NuGet安装，只是NuGet安装时添加的内容较多，不如自己复制来的干净，所以这里所有的插件都是下载然后复制到项目中。
1、Bootstrap 3 Datepicker 4.17.37
网址：https://eonasdan.github.io/bootstrap-datetimepicker/
下载并解压压缩包->将bootstrap-datetimepicker.js和bootstrap-datetimepicker.min.js复制到Ninesy.Web项目的Scripts文件夹，将bootstrap-datetimepicker.css和bootstrap-datetimepicker.min.css复制到Content文件夹。
2、bootstrap-dialog 3.3.4.1
网址：https://github.com/nakupanda/bootstrap3-dialog
下载并解压压缩包->将.js复制到Ninesy.Web项目的Scripts文件夹，将.css复制到Content文件夹。
下载并解压压缩包->将bootstrap-select.js复制到Ninesy.Web项目的Scripts文件夹，和defaults-zh_CN.js重命名为bootstrap-select-zh_CN.js复制到Ninesy.Web项目的Scripts文件夹，将bootstrap-select.css、bootstrap-select.css.map和bootstrap-select.min.css复制到Content文件夹。
4、bootstrap-table 1.10.1
网址：
下载并解压压缩包->将bootstrap-table.js和bootstrap-table-zh-CN.js复制到Ninesy.Web项目的Scripts文件夹，将bootstrap-table.css复制到Content文件夹。
5、Bootstrap TreeView 1.2.0
网址：https://github.com/jonmiles/bootstrap-treeview
下载并解压压缩包->将bootstrap-treeview.js复制到Ninesy.Web项目的Scripts文件夹，将bootstrap-treeview.css复制到Content文件夹。
下载并解压压缩包->将jquery.twbsPagination.js和jquery.twbsPagination.min.js复制到Ninesy.Web项目的Scripts文件夹。
7、对js和css进行捆绑和压缩
打开Ninesky.Web->App_Start->BundleConfig.cs。添加红框内的代码。
二、获取ModelState错误信息的方法
在项目中有些内容是通过AJAX方法提交，如果提交时客户端没有进行验证，在服务器端进行验证时会将错误信息保存在ModelState中，这里需要写一个方法来获取ModelState的错误信息，以便反馈给客户端。
1、Ninesk.Web【右键】->添加->类，输入类名General。
引用命名空间using System.Web.Mvc和System.Text。
添加静态方法GetModelErrorString(),该方法用来获取模型的错误字符串。
using System.Linq; using System.Text; using System.Web.Mvc; namespace Ninesky.Web { /// <summary> /// 通用类 /// </summary> public class General { /// <summary> /// 获取模型错误 /// </summary> /// <param>模型状态</param> /// <returns></returns> public static string GetModelErrorString(ModelStateDictionary modelState) { StringBuilder _sb = new StringBuilder(); var _ErrorModelState = modelState.Where(m => m.Value.Errors.Count() > 0); foreach(var item in _ErrorModelState) { foreach (var modelError in item.Value.Errors) { _sb.AppendLine(modelError.ErrorMessage); } } return _sb.ToString(); } } }
三、完善布局页
上次完成了管理员登录,这次要进行登录后的一些功能，要先把后台的布局页充实起来。
打开 Ninesky.Web/Areas/Control/Views/_Layout.cshtml。整成下面的代码。自己渣一样的美工，具体过程就不写了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - 系统管理</title> @Styles.Render("~/Content//controlcss") @RenderSection("style", required: false) @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", required: false) </head> <body> <div> <div> <div> <button type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span></span> <span></span> <span></span> </button> @Html.ActionLink("NINESKY 系统管理", "Index", "Home", new { area = "Control" }, new { @class = "navbar-brand" }) </div> <div> <ul> <li><a><span></span> 用户管理</a></li> <li><a href="https://www.jb51.net/@Url.Action("Index","Admin")"><span></span> 管理员</a></li> <li><a><span></span> 栏目设置</a></li> <li><a><span></span> 网站设置</a></li> </ul> <ul> <li> <a href="https://www.jb51.net/@Url.Action("MyInfo","Admin")"><span></span> @Context.Session["Accounts"].ToString()</a> </li> <li> <a href="https://www.jb51.net/@Url.Action("Logout","Admin")"><span></span> 退出</a> </li> </ul> </div> </div> </div> <div> <div> <div>@RenderSection("SideNav", false)</div> <div>@RenderBody()</div> </div> <hr /> <footer> <p>© Ninesky v0.1 BASE BY 洞庭夕照 </p> </footer> </div> </body> </html>
反正效果就是这个样子了。