1.建一个mvc3的项目,取名叫MVC3Test(事先安装mvc3 version:1.13.113.0)
2.修改About.cshtml,如下代码
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>
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,如下:
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();
}
[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();
return this.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();
return this.Json(result, JsonRequestBehavior.AllowGet);
}
}
}