asp.net mvc(八)
ASP.NET MVC正式版都已经出来很长时间了,但一直没有用它做具体项目,所以之前的学习记录仅限于自娱自乐。去年年底开始,赶上公司开始重构所有原来的老项目,技术正好选用了ASP.NET MVC,重构组的同事为我们开发人员更高效的利用MVC模式开发,整理出一些公共模块供开发人员调用,减少开发人员自我学习的成本。
从今天开始我会陆续把我认为的一些不错的技术分享给大家,同时由于都属于学习阶段,所以提供的方案并不一定有多优化,如有问题大家请多多指教。
这一篇,我来分享下MVC下如何快速开发ajax程序。
话说开发ajax程序非常简单,就算自己写ajax处理程序也不用花多少时间,相关内容可参考 写一个ajax程序就是如此简单 ,如果采用一些成熟的js框架,例如jquery,prototype 等,更加会事半功倍。在用传统的web form方式时,我们都需要创建一个aspx页面(或者ashx)以及后台代码来处理这些ajax请求,但有了MVC,我们就没有必要单独创建这样的文件了,因为ajax请求的方法可以和页面的controller类放在一起。不知道大家有没有用过ajaxpro,.net2.0时我网上搜的一个基于服务端的ajax实现方案。它能让开发者通过js直接异步调用页面后台代码,且调用的方法可以和页面类放在一起,一般是在需要调用的方法前加一个AjaxMothod的特性标签。单从开发员实现角度来说,非常方便,开发员并不用关心它的实现方法。
MVC有个特点,一般情况下一个页面文件都会对应一个Controller,类似于web form模式下的页面后台代码。Conntroller里面的每个公共方法(私有方法不行)都可以通过页面地址中访问,例如我们在HomeController中有这样一个方法:
{
System .Web .HttpContext .Current .Response .Write ("aaa"+i .ToString ());
}
我们可以在浏览器中输入/Home/Test?i=1,此时页面上就会输出我们想要的内容,这也是web form模式没有办法直接实现的。即然MVC能够直接调用Controller中的方法,也就是我们不用单独创建一些类来实现,这点和ajaxpro的功能有点相似。下面我们就来实现在asp.net mvc中应用ajax,当然我选用jquery做为js框架,熟悉jquery的朋友看起来就非常容易了。
1:创建一个学生类的集合,学生类结构如下:
{
public string sname { get; set; }
public int ID { get; set; }
public int Grade { get; set; }
}
2:写一个根据学生ID查找学生信息的方法。这里注意下,这个方法的返回类型为JsonResult,它能够给客户端以json类型输出数据(MVC能够把目标对象转换成json格式),这个和平时常见的ActionResult有所区别。
{
int I = 0;
List<student> list = new List<student>();
for (int k = 0; k < 10; k++)
{
student sd = new student() { sname = "aaa" + k.ToString() + j.ToString(), ID = k, Grade = k * 10 };
list.Add(sd);
}
var stu = (from m in list
where m.ID == i
select m
).FirstOrDefault();
JsonResult J = new JsonResult();
J.Data = stu;
return J;
}
3:客户端代码:从后台取得数据后,填充到div中。
function(data) {
$("#divStudent").html(data.sname);
}
);
分析:以上三步基本上就可以实现一般的ajax程序,如有不同,也只可能是程序写法问题,大体流程都差不多应该相同。这种写法已经非常简洁了,但还有可以提高的地方。
第一:开发人员需要拼接ajax请求的地址。本例中为Home/TestMVC
第二:开发人员需要准备构建ajax方法使用的data参数。本例中为,{i:1,j:2}
解决思路:让程序自动为我们完成上面两步。可以参考ajaxpro的实现原理,每个方法异步请求的方法上加一个自定义特性标签,编译器遇到自定义标签后,自动生成一些js方法,来让开发者前端调用更加方便。例如生成如下代码:i,j分别是异步请求方法的两个参数,callback为异步请求后的回调方法。
TestMVC: function(i, j,callback)
{
$.getJSON('/Home/TestMVC?id=&',{i:i, j:j}, callback);
}
}
我们可以这样调用:我们只需要输入相应参数,以及完成回调方法即可。是不是简单了点。下一篇来讲讲具体实现方法。
$("#divStudent").html(data.sname);
});