现在来完成删除功能。目前的Grid,一次只能选择一行,也就是说,一次只能删除一行,不太方便,因而要设置成使用复选框选择,并允许多选的。在用户视图脚本文件中,添加以下配置项实现这个:
selType: "checkboxmodel",
selModel:{ checkOnly: false, mode: "MULTI" },
打开页面浏览,会看到如图29所示的效果,已经可以在最左边通过复选框进行行选择了。
图29 添加了复选框选择行的Grid
删除用户的方式有2种,一种是先使用remove方法在Store中删除记录,然后调用sync方法同步,一种是提取选择行的id,然后通过Ajax方式提交到服务器进行删除,确认后再在客户端刷新页面。第一种方式必须在proxy的api定义中定义destroy配置项,之前的代码中已经定义了,因而本示例将使用该方式。第二种方式如果也定义了destroy配置项,就千万别用remove删除Store的记录,不然在添加或编辑的时候,调用sync方法进行同步的时候会把删除记录的数据一起提交的。选用那种方法,看喜好吧!呵呵。
现在切换到Users控制器的脚本,为删除按钮绑定单击事件,代码如下:
me.getButtonUserDelete().on("click",me.onDeleteUser, me);
在onDeleteUser方法内,要先从Store的选择模型获取选择的记录。如果有选择记录,则先提示用户是否真的删除用户。确认后,调用remove方法删除记录,并调用sync方法同步数据,如果成功,调用commitChanges方法确认修改,否则调用rejectChanges方法取消修改。具体代码如下:
onDeleteUser: function () {
var me = this,
sm =me.getUserView().getSelectionModel();
if (sm.getCount() > 0){
var rs =sm.getSelection();
content = ["确定删除以下用户?"];
for (var i = 0; ln =rs.length, i < ln; i++) {
content.push(rs[i].data.Username);
}
Ext.Msg.confirm("删除用户", content.join("<br/>"), function (btn) {
if(btn == "yes") {
varme = this,
rs =me.getUserView().getSelectionModel().getSelection()
store = me.getUsersStore();
store.remove(rs);
store.sync({
success: function (e, opt) {
var me = this;
me.getUsersStore().commitChanges();
},
failure: function (e, opt) {
var me = this;
me.getUsersStore().rejectChanges()
Ext.Msg.alert("发生错误", e.exceptions[0].error);
},
scope: me
});
}
}, me)
} else {
Ext.Msg.alert('删除用户', '请选择要删除的用户。');
}
}
代码中,使用了数组content来组合确认信息。当用户确认后,就调用remove方法,并调用sync方法。
现在来完成服务器端代码。因为sync方法提交数据的方式是固定的,因而提取删除数据的方式与添加和编辑操作的一样,需要从data中提取数据,然后使用parse方法转换为JArray。余下的工作就是从JArray中提取出删除数据的JObject,通过id或Username去删除用户了,具体代码如下:
public JObject Delete()
{
string msg = "";
bool success = false;
JArray ja = null;
string data = Request["data"] ?? "";
if (string.IsNullOrEmpty(data))
{
msg = "错误的提交数据。";
}
try
{
ja = JArray.Parse(data);
if(ja.Count > 0)
{
foreach (JObject jo in ja)
{
Membership.DeleteUser((string)jo["Username"]);
}
success = true;
}
else
{
msg = "错误的提交数据。";
}
}
catch (Exception e)
{
msg = e.Message;
}
return MyFunction.WriteJObjectResult(success,0, msg, ja);
}
这里要注意的是,和添加编辑操作一样,尽管success返回true,还是要把删除的数据返回。因为删除不需要改变原有的数据,因而直接将ja返回就行了。
还有2个问题要自己考虑清楚。第1个是删除后是否提示用户已删除记录,如果需要,在sync方法内的回调函数success内加入提示信息就可以了。第2个问题是,因为删除数据后,Grid内的数据会减少,是否需要刷新页面?
最后一个功能重置密码与删除用户差不多,也是从选择模型获取选择记录。不过,这次,不能用sync同步,只能通过提取id,然后使用Ajax方法提交数据了。先为重置密码按钮绑定单击事件,代码如下:
me.getButtonUserResetPassword().on("click",me.onResetPassword, me);
接着完成onResetPassword方法,代码如下:
onResetPassword: function () {
var me = this,
rs = me.getUserView().getSelectionModel().getSelection();
if (rs.length > 0) {
var idList = [];
for (var i = rs.length - 1; i>= 0; i--) {
idList.push(rs[i].data.id);
}
Ext.Ajax.request({
params: { id: idList },
url: '/Users/ResetPassword',
scripts: true,
scope: me,
success: function (response, opt) {
varobj = Ext.JSON.decode(response.responseText);
if(obj) {
if (obj.success) {
Ext.Msg.alert("提示信息", "重置密码成功");
return;
} else {
Ext.Msg.alert("错误",obj.Msg);
}
}
},
failure: function (response, options) {
Ext.Msg.alert("错误", "重置密码失败!<br>错误信息:" + response.responseText);
}
});
}
}
代码中,没有进行确认,如果需要,可自行添加。因为Ajax提交不是根据返回的success值来调用success方法或failure方法的,只要不是页面错误,都会执行回调函数success方法,因而要自己根据返回的数据,调用decode方法将数据转换为对象,然后根据success的值来做处理。
下面,完成服务器端的ResetPassword方法。在这里,有个麻烦,就是ChangePassword方法需要使用旧密码才能修改新买,而ResetPassword方法会随机生成一个密码,都不能直接将密码设置为123456,因而,需要先用ResetPassword方法重置密码后,然后利用这个重置的密码,调用ChangePassword方法将密码修改为123456,具体代码如下:
public JObject ResetPassword()
{
bool success=false;
string msg="";
string idList = Request["id"] ?? "";
try
{
string[] ids = idList.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
foreach (var c in ids)
{
Guid id=Guid.Parse(c);
MembershipUser user = Membership.GetUser(id);
if(user != null)
{
string pwd =user.ResetPassword();
user.ChangePassword(pwd, "123456");
}
}
success=true;
}
catch (Exception e)
{
msg=e.Message;
}
return MyFunction.WriteJObjectResult(success,0, msg, null);
}
用户管理的基本功能就已经全部完成了,不过还有一个问题要解决,就是控制服务器端用户控制器的权限问题。这个在Asp.Net MVC中很容易实现,使用Authorize特性声明方法就能解决了,代码如下:
[Authorize(Roles="系统管理员")]
不过,这里存在的问题,返回的错误信息不是JSON格式的,因而在客户端处理会出问题,因而需要自定义一个返回JSON格式的认证特性。要实现这个不难,从AuthorizeAttribute派生出一个AjaxAuthorizeAttribute类,并重写HandleUnauthorizedRequest方法就可以了。
先在解决方案下添加一个名为Validations的目录。然后在该目录下添加一个名为AjaxAuthorizeAttribute.cs的类文件,生成代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
namespace SimpleCMS.Validations
{
public class AjaxAuthorizeAttribute
{
}
}
先修改类结构,让AjaxAuthorizeAttribute类派生于AuthorizeAttribute,修改后代码如下:
public classAjaxAuthorizeAttribute : AuthorizeAttribute
{
}
这时会提示缺少引用,把以下引用加入就行了:
现在,在类内添加重写HandleUnauthorizedRequest方法的代码,代码如下:
protected override voidHandleUnauthorizedRequest(AuthorizationContext filterContext)
{
}
方法中传入的参数就是要进行验证的上下文。判断上下文中Request对象的IsAjaxRequest方法,就可知道提交的是否Ajax请求,如果是,就构造一个JSON结果返回就行了。具体代码如下:
if(filterContext.HttpContext.Request.IsAjaxRequest())
{
UrlHelperurlHelper = new UrlHelper(filterContext.RequestContext);
filterContext.Result = new JsonResult
{
Data= new
{
success = false,
Msg = "您没有权限访问该页。"
},
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
}
else
{
base.HandleUnauthorizedRequest(filterContext);
}
好了,在控制器内加入对Validations的引用,并在所有方法上添加以下特性:
[AjaxAuthorize(Roles="系统管理员")]
这样,就可以控制访问权限了,要测试是否成功,可以将重置密码的那段Ajax请求复制到Firebug的命令行,把idList修改为1,删除“scope:me”。在运行前,先检查是否已经退出了系统,保证处于没登录状态。单击运行后,就看到如图30所示的结果,在Firebug内,会看到返回的结果,正是在AjaxAuthorizeAttribute类定义的返回结果。
图30 测试权限
至此,用户管理功能就完成了。
源代码:http://download.csdn.net/detail/tianxiaode/4606230
分享到:
相关推荐
《一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目》的项目文件
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(2)源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(2) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(4) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建Viewport(1)
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之数据库文件
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口调试代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之用户管理(3) 源代码
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之调整首页显示
ext asp.net mvc nhibernate 完整项目示例
本例采用ASP.NET MVC3 +EXTJS4 MVC 框架,完美实现了EXTJS4动态加载JS文件,对ASP.NET MVC3及EXTJS4 MVC 各应用要点进行了应用。对于想采用ASP.NET MVC3 +EXTJS4 MVC 框架的学习者有很好的帮助,快速掌握MVC框架,本...
本资源为学习asp.net mvc+ext js的用户提供一个简单的增、删、改功能。通过此例子对MVC和Ext js有一个初步的认识,压缩包内的mvcStudent.sql为数据库脚本。
extasp.net 是个不错的asp.net 源码,mvc+ext+三层架构
本源代码包来源于Ext.NET官方网站,于2012-07-24日发布,可以用Visual Studio 2010打开后进行编译,但需要先安装ASP.NET MVC3。此源代码包目前官网上已经没有下载了!目前官网的最新版本是2.1.1,但是有BUG。 本源...
Ext.Direct.Mvc是ASP.NET Mvc.的Ext Direct服务器端堆栈的实现.zip
可以快速上手开发企业的信息管理系统,也可提供oracle 11g版本框架非常适合二次开发人员使用, 强烈推荐一下,感兴趣的欢迎下载看看啊。 二、框架简介 1、数据持久层使用IBatis.Net ORM 映射框架, 提供了较为灵活...
程序结构是asp.net MVC,使用EXT3.1,从服务器端读取数据 运行前先建一个ext3.1的虚拟目录 说明:treegrid中数据的关系: RoleType表: RoleTyptID RoleTypeName 1 系统管理 2 管理员 Role表: RoleID ...
Quickly Build Rich AJAX Enabled Web Applications For ASP.NET Ext.NET is an open source ASP.NET (WebForm + MVC) component framework integrating the cross-browser Sencha Ext JS JavaScript Library
在ASP.NET mvc模式下使用Extjs搭建的框架页面代码