你的位置:首页 > ASP.net教程

[ASP.net教程]ajax.BeginForm异步提交表单并更新数据


 

using (Ajax.BeginForm("GetBasicInformation", "Employee", //
new AjaxOptions { UpdateTargetId = "basicInfo", //设置HTML元素的ID,从服务器接收的内容将被插入到该元素中
LoadingElementId="loading",//指定HTML元素的ID,这是执行ajax请求其间要显示的HTML元素

LoadingElementDuration = 3000, //指定动画的持续时间,用于显露由LoadingElementId指定的元素,单位为毫秒
Url = Url.Action("GetBasicInformation"), //设置所请求的服务器端URL,此项效果:如果未启用JavaScript,则创建一个回递给原始动作方法的form元素,确保优雅降级
HttpMethod = "Post" },//请求的http方法

new { @class = "profileForm", id = "BasicInformation" }))//

{

}

上段的浏览器中源代码效果如下:

<form action="/Employee/GetBasicInformation?Length=8"

webkit-html-attribute-value">profileForm" data-ajax="true"

data-ajax-loading="#loading"

data-ajax-loading-duration="3000"

data-ajax-method="Post"

data-ajax-mode="replace"

data-ajax-update="#basicInfo"

data-ajax-url="/Employee/GetBasicInformation"

id="BasicInformation" method="post">

 

控制器中代码如下:

[HttpPost]
public PartialViewResult GetBasicInformation()
{

。。。。。。。

。。。。。。。

。。。。。。。

return PartialView();
}

PartialViewResult.ascx中是你要刷新的视图内容

例如:

<h2>基本信息</h2>
<span id="spantest"></span>
<div id="basicshow">
<span><%=Model.NAME %> <%=Model.SEX %> <%=Model.EDUCATION_BACKGROUND %> <%=Model.WORK_EXPERIENCE %><br>
<%=Model.PHONENUMBER %> <%=Model.EMAIL %> <%=Model.SITUATIONID.SITUATION %>
<br>
</span>
<div >
<div></div>
<img width="120" height="120" alt="jason" src="<%=Url.Content("~/style/images/default_headpic.png") %>">
</div>
</div>