.Net MVC3之1：前台异步获取json数据的实例(1)
在mvc3中，最让人称道的当然还是路由的方便与先进之处，类似于java中的mvc，加载每一个页面（包括首页），都要先运行该页面对应的后台controller，处理页面的初始化数据（mvc中的数据传递问题这里不再讲述）、域名读取、权限操作等，然后返回相应的页面。本篇文章讲述如何从mvc的前台页面中异步获取后台的json数据。
1.建一个mvc3的项目，取名叫MVC3Test（事先安装mvc3 version：1.13.113.0）
2.修改About.cshtml,如下代码
按 Ctrl+C 复制代码
About.cshtml @{ ViewBag.Title = "About Us"; } <script type="text/javascript"> $(function () { $.ajax({ url: "/Home/GetSchools", type: "POST", contentType: "application/json; charset=utf-8", data: "{}", dataType: "json", success: function (data) { $("#sltSchool").empty(); $("#sltSchool").html(data); }, error: function ErrorCallback(XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown +":"+ textStatus); } }); // Get the departments depend on the school $("#sltSchool").change(function () { GetDepartments($("#sltSchool").val()); }); }); function GetDepartments(sId) { $.ajax({ url: "/Home/GetSecondCatalog", type: "POST", contentType: "application/json; charset=utf-8", data: "{schoolId:"+sId+"}", dataType: "json", success: function (data) { $('#sltDepartment').empty(); $('#sltDepartment').html(data); }, error: function ErrorCallback(XMLHttpRequest, textStatus, errorThrown) { alert(errorThrown +":"+ textStatus); } }); } </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>
按 Ctrl+C 复制代码
3.创建几个model
(1) TestSchool.cs
按 Ctrl+C 复制代码
TestSchool 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; } } }
按 Ctrl+C 复制代码
(2) TestSchoolDepartment.cs
按 Ctrl+C 复制代码
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; } } }
按 Ctrl+C 复制代码
(3) TestModels.cs
按 Ctrl+C 复制代码
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; } } }
按 Ctrl+C 复制代码
4.由于About是在Home页面里的，所以它的controller应该在HomeController里，我们添加两个controller，如下：
按 Ctrl+C 复制代码
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 { publicclass HomeController : Controller { public ActionResult Index() { ViewBag.Message ="Welcome to ASP.NET MVC!"; return View(); } public ActionResult About() { return View(); } [HttpPost] public JsonResult GetSchools() { StringBuilder sb =new StringBuilder(); sb.Append("<option value=\"-1\">select...</option>"); foreach (var item in TestModels.GetAllSchools()) { sb.AppendFormat("<option value=\"{0}\">{1}</option>", item.Id, item.Name); } string result = sb.ToString(); returnthis.Json(result, JsonRequestBehavior.AllowGet); } [HttpPost] public JsonResult GetSecondCatalog(int schoolId) { StringBuilder sb =new StringBuilder(); sb.Append("<option value=\"-1\">select...</option>"); foreach (var item in TestModels.GetDepartmentBySchoolId(schoolId)) { sb.AppendFormat("<option value=\"{0}\">{1}</option>", item.Id, item.Name); } string result = sb.ToString(); returnthis.Json(result, JsonRequestBehavior.AllowGet); } } }
按 Ctrl+C 复制代码
好了，所有的代码都已完成，现在只要编译、运行项目即可。
……欢迎留言！！