Using jquery to implement AJAX submission and realize ajax.net updateprogress function under MVC

We can't take advantage of the Ajax.NET control under MVC, so we can use jquery to implement the UpdateProgress to show the progress. By the way, jquery will be integrated into the next version of Visual Studio as part of the MS AJAX framework.

1. Next to the XML Menu, we first edit the Menu.xml and add the following code:

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

2. Add the Ajaxform directory and view Test under the View directory.

The effect is as follows:

Code:

<%@ 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 is 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 ', the 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 this 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 ()); The data backstage is encoded.
$ ("#divLoading"). Removeclass (). addclass ("Hidden");
$ ("#DivResultData"). HTML (data); Before submitting code, here again decoding
}
function Check () {
if (Checkform ()) {
$ ("#divLoading"). Removeclass (). addclass ("Visible");
$ ("#divResult"). Removeclass (). addclass ("Visible");
$ ("#data"). Val (encodeURI ($ ("#data"). Val ()); Pre-submit encoding
}
}
</script>

Test<%using (Html.BeginForm ("", "", FormMethod.Post, new {@onsubmit = "return Checkform ();"}))
{%>
<fieldset>
<legend>ajax Form Demo </legend>
Test<%=html.textbox ("Data", "", new {@class = "inputnormal"})%>
<div id= "DataTip" >
</div>
<input id= "Submit" type= "submit" value= "Submit"/>
</fieldset>
<div id= "Divresult" class= "Hidden" >
Result<fieldset>
<div id= "Divloading" >
' alt= ' Load '/>
Please waiting...</div>
<div id= "Divresultdata" >
</div>
</fieldset>
</div>
<%}%>
</asp:Content>

Using the form plug-in, with DIV implementation updateprogress