之前写过ajax和一般处理程序的结合实现前后台的数据交换的博客，如今做系统用到了MVC，同一时候也用到了异步获取数据。

ajax+一般处理程序与MVC+ajax原理是一样的在"URL"中前者写的一般处理程序的名字。而后者写到Controller中须要调用的方法。

Controller中的设计

using System.Collections.Generic;

using System.Web.Mvc;

namespace mvcAjaxByAjax.Controllers

{

    //考试试题

    public class ExamEntity

    {

        public int Id { get; set; }

        public string ExamName { get; set; }

    }

    public class mvcAjaxByAjaxController : Controller

    {

        [HandleError]

        public ActionResult Index()

        {

            return View();

        }

        /// <summary>

        /// 获取考试数据

        /// </summary>

        /// <returns></returns>

        [HttpPost]

        public ActionResult GetExam()

        {

            //加入employee数据

            List<ExamEntity> examList = new List<ExamEntity>()

            {

                new ExamEntity {Id = 1, ExamName = "语文考试"},

                new ExamEntity {Id = 2, ExamName = "数学考试"}

            };

            //直接返回此类型JSON类型

            return Json(examList);

        }

    }

}

View中的设计

@{

    ViewBag.Title = "Index";

}

<script src="~/Scripts/jquery-2.1.3.min.js"></script>

<h2>ajax获取数据</h2>

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

    $(function () {

        //注冊单击事件

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

                $.ajax({

                    type: "POST",

                    contentType: "application/json",

                    url: "GetExam",

                    data: "{}",

                    dataType: 'json',

                    success: function (result) {

                        //将返回数据加入到页面表格中

                        $("#tdId1").html(result[0].Id);

                        $("#tdName1").html(result[0].ExamName);

                        $("#tdId2").html(result[1].Id);

                        $("#tdName2").html(result[1].ExamName);

                    }

                });

            });

        });

    </script>

<table>

    <tr>

        <th>考试ID</th>

        <th>考试名称</th>

    </tr>

    <tr>

        <td id="tdId1"></td>

        <td id="tdId2"></td>

    </tr>

    <tr>

        <td id="tdName1"></td>

        <td id="tdName2"></td>

    </tr>

    <tr>

        <td><input type="button" value="查询" id="btTest" /></td>

    </tr>

</table>

通过firebug 查看返回的数据

页面显示效果

总结

利用mvc+ajax简单的实现异步数据的查询，直接调用后台的Controllers方法。后台方法直接返回数据给前台控件。