Json Ajax 在Mvc中的简单运用

闲来无事，把以前写的Ajax及Json在 Mvc1.0 及2.0 中的运用写下来，供大家分享

Ajax及Json在Mvc中主要用于控件联动，如选择班级时，自动列出该班级下的学生

1、建立一个Mvc1.0项目，添加对DB.dll的引用

2、添加StudentController,输入以下代码

DB.Entity.StudentDBEntities context = new DB.Entity.StudentDBEntities();

public ActionResult JsonTest()
{
ViewData["Classes"] = context.Classes;
return View();
}

3、添加AjaxRequestController，输入以下代码

public JsonResult GetStudents(int classesId)
{
using (DB.Entity.StudentDBEntities context = new DB.Entity.StudentDBEntities())
{
return this.Json(context.Students.Where(row=>row.Classes.ClassesId==classesId)
.Select(row=> new {id=row.StudentId,name=row.StudentName}).ToList());
}

}

4、添加StudentController 下JsonTest 对应的视图，并输入以下代码

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="<%=VirtualPathUtility.ToAbsolute("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

function ResetStudents() {
var Classes = document.getElementById("Classes");
var path = "<%=HttpContext.Current.Request.ApplicationPath %>";
if (path != "/")
path = path + "/";

$.post(path + "AjaxRequest/GetStudents", { classesId: Classes.value }, ResetStudentsComplete);
}

function ResetStudentsComplete(jsonValues) {

var control = document.getElementById("Students");
var newOpt;
control.innerHTML = "";
var myjsonValues = eval("(" + jsonValues + ")");//在MVC1.0中，需要进行此转换，在Mvc2.0中已经不需要此转换
control.options.add(new Option("所有", ""));
for (var i = 0; i < myjsonValues.length; i++) {
newOpt = new Option(myjsonValues[i].name, myjsonValues[i].id);
control.options.add(newOpt);
}
}
</script>

<% IEnumerable<DB.Entity.Classes> classes = ViewData["Classes"] as IEnumerable<DB.Entity.Classes>; %>

<select name="Classes" id="Classes" onchange="ResetStudents()">
<option value="">所有</option>
<%
string classStr = "";
foreach (var item in classes)
{
classStr += string.Format(" <option value=/"{0}/">{1}</option>", item.ClassesId, item.ClassesName);
} %>
<%=classStr %>
</select>

<select name="Students" id="Students">
<option value="">所有</option>
</select>
</asp:Content>

4、调试运行，选择，第一个班级，便会列出该班级下的学生，如图：



选择第二个班级，则会重新累出第二个班级下的学生，如图：