MVC—实现ajax+mvc异步获取数据

前端之家收集整理的这篇文章主要介绍了MVC—实现ajax+mvc异步获取数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_403_0@ 之前写过ajax和一般处理程序的结合实现前后台的数据交换的博客,现在做系统用到了MVC,同时也用到了异步获取数据。ajax+一般处理程序与MVC+ajax原理是一样的在"URL"中前者写的一般处理程序的名字,而后者写到Controller中需要调用方法

@H_403_0@

@H_403_0@Controller中的设计

@H_403_0@

@H_403_0@

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);
        }
    }
}

@H_403_0@View中的设计

@H_403_0@

@H_403_0@

@{
    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>
@H_403_0@

通过firebug 查看返回的数据 @H_403_0@

@H_403_0@

@H_403_0@页面显示效果

@H_403_0@

@H_403_0@

@H_403_0@总结

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

猜你在找的Ajax相关文章