首页 / 脚本样式 / Ajax / 在MVC下利用JQUERY实现AJAX提交并实现AJAX.NET的UpdateProgress功能

在MVC下利用JQUERY实现AJAX提交并实现AJAX.NET的UpdateProgress功能2010-01-06 博客园 柯南在MVC下我们不能利用AJAX.NET控件，那么要实现UpdateProgress来显示进度怎么办，我们可以利用JQUERY来实现这个功能。顺便说一句JQuery将集成在下一版本的Visual Studio中，是MS AJAX FrameWork的一部分。

1.接着上一篇的XML Menu，我们先编辑Menu.XML，添加如下代码：

<MenuItem Order="4" Action="Test" Controller="AJAXFORM">
AJAXFORM
</MenuItem>

2.在View目录下添加AJAXFORM目录和View Test.

效果如下：

代码：

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Test
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="http://www.cnblogs.com/Scripts/jquery-1.2.3-intellisense.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$（document）.ready（function（） {
$.formValidator.initConfig（）;
$（"#data"）.formValidator（{ onshow: "please input test data", onfocus: "test data required", oncorrect: "OK" }）
.inputValidator（{ min: 1, empty: { leftempty: true, rightempty: true }, onerror: "test data required" }）;
var options = {
target: "#divResult", // target element（s） to be updated with server response
beforeSubmit: check, // pre-submit callback
success: showResponse, // post-submit callback
url: "Test", // override for form"s "action" attribute
type: "post", // "get" or "post", override for form"s "method" attribute
dataType: "json" // "xml", "script", or "json" （expected server response type）
// other available options:
//clearForm: true // clear all form fields after successful submit
//resetForm: true // reset the form after successful submit

// $.ajax options can be used here too, for example:
//timeout: 3000
};
$（"form"）.ajaxForm（options）;
}）;
function checkForm（） {
return jQuery.formValidator.pageIsValid（）;
}
function showResponse（data） {
data = decodeURI（data）;
$（"#data"）.val（decodeURI（$（"#data"）.val（）））; //后台来的数据经过编码
$（"#divLoading"）.removeClass（）.addClass （"Hidden"）;
$（"#DivResultData"）.html（data）; //提交前编码，这 里再解码
}
function check（） {
if （checkForm（）） {
$（"#divLoading"）.removeClass（）.addClass（"Visible"）;
$（"#divResult"）.removeClass（）.addClass（"Visible"）;
$（"#data"）.val（encodeURI（$（"#data"）.val（）））; //提交前编码
}
}
</script>

<h2>
Test</h2>
<%using （Html.BeginForm（"", "", FormMethod.Post, new { @onsubmit = "return checkForm（）;" }））
{ %>
<fieldset>
<legend>AJAX Form 演示 </legend>
<h3>
Test</h3>
<%=Html.TextBox（"data", "", new { @class = "InputNormal" }）%>
<div id="dataTip">
</div>
<input id="submit" type="submit" value="submit" />
</fieldset>
<div id="divResult" class="Hidden">
<h3>
Result</h3>
<fieldset>
<div id="divLoading">
<img src="<%=Url.Content（"~/Content/images/loader.gif"）%>" alt="load" />
please waiting...</div>
<div id="DivResultData">
</div>
</fieldset>
</div>
<%} %>
</asp:Content>

用了form插件，用div实现UpdateProgress