asp.net MVC3之AJAX实现（json）

1.建一个mvc3的项目，取名叫MVC3Test

2.修改About.cshtml,如下代码

About.cshtml

   
   

    
    

     
      
    
    
    
    

     
     

      
      

       
       About.cshtml
      
      
     
     
    
    
    
    

     
     
      
      

       
       @{
    ViewBag.Title = "About Us";
}

       
       <
       
       script 
       
       type
       
       ="text/javascript"
       
       >
       
       

       
       

        
        
         
         

          
          $(
          
          function
          
           () {
        
          
          //
          
          get the schools
          
          

          
                  $.get(
          
          "
          
          /Home/GetSchools
          
          "
          
          , 
          
          function
          
           (data) {
            $(data).each(
          
          function
          
           () {
                
          
          var
          
           o 
          
          =
          
           document.createElement(
          
          "
          
          option
          
          "
          
          );
                o.value 
          
          =
          
           
          
          this
          
          [
          
          '
          
          Id
          
          '
          
          ];
                o.text 
          
          =
          
           
          
          this
          
          [
          
          '
          
          Name
          
          '
          
          ];
                $(
          
          "
          
          #sltSchool
          
          "
          
          )[
          
          0
          
          ].options.add(o);
            });
        });

        
          
          //
          
           Get the departments depend on the school
          
          

          
                  $(
          
          "
          
          #sltSchool
          
          "
          
          ).change(
          
          function
          
           () {
            
          
          //
          
           initialization the select
          
          

          
                      $(
          
          "
          
          #sltDepartment
          
          "
          
          ).empty();
            
          
          var
          
           _o 
          
          =
          
           document.createElement(
          
          "
          
          option
          
          "
          
          );
            _o.value 
          
          =
          
           
          
          "
          
          -1
          
          "
          
          ;
            _o.text 
          
          =
          
           
          
          "
          
          select...
          
          "
          
          ;
            $(
          
          "
          
          #sltDepartment
          
          "
          
          )[
          
          0
          
          ].options.add(_o);

            $.get(
          
          "
          
          /Home/GetDepartments
          
          "
          
          , { schoolId: $(
          
          "
          
          #sltSchool
          
          "
          
          ).val() }, 
          
          function
          
           (data) {
                $(data).each(
          
          function
          
           () {
                    
          
          var
          
           o 
          
          =
          
           document.createElement(
          
          "
          
          option
          
          "
          
          );
                    o.value 
          
          =
          
           
          
          this
          
          [
          
          '
          
          Id
          
          '
          
          ];
                    o.text 
          
          =
          
           
          
          this
          
          [
          
          '
          
          Name
          
          '
          
          ];
                    $(
          
          "
          
          #sltDepartment
          
          "
          
          )[
          
          0
          
          ].options.add(o);
                });
            });
        });
    });
          
          

          
          </
          
          script
          
          >
          
          

          
          <
          
          div
          
          >
          
          
    
          
          <
          
          h2
          
          >
          
          
        About
          
          </
          
          h2
          
          >
          
          
    
          
          <
          
          p
          
          >
          
          
        Put content here.
    
          
          </
          
          p
          
          >
          
          
    
          
          <
          
          div
          
          >
          
          
        
          
          <
          
          span
          
          >
          
          
            
          
          <
          
          label
          
          >
          
          
                School :
            
          
          </
          
          label
          
          >
          
          
            
          
          <
          
          select 
          
          id
          
          ="sltSchool"
          
          >
          
          
                
          
          <
          
          option 
          
          value
          
          ="-1"
          
          >
          
          select...
          
          </
          
          option
          
          >
          
          
            
          
          </
          
          select
          
          ></
          
          span
          
          >
          
           
          
          <
          
          span 
          
          style
          
          ="margin-left: 50px"
          
          >
          
          
                
          
          <
          
          label
          
          >
          
          
                    Department :
          
          </
          
          label
          
          >
          
          
                
          
          <
          
          select 
          
          id
          
          ="sltDepartment"
          
          >
          
          
                    
          
          <
          
          option 
          
          value
          
          ="-1"
          
          >
          
          select...
          
          </
          
          option
          
          >
          
          
                
          
          </
          
          select
          
          >
          
          
            
          
          </
          
          span
          
          >
          
          
    
          
          </
          
          div
          
          >
          
          

          
          </
          
          div
          
          >
         
         
       
       
      
      
    
    
   
   

3.创建几个model

 (1) TestSchool.cs

TestSchool

   
   

    
    using
    
     System;

    
    using
    
     System.Collections.Generic;

    
    using
    
     System.Linq;

    
    using
    
     System.Web;


    
    namespace
    
     MVC3Test.Models
{
    
    
    public
    
     
    
    class
    
     TestSchool
    {
        
    
    public
    
     
    
    int
    
     Id { 
    
    get
    
    ; 
    
    set
    
    ; }
        
    
    public
    
     
    
    string
    
     Name { 
    
    get
    
    ; 
    
    set
    
    ; }
    }
}
   
   

 (2) TestSchoolDepartment.cs

TestSchoolDepartment.cs

    
    

     
     using
     
      System;

     
     using
     
      System.Collections.Generic;

     
     using
     
      System.Linq;

     
     using
     
      System.Web;


     
     namespace
     
      MVC3Test.Models
{
    
     
     public
     
      
     
     class
     
      TestSchoolDepartment
    {
        
     
     public
     
      
     
     int
     
      Id { 
     
     get
     
     ; 
     
     set
     
     ; }
        
     
     public
     
      
     
     int
     
      SchoolId { 
     
     get
     
     ; 
     
     set
     
     ; }
        
     
     public
     
      
     
     string
     
      Name { 
     
     get
     
     ; 
     
     set
     
     ; }
    }
}
    
    

 (3) TestModels.cs

