ASP.NET MVC 5网站开发中添加\删除\重置密码\修改密码\列表浏览管理员2 (6)

首先，安装插件。

Bootstrap是显示层的主要前端框架，由于Bootstrap的js功能比较弱，所以这里增加了一些插件来补充。其实很多js插件都可以通过NuGet安装，但是NuGet在安装的时候添加的内容比较多，没有自己复制的那个干净，所以这里所有的插件都是下载后再复制到项目中。

1.Bootstrap 3日期选择器4.17.37网站：https://eonasdan.github.io/bootstrap-datetimepicker/

下载并解压缩压缩包-将bootstrap-datetimeicker . js和bootstrap-datetimeicker . min . js复制到Ninesy的Scripts文件夹中。Web项目，并将引导-datetimepicker.css和引导-datetimepicker.min.css复制到Content文件夹。

2.自举对话3.3.4.1网站：https://github.com/nakupanda/bootstrap3-dialog

下载并解压缩压缩包-副本。js到Ninesy的脚本文件夹。网络项目和。内容文件夹。

3.引导-选择1.10.0网站：http://silviomoreto.github.io/bootstrap-select/

下载并解压压缩包-复制引导-选择. js到Ninesy的Scripts文件夹。Web项目，并将默认值-zh_CN.js重命名为bootstrap-select-zh_CN.js到Ninesy的Scripts文件夹。网络项目。将引导-选择. css、引导-选择. css.map和引导-选择. min.css复制到内容文件夹。

4、自举-表1.10.1

地址：http://bootstrap-table.wenzhixin.net.cn/下载并解压压缩包-复制bootstrap-table.js和bootstrap-table-zh-CN.js到Ninesy的Scripts文件夹。网络项目，并将引导表复制到内容文件夹。

5、引导树视图1.2.0

网站：https://github.com/jonmiles/bootstrap-treeview

下载并解压压缩包-复制bootstrap-treeview.js到Ninesy的Scripts文件夹。Web项目和引导程序-treeview.css到内容文件夹。

6.双字节分页网站：http://esimakin.github.io/twbs-pagination/

下载并解压压缩包-将jquery . twbspaging . js和jquery . twbspaging . min . js复制到Ninesy的Scripts文件夹。网络项目。

7.绑定压缩js和css，打开nine sky . web-app _ start-bundleconfig . cs，在红框中添加代码。

第二，获取模型状态错误信息的方法。项目中的一些内容是通过AJAX方法提交的。如果客户端提交时验证失败，服务器验证时错误信息将保存在ModelState中。这里需要编写一个方法来获取ModelState的错误信息，以便反馈给客户端。

1.尼尼微。web[右键]-添加类，并输入类名General。使用系统的命名空间。Mvc和系统。文本被引用。添加一个静态方法GetModelErrorString()，用于获取模型的错误字符串。

