学步园

    在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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Mvc.Ajax;

namespace MVCMembership.Controllers
{
    public class AJAXFORMController : Controller
    {
        //
        // GET: /AJAXFORM/
        [AcceptVerbs(HttpVerbs.Get)]
        public ActionResult Test()
        {
            return View();
        }
        [AcceptVerbs(HttpVerbs.Post), ValidateInput(false)]     //这里ValidateInput要的，否则不能提交如<aaa>之类的
        public ActionResult Test(string data)
        {
            data = Server.HtmlDecode(data);             //提交前编码，这里要解码
            System.Threading.Thread.Sleep(5000); //模拟等待
            return Json(Server.HtmlEncode("Your data:" + data));    //这里编码，javascript接收后解码
        }
    }
}

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

代码下载，我的网站

转自：http://www.cnblogs.com/conan77/archive/2009/06/03/1494987.html