CodePaste.NET - Using jQuery BlockUI Plugin with ASP.NET Input Form with LinkButtons & ImageButtons

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryBlockUi._Default" %>
   2:   
   3:  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4:   
   5:  <html xmlns="http://www.w3.org/1999/xhtml" >
   6:  <head runat="server">
   7:      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
   8:      <script type="text/javascript" src="http://malsup.com/jquery/block/jquery.blockUI.js?v2.28"></script>
   9:  </head>
  10:  <body>
  11:      <form id="form1" runat="server">
  12:   
  13:          <div>
  14:              <asp:Panel ID="pnlMessage" runat="server" Visible="false">
  15:                  <asp:Label ID="lblMessage" runat="server" /><br />
  16:              </asp:Panel>
  17:              <asp:Button id="ctlAddContact" runat="server" Text="Add Contact" />
  18:          </div>
  19:   
  20:          <div id="ctlAddContactModal" style="display: none;" class="modal">
  21:              <h3>Add Contact</h3>
  22:              <dl>
  23:                  <dt><asp:Label ID="lblFirstNameCaption" runat="server" AssociatedControlID="txtFirstName" Text="First Name" /></dt>
  24:                  <dd><asp:TextBox ID="txtFirstName" runat="server" /></dd>
  25:                  <dt><asp:Label ID="lblLastNameCaption" runat="server" AssociatedControlID="txtLastName" Text="Last Name" /></dt>
  26:                  <dd><asp:TextBox ID="txtLastName" runat="server" /></dd>
  27:              </dl>
  28:              <div class="buttons">
  29:                  <asp:Button ID="btnCancel" runat="server" Text="Cancel" 
  30:                      onclick="btnCancel_Click" />
  31:                  <asp:LinkButton ID="btnFailureLink" runat="server" Text="Failure Save" CssClass="action" OnClick="btnFailureLink_Click" />
  32:                  <asp:LinkButton ID="btnSuccessLink" runat="server" Text="Success Save" CssClass="action" onclick="btnSuccessLink_Click" />
  33:                  <asp:ImageButton ID="imgFailureLink" runat="server" Text="Failure Save" CssClass="action" onclick="imgFailureLink_Click" />
  34:                  <asp:ImageButton ID="imgSuccessLink" runat="server" Text="Success Save" CssClass="action" onclick="imgSuccessLink_Click" />
  35:              </div>
  36:          </div>
  37:   
  38:      </form>
  39:   
  40:      <script type="text/javascript">
  41:          $(function() {
  42:              $('#<%= ctlAddContact.ClientID %>').click(function(e) {
  43:                  e.preventDefault();
  44:                  $.blockUI({
  45:                      message: $('#ctlAddContactModal'),
  46:                      css: {
  47:                          cursor: 'auto'
  48:                      }
  49:                  });
  50:              });
  51:   
  52:              $('#<%= btnCancel.ClientID %>').click(function(e) {
  53:                  $.unblockUI();
  54:              });
  55:   
  56:              var btnSuccessLinkId = '<%= btnSuccessLink.ClientID %>';
  57:              $('#' + btnSuccessLinkId).click(function(e) {
  58:                  e.preventDefault();
  59:                  $.unblockUI({
  60:                      onUnblock: function() {
  61:                          eval($('#' + btnSuccessLinkId).attr('href'));
  62:                      }
  63:                  });
  64:              });
  65:   
  66:              var imgSuccessLinkId = '<%= imgSuccessLink.ClientID %>';
  67:              $('#' + imgSuccessLinkId).click(function(e) {
  68:                  e.preventDefault();
  69:                  var button = $(this);
  70:                  $.unblockUI({
  71:                      onUnblock: function() {
  72:                          __doPostBack(imgSuccessLinkId, '');
  73:                      }
  74:                  });
  75:              });
  76:          });
  77:      </script>     
  78:  </body>
  79:  </html>