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?
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>
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…