在每一个Asp.net回传的JQuery BlockUI进度指示器 [英] JQuery BlockUI progress indicator in every Asp.net postback

问题描述

我想实现一个jquery blockUI 弹出，并显示在回发进度指示器（负载循环）在 Asp.Net 。我怎样才能实现呢？我使用 masterpages ，所以我在想，如果我能在一个地方实现这个code，以保持它的简单。这甚至可能？期待听到您对这个想法。

I would like to implement a jquery blockUI to popup and show a progress indicator (loading circle) during postbacks in Asp.Net. How can I implement this? I am using masterpages so I was wondering if I can implement this code in one place to keep it simple. Is this even possible? Looking forward to hear your thoughts on this.

先谢谢了。

我能够开发这个。我已经包含在答案的步骤。让我知道如果你有问题。

I was able to develop this. I have included the steps in answers. Let me know if you have questions.

推荐答案

我理解了它自己。

1. 创建一个新的Asp.net的Web项目。



2. 包括以下内容的Site.Master标记：

1. Create a new Asp.net web project.

2. Include the following in Site.Master markup:

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

添加下面的标记Default.aspx中：

Add the following markup in default.aspx:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate><asp:Button ID="Button1" runat="server" Text="Button" 
        onclick="Button1_Click" /></ContentTemplate>
</asp:UpdatePanel>

添加一个进度指示器图像（AJAX-loader.gif）到项目的根

Add a progress indicator image (ajax-loader.gif) to project root

在添加了General.js以下

Add the following in 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();
});

这篇关于在每一个Asp.net回传的JQuery BlockUI进度指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！