Asp.net MVC 抛弃了Asp.net WebForm那种高度封装的控件，让我们跟底层的HTML有了更多的亲近。可以更*、更灵活的去控制HTML的结构、样式和行为。Asp.net MVC可以更便捷的使用Ajax,本文针对开发过程中的技术进行了简单的总结并制作了一个小练习进行巩固。

1.准备工作

使用VS创建MVC应用程序，可以使用空模板，添加Home控制器以及对应的视图

使用NuGet进行包管理，添加Jquert、easyui等引用

2.开始制作Demo

UI：

aaarticlea/png;base64,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" alt="" />

html和JS代码如下:

 @{

     ViewBag.Title = "Index";

 }

 <html>

 <head>

     <title>

     </title>

     <script src="~/Script/jquery.min.js"></script>

     <link href="~/Script/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />

     <script src="~/Script/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

     <script src="~/Script/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

     <script>

         $(function () {

             //使用$.ajax请求

             $("#btn").click(function () {

                 var getText = $("#txt").val();

                 $.ajax({

                     url: 'GetGradeByName',

                     type: 'post',

                     data: { "name": getText },

                     success: function (data) {

                         if (data) {

                             alert(MSG(data))

                         }

                         else {

                             alert("没找到")

                         }

                     }

                 })

             })

             //使用$.post请求

             $("#btn2").click(function () {

                 var getText = $("#txt").val();

                 $.post("/Home/GetGradeByName", { "name": getText }, function (data) {

                     if (data) {

                         alert(MSG(data))

                     }

                     else {

                         alert("没找到")

                     }

                 })

             })

             //使用$.get请求

             $("#btn1").click(function () {

                 var getText = $("#txt").val();

                 $.get("/Home/GetGradeByName?name=" + getText, function (data) {

                     if (data) {

                         alert(MSG(data))

                     }

                     else {

                         alert("当前学生不存在")

                     }

                 })

             })

             $("#a1").click(function () {

                 $.ajax({

                     url: 'JsonObject',

                     success: function (data) {

                         alert("json字符串是" + data.list);

                         var jsonObj = $.parseJSON(data.list);

                         alert("长度是" + jsonObj.length);

                         $("#tb").datagrid({

                             columns: [[

                                   { field: 'stuName', width:  },

                                 { field: 'stuGrad', width:  }

                             ]],

                             pagination: true

                         })

                         $('#tb').datagrid('loadData', { total: jsonObj.length, rows: jsonObj });

                     }

                 })

             })

         })

         function MSG(s) {

             return "恭喜!您的成绩是:" + s;

         }

     </script>

 </head>

 <body>

     <h1 style=" color:red">ASP.MVC关于Ajax小练习</h1>

     @Html.Label("学生姓名:")

     @Html.TextBox("txt")

     <input id="btn" type="button" value=" $.ajax查询" />

     <input id="btn1" type="button" value="$.get查询" />

     <input id="btn2" type="button" value="$.post查询" />

     <br>

     @Html.Label("提示：可以输入 小增、小舒、小郑、小陈", new { style = " color:#ccc" })

     <br>

     <a id="a1" href="javascript:void(0)">$.ajax返回json字符串</a>

     <table id="tb" style="width:50%"></table>

 </body>

 </html>

HomeController代码如下：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using System.Web.Script.Serialization;

namespace Ajax.Controllers

{

    public class HomeController : Controller

    {

        //

        // GET: /Home/

        public ActionResult Index()

        {

            return View();

        }

        /// <summary>

        /// 说明：根据学生姓名获取成绩

        /// </summary>

        /// <param name="name"></param>

        /// <returns></returns>

        public string GetGradeByName(string name)

        {

            StudentGrade studentGrade = new StudentGrade();

            IList<StudentGrade> getList = studentGrade.getAllGrades();

            string s="";

            foreach (StudentGrade model in getList)

            {

                if (model.stuName == name)

                {

                    s = model.stuGrad;

                }

            }

            string sss = s;

            return s;

        }

        /// <summary>

        /// 返回学生列表的Jason字符串

        /// </summary>

        /// <returns></returns>

        public ActionResult JsonObject()

        {

            StudentGrade studentGrade = new StudentGrade();

            IList<StudentGrade> getList = studentGrade.getAllGrades();

            JsonResult jsonResult = new JsonResult();

            jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            JavaScriptSerializer serializer = new JavaScriptSerializer();

            string st =HttpUtility.HtmlDecode( serializer.Serialize(getList));

            jsonResult.Data = new

            {

                list = st

            };

            return jsonResult;

        }

    }

    /// <summary>

    /// 学生成绩帮助类

    /// </summary>

    public class StudentGrade

    {

        public StudentGrade() { }        

        public IList<StudentGrade> getAllGrades()

        {

            IList<StudentGrade> list = new List<StudentGrade>()

           {

               new StudentGrade(){

                 stuGrad="",

                 stuName="小增"

               },

                  new StudentGrade(){

                 stuGrad="",

                 stuName="小郑"

               },

               new StudentGrade(){

               stuName="小舒",

               stuGrad=""

               },

                 new StudentGrade(){

                 stuGrad="",

                 stuName="小陈"

               }

           };

            return list;

        }

        public string stuName { get; set; }

        public string stuGrad { get; set; }

    }

}

$.ajax的参数简单的说明如下：

http://blog.sina.com.cn/s/blog_4f925fc30100la36.html

3.演示

(1) 通过实体帮助类构造泛型 学生 对应 成绩列表进行显示（模拟数据库操作）

(2) 用户可以输入学生姓名进行成绩查询

(3) 输出查询结果，如果学生不存在则提示