asp.net MVC3之AJAX实现（json）

2024-02-15 13:08

文章标签 实现 json asp net ajax mvc3

本文主要是介绍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);}
    }}