ASP.NET MVC5网站开发之添加删除重置密码修改密码列表浏览管理员

2016-8-18 13:01 1548 0

摘要: 一、安装插件。展示层前端框架以Bootstrap为主，因为Bootstrap的js功能较弱，这里添加一些插件作补充。其实很多js插件可以通过NuGet安装，只是NuGet安装时添加的内容较多，不如自己复制来的干净，所以这里所有的插 ...

一、安装插件。

展示层前端框架以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文件夹。

3、bootstrap-select 1.10.0
网址：http://silviomoreto.github.io/bootstrap-select/

下载并解压压缩包->将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

网址：http://bootstrap-table.wenzhixin.net.cn/
下载并解压压缩包->将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文件夹。

6、twbs-pagination
网址：http://esimakin.github.io/twbs-pagination/

下载并解压压缩包->将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 name="modelState">模型状态</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 name="viewport" 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 class="navbar navbar-default navbar-fixed-top">
 <div class="container">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 @Html.ActionLink("NINESKY 系统管理", "Index", "Home", new { area = "Control" }, new { @class = "navbar-brand" })
 </div>
 <div class="navbar-collapse collapse">
 <ul class="nav navbar-nav">
 <li><a><span class="glyphicon glyphicon-user"></span> 用户管理</a></li>
 <li><a href="@Url.Action("Index","Admin")"><span class='glyphicon glyphicon-lock'></span> 管理员</a></li>
 <li><a><span class="glyphicon glyphicon-list"></span> 栏目设置</a></li>
 <li><a><span class="glyphicon glyphicon-cog"></span> 网站设置</a></li>
 </ul>
 <ul class="nav navbar-nav navbar-right">
 <li>
 <a href="@Url.Action("MyInfo","Admin")"><span class="glyphicon glyphicon-envelope"></span> @Context.Session["Accounts"].ToString()</a>
 
 </li>
 <li>
 <a href="@Url.Action("Logout","Admin")"><span class="glyphicon glyphicon-log-out"></span> 退出</a>
 </li>
 </ul>
 </div>
 </div>
 </div>
 
 <div class="container body-content">
 <div class="row">
 <div class="col-lg-3 col-md-3 col-sm-4">@RenderSection("SideNav", false)</div>
 <div class="col-lg-9 col-md-9 col-sm-8">@RenderBody()</div>
 </div>
 <hr />
 <footer class="navbar navbar-fixed-bottom text-center bg-primary ">
 <p>© Ninesky v0.1 BASE BY 洞庭夕照 http://mzwhj.cnblogs.com</p>
 </footer>
 </div>
</body>
</html>

反正效果就是这个样子了。

三、功能实现
按照设想，要在Index界面完成管理员的浏览、添加和删除功能。这些功能采用ajax方式。
在添加AdminController的时候自动添加了Index()方法。

添加Index视图

在Index方法上右键添加视图

@{
 ViewBag.Title = "管理员";
}
 
<ol class="breadcrumb">
 <li><span class="glyphicon glyphicon-home"></span> @Html.ActionLink("首页", "Index", "Home")</li>
 <li class="active">@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 class="panel panel-default">
 <div class="panel-heading">
 <div class="panel-title"><span class="glyphicon glyphicon-lock"></span> 管理员</div>
 </div>
 <div class="panel-body">
 <div class="list-group">
 <div class="list-group-item"><span class="glyphicon glyphicon-list"></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 id="toolbar" class="btn-group" role="group">
 <button id="btn_add" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span> 添加</button>
 <button id="btn_del" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> 删除</button>
</div>
<table id="admingrid"></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: "@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=\"javascript:void(0)\" onclick=\"ResetPassword(" + value + ",'" + row.Accounts + "')\">重置密码</a>" } }
 ]
 });
 //表格结束
 });
 </script>
}

显示效果如图：

2、添加管理员
在控制器中添加AddPartialView()方法

/// <summary>
 /// 添加【分部视图】
 /// </summary>
 /// <returns></returns>
 public PartialViewResult AddPartialView()
 {
 return PartialView();
 }

Models文件夹【右键】->添加->类，输入类名 AddAdminViewModel。

using System.ComponentModel.DataAnnotations;
 
namespace Ninesky.Web.Areas.Control.Models
{
 /// <summary>
 /// 添加管理员模型
 /// </summary>
 public class AddAdminViewModel
 {
 /// <summary>
 /// 帐号
 /// </summary>
 [Required(ErrorMessage = "必须输入{0}")]
 [StringLength(30, MinimumLength = 4, ErrorMessage = "{0}长度为{2}-{1}个字符")]
 [Display(Name = "帐号")]
 public string Accounts { get; set; }
 
 /// <summary>
 /// 密码
 /// </summary>
 [DataType(DataType.Password)] [Required(ErrorMessage = "必须输入{0}")]
 [StringLength(20,MinimumLength =6, ErrorMessage = "{0}长度少于{1}个字符")]
 [Display(Name = "密码")]
 public string Password { get; set; }
 }
}

右键添加视图

注意：抓图的时候忘记勾上引用脚本库了就抓了，记得勾上。

@model Ninesky.Web.Areas.Control.Models.AddAdminViewModel
 
@using (Html.BeginForm()) 
{
 @Html.AntiForgeryToken()
  
 <div class=
                      声明：文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 
                      [邮箱地址] 删除

路过

雷人

握手

鲜花

鸡蛋

刚表态过的朋友 (1 人)

匿名

收藏分享邀请

上一篇：如果内存速度提升1000倍，电脑会变成什么样？下一篇：微信聊天记录删除了怎么恢复？实力解析

ASP.NET MVC5网站开发之添加删除重置密码修改密码列表浏览管理员

刚表态过的朋友 (1 人)

最新评论

相关分类