5

我想实现一个 jqueryblockUI以在Asp.Net. 我该如何实施?我正在使用masterpages,所以我想知道是否可以在一个地方实现此代码以使其保持简单。这甚至可能吗?期待听到您对此的看法。

提前致谢。


我能够开发这个。我已经在答案中包含了这些步骤。如果您有任何问题,请告诉我。

4

3 回答 3

3

我自己想通了。

  1. 创建一个新的 Asp.net Web 项目。
  2. 在 Site.Master 标记中包含以下内容:

    <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.blockUI.js"></script>
    <script language="javascript" src="../Scripts/General.js" type="text/javascript"></script>
    
    <style>
      div.blockOverlay {
        background-color: #666;
        filter: alpha(opacity=50) !important;
        -moz-opacity:.50;
        opacity:.50;
        z-index: 200000 !important;
      }
      div.blockPage {
        z-index: 200001 !important;
        position: fixed;
        padding: 10px;
        margin: -38px 0 0 -45px;
        width: 70px;
        height: 56px;
        top: 50%;
        left: 50%;
        text-align: center;
        cursor: wait;
        background: url(ajax-loader.gif) center 30px no-repeat #fff;
        border-radius: 5px;
        color: #666;
        box-shadow:0 0 25px rgba(0,0,0,.75);
        font-weight: bold;
        font-size: 15px;
        border: 1px solid #ccc;
      }
    </style>
    
  3. 在 default.aspx 中添加以下标记:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button" 
            onclick="Button1_Click" /></ContentTemplate>
    </asp:UpdatePanel>
    
  4. 将进度指示器图像 (ajax-loader.gif) 添加到项目根目录

  5. 在 General.js 中添加以下内容

    // BlockUI setup
    
    $.extend({
      // Block ui during ajax post back
      initializeUiBlocking: function () {
        if (typeof ($.blockUI) != 'undefined') {
          $.blockUI.defaults.message = 'LOADING';
          $.blockUI.defaults.overlayCSS = {};
          $.blockUI.defaults.css = {};
    
          var request = Sys.WebForms.PageRequestManager.getInstance();
          request.add_initializeRequest(function (sender, args) {
            request.get_isInAsyncPostBack() && args.set_cancel(true);
          });
          request.add_beginRequest(function () { $.blockUI(); });
          request.add_endRequest(function () { $.unblockUI(); });
        }
      }
    });
    
    $(document).ready(function () {
      $.initializeUiBlocking();
    });
    
于 2012-11-13T20:23:36.473 回答
1

看看这个
http://www.malsup.com/jquery/block/#overview
这适用于 ajax 调用。

并且您需要将以下行
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
放置在所有页面都可用的位置。

于 2012-11-13T13:10:33.347 回答
0

介绍:

要在提交数据时阻止页面,我们有多种选择,我们可以使用基于 Ajax 的 UpdateProgress 或一些 jQuery Stuff。但有时由于复杂性,Ajax UpdateProgress 并不是很有用。因此,更好的方法是使用 jQuery UI Block Plug-In。

执行:

从以下网址下载 jQuery UI 块插件: http: //www.malsup.com/jquery/block/

<script type="text/javascript" src="js/jquery.1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.blockUI.js"></script>

  $("#<%= btnSubmit.ClientID%>").click(function() {

 $.blockUI({ 
                            message: "<h3>Processing, Please Wait...</h3>" ,
                            css: { 
                                border: 'none', 
                                padding: '15px', 
                                backgroundColor: '#000', 
                                '-webkit-border-radius': '10px', 
                                '-moz-border-radius': '10px', 
                                opacity: .5, 
                                color: '#fff' 
                 }  });

});

上面的代码是没有任何 AJAX 或其他复杂脚本的简单代码。

我在网站上找到了这篇文章并进行了测试,它的工作正常

于 2018-05-09T07:57:21.783 回答