您现在的位置是:网站首页> 编程资料编程资料
ASP.NET MVC5网站开发之添加、删除、重置密码、修改密码、列表浏览管理员篇2(六)_实用技巧_
2023-05-24
246人已围观
简介 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()

反正效果就是这个样子了。
三、功能实现
按照设想,要在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
相关内容
- ASP.NET MVC5网站开发之登录、验证和注销管理员篇1(六)_实用技巧_
- ASP.NET MVC5网站开发之展示层架构(五)_实用技巧_
- ASP.NET MVC5网站开发之业务逻辑层的架构和基本功能(四)_实用技巧_
- ASP.NET MVC5网站开发之实现数据存储层功能(三)_实用技巧_
- ASP.NET MVC5网站开发之总体概述(一)_实用技巧_
- 在asp.net中获取当前页面的URL的方法(推荐)_实用技巧_
- 值得收藏的asp.net基础学习笔记_实用技巧_
- asp.net 4.0+ webform程序中集成mvc4_实用技巧_
- ASP.NET Core MVC 配置全局路由前缀_实用技巧_
- 解决 .NET Core 中 GetHostAddressesAsync 引起的 EnyimMemcached 死锁问题_实用技巧_
点击排行
本栏推荐
