您现在的位置是:网站首页> 编程资料编程资料

ASP.NET MVC5网站开发之添加、删除、重置密码、修改密码、列表浏览管理员篇2(六)_实用技巧_

2023-05-24 242人已围观

简介 ASP.NET MVC5网站开发之添加、删除、重置密码、修改密码、列表浏览管理员篇2(六)_实用技巧_

一、安装插件。 

展示层前端框架以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 { ///  /// 通用类 ///  public class General { ///  /// 获取模型错误 ///  /// 模型状态 ///  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。整成下面的代码。自己渣一样的美工,具体过程就不写了。 

@ViewBag.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) 
@RenderSection("SideNav", false)
@RenderBody()

© Ninesky v0.1 BASE BY 洞庭夕照 http://mzwhj.cnblogs.com

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

三、功能实现

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

添加Index视图 

在Index方法上右键添加视图 

 @{ ViewBag.Title = "管理员"; }  @section style{ @Styles.Render("~/Content/bootstrapplugincss") } @section scripts{ @Scripts.Render("~/bundles/jqueryval") @Scripts.Render("~/bundles/bootstrapplugin") } 

添加侧栏导航视图
Ninesky.Web/Areas/Control/Views/Admin【右键】->添加->视图 

视图代码如下 

管理员
@Html.ActionLink("管理","Index")

在Index视图中添加@section SideNav{@Html.Partial("SideNavPartialView")}(如图)

1、管理员列表

在Admin控制器中添加ListJson()方法 

 ///  /// 管理员列表 ///  ///  public JsonResult ListJson() { return Json(adminManager.FindList()); } 

为在index中使用bootstrap-table显示和操作管理员列表,在index视图中添加下图代码。 

在@section scripts{ } 中添加js代码 

 } 

显示效果如图: 

2、添加管理员

在控制器中添加AddPartialView()方法 

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

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

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

-六神源码网