asp.net MVC3之AJAX实现（json）

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

2.修改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

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

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

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，如下：

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

}}

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