JQuery BlockUI progress indicator in every Asp.net postback

Sev picture Sev · Nov 13, 2012 · Viewed 10.7k times · Source

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.

Thanks in advance.


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

Answer

Sev picture Sev · Nov 13, 2012

I figured it out myself.

  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>
    
  3. 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>
    
  4. Add a progress indicator image (ajax-loader.gif) to project root

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