Using jQuery BlockUI Plugin with ASP.NET Input Form

I was recently working on an ASP.NET WebForm project where it made sense to use a modal dialog to confirm choices, to ask for additional information, etc…

I’ve used the jQuery BlockUI Plugin before and I’ve always thought it provided a good mix of nice features as well as extreme customization.

Ii went ahead an implemented BlockUI across the application and was satisfied on how it looked & felt, but I noticed some weird behavior on one of the modal screens. I had a screen that had numerous input controls (textboxes, dropdownlists, etc…) and when I posted back my results all of the input controls were blank!

Ahh, what do I do? Where are my updated input values?

Debugging Steps

1. Check to make sure I wasn’t re-initializing the input controls on PostBack
2. Investigate that I didn’t turn off viewstate by accident & make sure I wasn’t using dynamic controls

After those steps I was still confused and frankly wasting a lot of time with something I thought would be very quick.

To make a long story short, it was BlockUI that was clearing the input controls on PostBack!

So, I created a fresh demo application to replicate the issue and started investigating.

The following code shows how to recreate the issue and how to resolve the issue.

    <div>
        <asp:Panel ID="pnlMessage" runat="server" Visible="false">
            <asp:Label ID="lblMessage" runat="server" /><br />
        </asp:Panel>
        <asp:Button id="ctlAddContact" runat="server" Text="Add Contact" />
    </div>
    
    <div id="ctlAddContactModal" style="display: none;" class="modal">
        <h3>Add Contact</h3>
        <dl>
            <dt><asp:Label ID="lblFirstNameCaption" runat="server" AssociatedControlID="txtFirstName" Text="First Name" /></dt>
            <dd><asp:TextBox ID="txtFirstName" runat="server" /></dd>
            <dt><asp:Label ID="lblLastNameCaption" runat="server" AssociatedControlID="txtLastName" Text="Last Name" /></dt>
            <dd><asp:TextBox ID="txtLastName" runat="server" /></dd>
        </dl>
        <div class="buttons">
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
            <asp:LinkButton ID="btnFailureLink" runat="server" Text="Failure Save" CssClass="action" OnClick="btnFailureLink_Click" />
            <asp:LinkButton ID="btnSuccessLink" runat="server" Text="Success Save" CssClass="action" onclick="btnSuccessLink_Click" />
        </div>
    </div>
     

 
    <script type="text/javascript">
        $(function() {
            $('#<%= ctlAddContact.ClientID %>').click(function(e) {
                e.preventDefault();
                $.blockUI({
                    message: $('#ctlAddContactModal'),
                    css: {
                        cursor: 'auto'
                    }    
                });
            });

            $('#<%= btnCancel.ClientID %>').click(function(e) {
                $.unblockUI();
            });

            var btnSuccessLinkId = '<%= btnSuccessLink.ClientID %>';
            $('#' + btnSuccessLinkId).click(function(e) {
                e.preventDefault();
                $.unblockUI({
                    onUnblock: function() {
                        eval($('#' + btnSuccessLinkId).attr('href'));
                    }
                });
            }); 
        });
    </script> 

The issue is more obvious if you had used an <asp:Button /> in the above code snippet instead of an <asp:LinkButton /> as was the standard in my project. When using a <asp:Button /> the modal input form doesn’t submit at all! The BlockUI prevents the modal from from posting. I tried manipulating some of the plugin settings such as setting bindEvents = false and others, but nothing seemed to help.

So, the solution that works is…

1. Attach a jQuery click event to your LinkButton
2. Prevent the default click behavior of the LinkButton
3. Unblock the modal window to restore default behavior of input form
4. Add an onUnblock event to the modal window and evaluate the LinkButton’s href