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中有这样一个方法:
        

        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 { getset; }
        
public int ID { getset; }
        
public int Grade { getset; }
    }

 

     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);
             });

 

 

 

posted on 2010-03-07 08:04  min.jiang  阅读(2692)  评论(6编辑  收藏  举报