asp.net MVC3之AJAX实现（json）

<wbr><h3 style="margin: 0px; padding: 0px; display: inline; font-weight: normal; font-size: 20px; vertical-align: middle;"> <span><a href="http://blog.csdn.net/sunchengwei/article/details/6675556">asp.net MVC3之AJAX实现（json）</a></span> </h3> </wbr>

分类：<wbr><a href="http://blog.csdn.net/sunchengwei/article/category/873608">Asp.net MVC</a></wbr> 2011-08-10 13:55<wbr><span title="阅读次数" style="margin: 0px 5px; padding: 0px 0px 0px 14px; background-image: url(http://static.blog.csdn.net/images/ico_view.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat;">1220人阅读</span><wbr><span title="评论次数" style="margin: 0px 5px; padding: 0px 0px 0px 14px; background-image: url(http://static.blog.csdn.net/images/ico_comm.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat;"><a href="http://blog.csdn.net/sunchengwei/article/details/6675556#comments">评论</a>(0)</span><wbr><span style="margin: 0px 5px;"><a href="http://blog.csdn.net/sunchengwei/article/details/6675556" title="收藏">收藏</a></span><wbr><span style="margin: 0px 5px;"><a href="http://blog.csdn.net/sunchengwei/article/details/6675556#report" title="举报">举报</a></span></wbr></wbr></wbr></wbr>

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

2.修改About.cshtml,如下代码

About.cshtml

<wbr></wbr>

About.cshtml

@{
    ViewBag.Title = "About Us";
}
<</span>script type="text/javascript">

$(function () {
        //get the schools
        $.get("/Home/GetSchools", function (data) {
            $(data).each(function () {
                var o = document.createElement_x("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_x("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_x("option");
                    o.value = this['Id'];
                    o.text = this['Name'];
                    $("#sltDepartment")[0].options.add(o);
                });
            });
        });
    });
</</span>script>
<</span>div>
    <</span>h2>
        About</</span>h2>
    <</span>p> Put content here. </</span>p> <</span>div> <</span>span> <</span>label> School : </</span>label> <</span>select id="sltSchool"> <</span>option value="-1">select...</</span>option> </</span>select></</span>span> <</span>span style="margin-left: 50px"> <</span>label> Department :</</span>label> <</span>select id="sltDepartment"> <</span>option value="-1">select...</</span>option> </</span>select> </</span>span> </</span>div> </</span>div>

3.创建几个model

<wbr>(1) TestSchool.cs</wbr>

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

<wbr>(2) TestSchoolDepartment.cs</wbr>

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

<wbr>(3) TestModels.cs</wbr>

TestModels.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVC3Test.Models
{
    public class TestModels
    {
        public static List<</span>TestSchool> GetAllSchools()
        {
            return new List<</span>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<</span>TestSchoolDepartment> GetAllDepartment()
        {
            return new List<</span>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<</span>TestSchoolDepartment> GetDepartmentBySchoolId(int schoolId) { List<</span>TestSchoolDepartment> testSchoolDepartment = new List<</span>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);
        }

    }}

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