总结一下,在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.

  效果如下:

image

代码:

<%@ 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

 

image

Code

image

好了,这个demo只是简单的很,提供一个思路给大家参考,谢谢

代码下载我的网站

posted @ 2009-06-03 06:52  柯南  阅读(3797)  评论(4编辑  收藏  举报