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" οnchange="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、调试运行，选择，第一个班级，便会列出该班级下的学生，如图：

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