.Net MVC3之1：前台异步获取json数据的实例(1)

我就是我 2023-02-25 08:35 27阅读 0赞

在mvc3中，最让人称道的当然还是路由的方便与先进之处，类似于java中的mvc，加载每一个页面（包括首页），都要先运行该页面对应的后台controller，处理页面的初始化数据（mvc中的数据传递问题这里不再讲述）、域名读取、权限操作等，然后返回相应的页面。本篇文章讲述如何从mvc的前台页面中异步获取后台的json数据。

1.建一个mvc3的项目，取名叫MVC3Test（事先安装mvc3 version：1.13.113.0）

![2011051713133853.jpg][]

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 复制代码

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

……欢迎留言！！

[2011051713133853.jpg]: /images/20230209/7780ce5c063646df8a496a15a3559ee1.png