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.youkuaiyun.com/sunchengwei/article/details/6675556">asp.net MVC3之AJAX实现（json）</a></span> </h3> </wbr>

分类：<wbr><a href="http://blog.youkuaiyun.com/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.youkuaiyun.com/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.youkuaiyun.com/images/ico_comm.png); background-position: 0% 50%; background-repeat: no-repeat no-repeat;"><a href="http://blog.youkuaiyun.com/sunchengwei/article/details/6675556#comments">评论</a>(0)</span><wbr><span style="margin: 0px 5px;"><a href="http://blog.youkuaiyun.com/sunchengwei/article/details/6675556" title="收藏">收藏</a></span><wbr><span style="margin: 0px 5px;"><a href="http://blog.youkuaiyun.com/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);
        }

    }}

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