快速开发Ajax程序

http://www.pin5i.com/showtopic-26967.html

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中有这样一个方法：
public void Test(int i)
{
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 class student
{
public string sname { get; set; }
public int ID { get; set; }
public int Grade { get; set; }
}
复制代码
2：写一个根据学生ID查找学生信息的方法。这里注意下，这个方法的返回类型为JsonResult,它能够给客户端以json类型输出数据(MVC能够把目标对象转换成json格式),这个和平时常见的ActionResult有所区别。
public JsonResult TestMVC(int i, int j)
{
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中。
$.getJSON('/Home/TestMVC',{i:1,j:2},
function(data) {
$("#divStudent").html(data.sname);
}
);
复制代码
分析:以上三步基本上就可以实现一般的ajax程序，如有不同，也只可能是程序写法问题，大体流程都差不多应该相同。这种写法已经非常简洁了，但还有可以提高的地方。

第一：开发人员需要拼接ajax请求的地址。本例中为Home/TestMVC
第二：开发人员需要准备构建ajax方法使用的data参数。本例中为,{i:1,j:2}

解决思路：让程序自动为我们完成上面两步。可以参考ajaxpro的实现原理，每个方法异步请求的方法上加一个自定义特性标签，编译器遇到自定义标签后，自动生成一些 js方法，来让开发者前端调用更加方便。例如生成如下代码：i,j分别是异步请求方法的两个参数，callback为异步请求后的回调方法。
var HomeController = {
TestMVC: function(i, j,callback)
{
$.getJSON('/Home/TestMVC?id=&',{i:i, j:j}, callback);
}
}
复制代码
我们可以这样调用：我们只需要输入相应参数，以及完成回调方法即可。是不是简单了点。下一篇来讲讲具体实现方法。（文/姜敏）
HomeController.TestMVC(j,j+1, function(data) {
$("#divStudent").html(data.sname);
});