Archive for the ‘JQuery’ Category


You can use the following piece of Javascript and JQuery that will show an animated image when a post back is occuring. You will need an animated icon as well as the BlockUI JQuery scripts.

ASP.Net (Design)

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>BlockUI</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.blockUI.js"></script>      
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <!-- Start of AJAX update panel to handle post back events -->
        <asp:UpdatePanel ID="ajaxUpdatePanel" runat="server">
           <ContentTemplate>
              <div id="divMain">
                 <p>Click the link below to show JQuery BlockUI working...</p>
                 <asp:LinkButton ID="lbtnPostBack" runat="server" CausesValidation="false" OnClick="lbtnPostBack_Click">Click Me...</asp:LinkButton>
              </div>
           </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

ASP.Net (Code)

<!-- Start of AJAX update panel to handle post back events -->
Partial Class _Default
    Inherits System.Web.UI.Page

    ' Routine to wait 5 seconds
    Protected Sub lbtnPostBack_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        Threading.Thread.Sleep(5000)
    End Sub

End Class

Animated Image
You will need an animated image as follows but you can create your own own from here.
Animated Image

Javascript
Add this bit of code to your ASP.Net page.

<script type="text/javascript">
   function BlockUI(elementID)
   {
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_beginRequest(function(){
          $("#" + elementID).block({ message: '<table><tr><td>' + '<img src="please_wait.gif"/></td></tr></table>',
                                      css: {},
                                      overlayCSS: { backgroundColor: '#FFFFFF', opacity: 0.6, border: '1px solid #000000' }
                                  });
      });
      prm.add_endRequest(function() {
          $("#" + elementID).unblock();
      });
   }
   $(document).ready(function() {
      BlockUI("divMain");
      $.blockUI.defaults.css = {};
   });
</script>

JQuery
You will need the following JQuery files for this to work.