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

 

 

作者：薑敏
出處：http://www.cnblogs.com/aspnet2008/