Wednesday, October 17, 2007 9:30 AM
Ryan Ternier
UpdatePanel, FireFox and the DefaultButton
Recently I was pulling my hair out with this issue. Recently I blogged about using a Modal Login control instead of redirecting to a login page. I have had great success with this.
However, the one thing that was vexing me was the Default Button. It worked like a charm in IE. In Firefox, it behaved like the ugly step sisters. The problem wasn't that it didn't do a postback. That it did. What it didn't do was hit the server side event (the button click event).
To reproduce this issue, try the following bit of markup (This is sample markup from my Modal Login):
*This markup is inside an UpdatePanel on the parent page.
<asp:Panel ID="pnlLogin" runat="server" DefaultButton="btnLogin" CssClass="login" Style="display: none;">
<div id="loginDrag" class="drag">
<h3>Login</h3>
</div>
<div class="tcenter error">
<asp:Label ID="lblMessage" runat="server" />
</div>
<table>
<tr>
<td class="column1">
Agency ID:</td>
<td class="column2">
<asp:TextBox ID="txtAgencyID" runat="server" SkinID="DataEntryTextBox" ValidationGroup="Login" />
<asp:RequiredFieldValidator ID="rfvAgencyID" runat="server" ControlToValidate="txtAgencyID" Text="*" ErrorMessage="AgencyID is Required." ValidationGroup="Login" />
<ajaxToolkit:ValidatorCalloutExtender ID="vAgencyID" runat="server" TargetControlID="rfvAgencyID" HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td>
Username:</td>
<td>
<asp:TextBox ID="txtUserName" runat="server" SkinID="DataEntryTextBox" />
<asp:RequiredFieldValidator ID="rfvUserName" runat="server" ControlToValidate="txtUserName" Text="*" ErrorMessage="A Username is Required." ValidationGroup="Login" />
<ajaxToolkit:ValidatorCalloutExtender ID="vUserName" runat="server" TargetControlID="rfvUserName" HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td>
Password:</td>
<td>
<asp:TextBox ID="txtPassword" runat="server" SkinID="DataEntryTextBox" TextMode="password" />
<asp:RequiredFieldValidator ID="rfvPassword" runat="server" ControlToValidate="txtPassword" Text="*" ErrorMessage="A Password is Required." ValidationGroup="Login" />
<ajaxToolkit:ValidatorCalloutExtender ID="vPassword" runat="server" TargetControlID="rfvPassword" HighlightCssClass="validatorCalloutHighlight" />
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" ValidationGroup="Login" UseSubmitBehavior="false" />
</td>
</tr>
</table>
</asp:Panel>
When you are selected in any textbox and you press enter, IE will submit this and hit the button click even. however with FireFox, it will only submit - not call the onclick event.
To solve this add: UseSubmitBehavior="False" to your submit button.
Now you can press enter whenever you want in your form and it will do the propper submit regardless of IE or FireFox.
Filed under: ASP.NET , AJAX, Firefox