asp.net MVC3之AJAX实现（json）

        asp.net MVC3之AJAX实现（json）             

        分类：             Asp.net MVC              2011-08-10 13:55     2272人阅读     评论(0)     收藏     举报    

mvcasp.netjsonajaxfunctioninitialization

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 { publicclass TestSchool { publicint Id { get; set; } publicstring Name { get; set; } } }

 (2) TestSchoolDepartment.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC3Test.Models { publicclass TestSchoolDepartment { publicint Id { get; set; } publicint SchoolId { get; set; } publicstring Name { get; set; } } }

 (3) TestModels.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVC3Test.Models { publicclass TestModels { publicstatic List<TestSchool> GetAllSchools() { returnnew 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"} }; } publicstatic List<TestSchoolDepartment> GetAllDepartment() { returnnew 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"} }; } publicstatic 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 { publicclass HomeController : Controller { public ActionResult Index() { ViewBag.Message ="Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { return View(); }

public JsonResult GetSchools() { returnJson(TestModels.GetAllSchools (),JsonRequestBehavior.AllowGet); } public JsonResult GetDepartments(int schoolId) { returnJson(TestModels.GetDepartmentBySchoolId(schoolId),JsonRequestBehavior.AllowGet); }

}}

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