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);
}
好了，所有的代碼都已完成，現在只要編譯、運行項目即可。