Ajax.BeginForm 使用

微软为开发 MVC 提供了很多简便的写法。实现一个MVC AJAX传值查询的功能。逻辑很简单，就是在页面通过提交查询，然后后台返回JSON，通过js处理成table显示在页面。实现效果如图：

实现效果
参考文档：https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.beginform(v=vs.118).aspx#M:System.Web.Mvc.Ajax.AjaxExtensions.BeginForm%28System.Web.Mvc.AjaxHelper,System.Web.Mvc.Ajax.AjaxOptions%29

页面代码

@Styles.Render("~/bundles/tablecss")
@Scripts.Render("~/bundles/tablejs")
<script type="text/javascript">
    function showTable(data) {
        var divid = $("#message");
        readQuery(divid, data);
    }
</script>
<div>
    @using (Ajax.BeginForm("test1", "Query", new AjaxOptions(){
        HttpMethod = "Post",
        LoadingElementId = "loading",
        UpdateTargetId = "message",
        OnSuccess = "showTable"
    }))
    {
        <div>
            <input type="text" id="id"name="id" value="ceshi" />
            <input type="submit" id="Query" value="Query"/>
        </div>
    }
</div>
 <div id="loading" style="display: none">
        <div class ="cover"></div>
     <div class ="coffee_cup">loading</div> 
     <div ></div>
 </div>
<div id="message"></div>

.NET MVC 使用Ajax.BeginForm 来提交AJAX。除了熟悉的 aciton，和controller参数外，在AjaxOptions()实现比较常用的几个参数

Parameter name	Description
HttpMethod	请求类型 post 或者get
LoadingElementId	在提交完成前需要显示的html id，完成后自动隐藏
UpdateTargetId	提交完成需要更新的html id
OnSuccess	处理返回数据的js function

完整的说明请参考：https://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions(v=vs.118).aspx

需要注意的是使用 Ajax.BeginForm 必须要引入js：jquery.unobtrusive-ajax.min.js

服务端

后台在接受数据时是根据标签的 name来获取

后台处理

分析页面

在浏览器中查看元素，系统在生成html代码时，自动实现了多个 data-ajax- *的属性，方便jquery.unobtrusive-ajax.min.js抓取属性处理。

图片.png

同理可以处理 AJAX.ActionLink