@using (html.beginform())前的js操作,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")

function showTable(data) {

var divid = $("#message");

readQuery(divid, data);

}

@using (Ajax.BeginForm("test1", "Query", new AjaxOptions(){

HttpMethod = "Post",

LoadingElementId = "loading",

UpdateTargetId = "message",

OnSuccess = "showTable"

}))

{

}

loading

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

Parameter name

Description

HttpMethod

请求类型 post 或者get

LoadingElementId

在提交完成前需要显示的html id，完成后自动隐藏

UpdateTargetId

提交完成需要更新的html id

OnSuccess

处理返回数据的js function

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

服务端

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

后台处理

分析页面

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

图片.png

同理可以处理 AJAX.ActionLink