总结一下,在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').ajaxForm(options);
用了form插件,用div实现UpdateProgress
3.Action
Code
好了,这个demo只是简单的很,提供一个思路给大家参考,谢谢