在MVC下利用JQUERY實現AJAX提交並實現AJAX.NET的UpdateProgress功能

在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