• 总结一下,在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只是简单的很,提供一个思路给大家参考,谢谢

    代码下载我的网站

  • 相关阅读:
    MySQL的语句执行顺序
    linux 常用命令
    scala 样例类转json字符串
    Hadoop之——HDFS的RPC机制
    Hadoop之——机架感知配置
    hadoop-2.6.0-cdh5.14.0 集群高可用搭建
    spark 运行在YARN上参数配置
    日志框架SLF4J和log4j以及logback的联系和区别
    spark的rdd.saveastextfile可以追加写入hdfs同一个文件吗?
    ojdbc14-10.2.0.1.0 jar包下载
  • 原文地址:https://www.cnblogs.com/conan77/p/1494987.html
Copyright © 2020-2023  润新知