c# - 每个Asp.net回发中的JQuery BlockUI进度指示器

我想实现一个jQuery blockUI来弹出并在Asp.Net中进行回发时显示进度指示器(加载圆圈)。我该如何实现？我正在使用masterpages，所以我想知道是否可以在一个地方实现此代码以使其简单。这有可能吗？期待听到您对此的想法。

提前致谢。

我能够发展这一点。我已将步骤包括在答案中。如果您有任何问题，请告诉我。

最佳答案

我自己弄清楚了。

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

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

在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)添加到项目根

在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();
});