使用系统。Linq使用系统。文字；使用系统。Web . Mvcnamespace ninesky . web {///summary///general class///summary public class general {///summary///get model error///summary///param name=' model state ' model state/param///returns/returns public state string getmodelarstrstring(modelstatedict model state){ StringBuilder _ sb=new StringBuilder()；var _ErrorModelState=modelState。其中(m=m . value . errors . count()0)；foreach(var item in _ error modelstate){ foreach(var modelar in item。值.错误){ _sb。AppendLine(modelarr。error message)；} } return _sb。ToString()；}}}第三，改进页面布局上次管理员登录完成。这次要执行一些登录后的功能，先丰富后台的布局页面。打开Ninesky.Web/Areas/Control/Views/_Layout.cshtml.进入以下代码。如果你是和自己一样的艺术家，就不会写具体的流程。

！DOCTYPE html html head meta charset=' utf-8 '/meta name=' viewpar ' content=' width=device-width，initial-scale=1.0 ' title @ viewpag .标题-系统管理/title @Styles .渲染(' ~/Content//control CSS ')@渲染部分(' style '，required : false)@脚本.渲染(' ~/bundle/modernizr ')@脚本渲染(' ~/bundle/jquery ')@脚本.render(' ~/bundle/bootstrap ')@ render部分(' scripts '，要求d : false)/header dy div class=' nav bar nav bar-默认导航栏-固定-顶部' div class='容器' div class='导航栏-标题'按钮类型='按钮' class='导航栏-切换'数据-切换='折叠'数据-目标=' .导航栏-折叠图标栏/图标栏/按钮@ Html .ActionLink('NINESKY系统管理，' Index '，' Home '，new { area='Control' }，new { @ class=' nav bar-brand ' })/div class=' nav bar-折叠折叠折叠' ul class=' nav bar-nav ' lia span class=' glyphicon glyphicon-user '/span用户管理/a/Li Li a href=' @ Ul .操作('索引','管理)' span class=' glyphicon-glyphicon-lock '/span管理员/a/Li Li span='字体列表'/span栏目设置/a/Li Li span网站设置/a/Li/ul ul class='导航条-导航条-右侧'阿利href='@Url .操作(' MyInfo '，' Admin ')' span class=' glyphicon-glyphicon-envelope '/span @ Context .会话['帐户']。ToString()/a /li阿利。操作('注销','管理)“span class=”字形注销/span退出/a/Li/ul/div/div/class=' container body-content ' div class=' row ' div class=' col-LG-3 col-MD-3 col-sm-4 ' @ render section(' SideNav '，false)/div class=' col-LG-9 col-MD-9 col-sm-8 ' @ render body()/div/HR/footer class=' nav bar nav bar-固定底部文本-中心bg-primary ' p Ninesky v0.1 BASE BY洞庭夕照http://mzwhj.cnblogs.com/p/页脚/分区/正文/html

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

三、功能实现按照设想，要在索引界面完成管理员的浏览、添加和删除功能。这些功能采用创建交互式、快速动态网页应用的网页开发技术方式。在添加管理控制器的时候自动添加了索引()方法。

添加索引视图

在索引方法上右键添加视图