TestModels.cs

    
    

     
     using
     
      System;

     
     using
     
      System.Collections.Generic;

     
     using
     
      System.Linq;

     
     using
     
      System.Web;


     
     namespace
     
      MVC3Test.Models
{
    
     
     public
     
      
     
     class
     
      TestModels
    {
        
     
     public
     
      
     
     static
     
      List
     
     <
     
     TestSchool
     
     >
     
      GetAllSchools()
        {
            
     
     return
     
      
     
     new
     
      List
     
     <
     
     TestSchool
     
     >
     
     ()
            {
                
     
     new
     
      TestSchool{Id
     
     =
     
     1
     
     ,Name
     
     =
     
     "
     
     ABC
     
     "
     
     },
                
     
     new
     
      TestSchool{Id
     
     =
     
     2
     
     ,Name
     
     =
     
     "
     
     DEF
     
     "
     
     },
                
     
     new
     
      TestSchool{Id
     
     =
     
     3
     
     ,Name
     
     =
     
     "
     
     HIJ
     
     "
     
     },
                
     
     new
     
      TestSchool{Id
     
     =
     
     4
     
     ,Name
     
     =
     
     "
     
     LMN
     
     "
     
     }
            };
        }

        
     
     public
     
      
     
     static
     
      List
     
     <
     
     TestSchoolDepartment
     
     >
     
      GetAllDepartment()
        {
            
     
     return
     
      
     
     new
     
      List
     
     <
     
     TestSchoolDepartment
     
     >
     
     ()
            {
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     1
     
     ,SchoolId
     
     =
     
     1
     
     ,Name
     
     =
     
     "
     
     ABC_D1
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     2
     
     ,SchoolId
     
     =
     
     1
     
     ,Name
     
     =
     
     "
     
     ABC_D2
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     3
     
     ,SchoolId
     
     =
     
     1
     
     ,Name
     
     =
     
     "
     
     ABC_D3
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     4
     
     ,SchoolId
     
     =
     
     2
     
     ,Name
     
     =
     
     "
     
     DEF_D1
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     5
     
     ,SchoolId
     
     =
     
     2
     
     ,Name
     
     =
     
     "
     
     DEF_D2
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     6
     
     ,SchoolId
     
     =
     
     3
     
     ,Name
     
     =
     
     "
     
     HIJ_D1
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     7
     
     ,SchoolId
     
     =
     
     3
     
     ,Name
     
     =
     
     "
     
     HIJ_D2
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     8
     
     ,SchoolId
     
     =
     
     3
     
     ,Name
     
     =
     
     "
     
     HIJ_D3
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     9
     
     ,SchoolId
     
     =
     
     3
     
     ,Name
     
     =
     
     "
     
     HIJ_D4
     
     "
     
     },
                
     
     new
     
      TestSchoolDepartment{Id
     
     =
     
     10
     
     ,SchoolId
     
     =
     
     4
     
     ,Name
     
     =
     
     "
     
     LMN_D1
     
     "
     
     }
            };
        }

        
     
     public
     
      
     
     static
     
      List
     
     <
     
     TestSchoolDepartment
     
     >
     
      GetDepartmentBySchoolId(
     
     int
     
      schoolId)
        {
            List
     
     <
     
     TestSchoolDepartment
     
     >
     
      testSchoolDepartment 
     
     =
     
      
     
     new
     
      List
     
     <
     
     TestSchoolDepartment
     
     >
     
     ();
            
     
     foreach
     
      (TestSchoolDepartment department 
     
     in
     
      GetAllDepartment())
            {
                
     
     if
     
      (department.SchoolId 
     
     ==
     
      schoolId)
                {
                    testSchoolDepartment.Add(department);
                }
            }
            
     
     return
     
      testSchoolDepartment;
        }
    }
}
    
    

4.由于About是在Home页面里的，所以它的controller应该在HomeController里，我们添加两个controller，如下：

HomeController.cs

    
    

     
     using
     
      System;

     
     using
     
      System.Collections.Generic;

     
     using
     
      System.Linq;

     
     using
     
      System.Web;

     
     using
     
      System.Web.Mvc;

     
     using
     
      MVC3Test.Models;

     
     using
     
      System.Text;


     
     namespace
     
      MVC3Test.Controllers
{
    
     
     public
     
      
     
     class
     
      HomeController : Controller
    {
        
     
     public
     
      ActionResult Index()
        {
            ViewBag.Message 
     
     =
     
      
     
     "
     
     Welcome to ASP.NET MVC!
     
     "
     
     ;

            
     
     return
     
      View();
        }

        
     
     public
     
      ActionResult About()
        {
            
     
     return
     
      View();
        }


     
     

      
      
       
       

        
                public
        
         JsonResult GetSchools()
        {
            
        
        return
        
         
        
        Json(TestModels.GetAllSchools (),JsonRequestBehavior.AllowGet);
        }

        
        
        public
        
         JsonResult GetDepartments(
        
        int
        
         schoolId)
        {
            
        
        return
        
         
        
        Json(TestModels.GetDepartmentBySchoolId(schoolId),JsonRequestBehavior.AllowGet);
        }
       
       
     
     
     
         }}
    
    

好了，所有的代码都已完成，现在只要编译、运行项目即可。