@{ ViewBag .Title='管理员；} ol class='面包屑' lispan class=' glyphicon glyphicon-home '/span @ Html .ActionLink('首页，'索引'，'主页')/li li class='active'@Html .ActionLink('管理员、"索引"、"管理"/Li/ol @节样式{ @样式。呈现(' ~/内容/引导')} @节脚本{ @脚本渲染(' ~/bundle/jqueryval ')@脚本.渲染(' ~/bundle/bootstrapping lugin ')}添加侧栏导航视图尼尼微。网站/区域/控制/视图/管理【右键】-添加-视图

视图代码如下

div class=' panel panel-default ' div class=' panel-heading ' div class=' panel-title ' span class=' glyphicon glyphicon-lock '/span管理员/div/div class=' panel-body ' div class=' list-group ' div class=' list-group-item ' span class=' glyphicon glyphicon-list '/span @ Html .ActionLink('管理"'索引)/分区/分区/分区在索引视图中添加@section SideNav{@Html .分部(' SideNavPartialView')}(如图)

1、管理员列表在管理控制器中添加ListJson()方法

///摘要///管理员列表////summary///returns/returns public Json result listJson(){ return Json(adminManager).find list())；}为在指数中使用自举表显示和操作管理员列表，在指数视图中添加下图代码。

div id=' toolbar ' class=' BTN-group '角色=' group '按钮id=' BTN _ add ' class=' BTN BTN-default ' span class=' glyphicon glyphicon-plus '/span添加/button button id=' BTN _德尔' class=' BTN BTN-默认' span class=' graphicon graphicon-remove '/span删除/button/div表id=' admin grid '/table在@section scripts{ }中添加射流研究…代码

脚本类型='text/javascript' $(文档)。就绪（函数(){ //表格var $ table=$(" # admin grid ")；$ table。bootstraptable({ toolbar : ' # toolbar '，showRefresh: true，showColumns: true，showFooter: true，method: 'post '，url: '@Url .操作(' ListJson ')'，列： [ { title: 'state '，checkbox: true }，{ title: 'ID '，field: 'AdministratorID' }，{ title: '帐号，字段：“帐户”，标题：登录时间，field: 'LoginTime '，formatter:函数（值){返回力矩(值)。格式(' YYYY-MM-DD hh :MM :s ')} }，{ title: '登录IP '，field: 'LoginIP' }，{ title: '创建时间，field: 'CreateTime '，formatter:函数（值){返回力矩(值)。格式(' YYYY-MM-DD hh :MM :s ')} }，{ title: '操作，字段：“管理员id”，格式器：函数（值、行、索引){ return ' a href=\ ' JavaScript : void(0)\ ' onclick=\ '重置密码('值','行。帐户' ')\ '重置密码/a ' } }]})；//表格结束});/script}显示效果如图：

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

///摘要///添加【分部视图】////summary///returns/returns public partial view result add partial view(){ return partial view()；}型号文件夹【右键】-添加-类，输入类名AddAdminViewModel。

使用系统。组件模型。数据注释；命名空间尼尼微.网络。区域。控制。车型{///总结///添加管理员模型////摘要公共类AddAdminViewModel { ///摘要///帐号////摘要[必选(错误消息='必须输入{ 0 } ')][字符串长度(30,最小长度=4,错误消息='{0}长度为{2}-{1}个字符)][显示（名称='帐号)]公共字符串帐户{获取设置；} ///摘要///密码////摘要[DataType(数据类型。密码)][必需（错误消息='必须输入{ 0 } ')][字符串长度(20,最小长度=6,错误消息='{0}长度少于{1}个字符)][显示（名称='密码)]公共字符串密码{ get设置；} }}右键添加视图

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

@模型尼尼微网络。区域。控制。模特。addadminviewmodel @使用(Html .begin inform()){ @ Html .antiforyToken()div class=' form-horizontal ' @ Html .ValidationSummary(true，"，new { @ class=' text-danger ' })div class=' form-group ' @ Html .标签(型号=型号.Accounts，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .编辑(模型=模型.帐户，新的{ HTMl Attributes=new { @ class=' form-control ' } })@ Html .ValidationMessageFor(model=model .帐户'',新的{ @ class=' text-danger ' })/div/div class=' form-group ' @ Html .标签(型号=型号.密码，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .编辑(模型=模型.密码，new { HTMl Attributes=new { @ class=' form-control ' } })@ Html .ValidationMessageFor(model=model .密码'',新的{ @ class=' text-danger ' })/div/div/div } @脚本。渲染(' ~/bundle/jqueryval ')在索引视图脚本脚本区域，"//表格结束"后面添加射流研究…代码

//表格结束//工具栏//添加按钮$('#btn_add ').click(function(){ var addDialog=new BootstrapDialog({ title : ' span class=' glyphicon glyphicon-plus '/span添加管理员，消息：函数（对话框){ var $ message=$(' div/div ')；var page toload=dialog。getdata(' page to load ')；$消息。加载(页面加载)；返回$ message}，数据： { ' PageToLoad ' : ' @ URl .操作(' AddPartialView')' }，按钮：[{ icon : ' glyphicon-plus '，标签: '添加，操作：函数(dialogItself) { $ .帖子($(“表单”).attr('action ')，$('form ').serializeArray()，函数（数据){ if(数据)。代码==1){ bootstrapdialog。显示({消息：数据.消息，按钮：[{ icon : ' glyphicon-ok '，标签: '确定，操作：函数(dialogItself){ $ table。bootstraptable(' refresh ')；dialogitself。close()；adddialog。close()；} }] });} else BootstrapDialog.alert(数据。消息);}，' JSON ')；$(“表单”).validate()；} }，{ icon : ' glyphicon-remove '，标签: '关闭，操作：函数(dialogItself){ dialogItself。close()；} }] });adddialog。open()；});//添加按钮结束

3、删除管理员考虑到批量删除，上次写管理员没有写批量删除方法，这次补上。打开尼尼微。核心/管理员添加如下代码

///摘要///删除【批量】返回值代码：1-成功，2-部分删除，0-失败////summary///param name=' administrator id list '/param///returns/returns public Response Delete(Listint administrator id list){ Response _ resp=new Response()；int _ TotalDel=administratorIDList .计数；int _ TotalAdmin=Count()；foreach(管理员数据列表中的int I){ if(_ TotalAdmin 1){ base .存储库。删除（新管理员(){ AdministratorID=i }，false)；_ TotalAdmin-；} else _resp .消息='最少需保留一名管理员；} _resp .数据=基础。存储库。save()；if(_resp .Data==_totalDel) { _resp .代码=1;_resp .消息='成功删除_resp ."数据"名管理员；} else if (_resp .数据0) { _resp .代码=2;_resp .消息='成功删除_resp ."数据"名管理员；} else { _resp .代码=0;_resp .消息='删除失败；} return _ resp}另外要修改一下尼尼微。数据库的删除公共int Delete(T实体，bool isSave)代码将移动方式改为附上，不然会出错。

///摘要///删除实体////summary///param name=' entity '实体/param ///param name='isSave '是否立即保存/param /返回在“isSave”为真实的时返回受影响的对象的数目，为错误的时直接返回0/返回公共int Delete(T实体，bool isSave) { DbContext .SetT().附加（实体);数据库上下文.EntryT(实体)。状态=实体状态。已删除；返回伊萨瓦？数据库上下文.saveChanges(): 0；}打开管理控制器添加DeleteJson(列表id)方法

//摘要///删除///响应。代码：1-成功，2-部分删除，0-失败///响应。数据：删除的数量////summary///returns/returns[Httpset]public JSON结果DeleteJson(Listint id){ int _ total=id .count()；Response _res=新核心。类型。响应();int _currentAdminID=int .解析（会话['AdminID']).ToString())；if(id .包含(_ CurrentAdminid)){ id .移除(_ CurrentAdminid)；} _res=adminManager .删除(idsif(_ RES . Code==1 _ RES . Data _ total){ _ RES . Code=2；_res.Message='共提交删除'总计'名管理员，实际删除_res.Data '名管理员\n。原因：不能删除当前登录的账号；}否则如果(_res.Code==2) { _res.Message='共提交删除'总计'名管理员，实际删除_res.Data '名管理员。';}返回JSON(_ RES)；}在索引视图脚本脚本区域，"//添加按钮结束"后面添加删除射流研究…代码

//添加按钮结束//删除按钮$('#btn_del ').单击(function(){ var selected=$ table。bootstraptable(' GetSelections ')；if ($(选中)。长度0) { BootstrapDialog.confirm('确定删除选中的$(选定)。'长度'位管理员，函数（结果){ if(结果){变量ids=新数组($(选中)。长度);$.每个（选定的，函数（索引，值){ ids[index]=value .administrator id })；$.帖子(' @ Url .操作(' DeleteJson '，' Admin '，{ ids: ids }，函数（数据){ if(数据。代码！=0){ bootstrapdialog。显示({消息：数据.消息，按钮：[{ icon : ' glyphicon-ok '，标签: '确定，操作：函数(dialogItself){ $ table。bootstraptable(' refresh ')；dialogitself。close()；} }] });} else BootstrapDialog.alert(数据。消息);}，' JSON ')；} });} else BootstrapDialog.warning('请选择要删除的行');});//删除按钮结束4、重置密码在管理控制器中添加ResetPassword(int id)方法。方法中将密码重置为尼尼微。

///摘要///重置密码【尼尼微】////summary ///param name='id '管理员ID/param///returns/returns[httpset]public JsonResult重置密码(int ID){ string _ password=' Ninesky '；Response _resp=adminManager .更改密码(id，安全性sha 256(密码));if (_resp .代码==1) _resp .消息='密码重置为：' _密码；返回JSON(_ resp)；}在添加脚本代码中表格代码段可以看到，这里通过连接的onclick调用ResetPassword方法，所以ResetPassword方法要放在表格生成前面，不然会出现方法未定义的错误。

这里把代码放到$(文档)。准备好的的前面。

脚本类型='text/javascript' //重置密码函数ResetPassword(id，accounts){ bootstrapdialog。确认('确定重置账户的密码，函数（结果){ if(结果){ $。帖子(' @ Url .操作(' ResetPassword '，' Admin '，{ id: id }，函数(数据){ BootstrapDialog.alert(数据。消息);}，' JSON ')；} });};//重置密码结束$(文档)。就绪（函数(){ //表格5、修改管理员密码在在管理控制器中添加MyInfo()方法。

///摘要///我的资料////summary////返回/返回公共操作结果MyInfo(){返回视图(adminManager)} .查找（会话['帐户'])。ToString()))；}右键添加视图

@模型尼尼微。核心。管理员@{视图包标题='我的资料；}@section SideNav{@Html .partial(' SideNavPartialView ')} ol class='面包屑' lispan class=' glyphicon glyphicon-home '/span @ Html .ActionLink('首页、“索引”、“主页”)/li li@Html .ActionLink('管理员、"索引"、"管理”/li li类="活动"我的资料/li/ol@Html .原始（视图包留言)@使用(Html .begin inform()){ @ Html .antiforyToken()div class=' form-horizontal ' @ Html .ValidationSummary(true，"，new { @ class=' text-danger ' })div class=' form-group ' @ Html .标签(型号=型号.Accounts，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .显示文本(型号=型号.accounts)/div/div class=' form-group ' @ Html .标签(型号=型号.密码，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .编辑(模型=模型.密码，new { HTMl Attributes=new { @ class=' form-control ' } })@ Html .ValidationMessageFor(model=model .密码'',新的{ @ class=' text-danger ' })/div/div class=' form-group ' @ Html .标签(型号=型号.LoginIP，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .显示文本(型号=型号.LoginIP)/div/div class=' form-group ' @ Html .标签(型号=型号.LoginTime，HTMl属性3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .显示文本(型号=型号.LoginTime)/div/div class=' form-group ' @ Html .标签(型号=型号.CreateTime，HTMl Attributes s 3360 new { @ class=' control-label col-MD-2 ' })div class=' col-MD-10 ' @ Html .显示文本(型号=型号.create TiME)/div/div class=' form-group ' div class=' col-MD-offset-2 col-MD-10 '输入类型='submit '值='保存=' BTNBTN-默认'/div/div/div } @节脚本{ @脚本.渲染(' ~/bundle/jqueryval ')}在在管理控制器中添加处理方法我的信息（表单集合表单)方法。

[validateantiforytoken][httpset]公共操作结果我的信息(表单集合表单){ var _admin=adminManager .查找（会话['帐户'])。ToString())；if (_admin .密码！=表单['密码]) { _admin .密码=安全性SHA256(表单['密码']);var _resp=adminManager .更改密码(_admin .AdministratorID，_admin .密码);if(_resp .代码==1)viewpag .message=' div class=\ ' alert alert-success '角色=\ ' alert ' span class=\ ' glyphicon-ok \ '/span修改密码成功！/div '；else ViewBag .message=' div class=\ ' alert alert-danger '角色=\ ' alert ' span class=\ ' glyphicon-remove \ '/span修改密码失败！/div '；}返回视图(_ admin)；}==========================================================

管理员功能到此写完。感慨一下：时间太少，熬夜到凌晨真不容易！代码见：https://九天。codeplex。com/源代码管理/最新代码下载：https://ninesky.codeplex.com点击源代码点击[计]下载下载源文件。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。