Page with AJAX controls posts back twice to the server

I have a form containing three AJAX UpdatePanels, two of which contain a pair of listboxes and a pair of buttons, with the third one containing a pair of radio buttons in a radiobutton list and either three CascadingDropDown lists or two CascadingDropDown lists and a textbox depending on which radio button is selected. The only other control on my form is a button to submit the information on the form to the server.

One thing I've noticed is the information gets posted back to the server twice when the button is clicked. This causes a duplicate record to be written to two tables and a SQL exception being thrown when it tries to write a duplicate record to a third table since it violates that table's primary key constraint. At first, I thought the cause might've been due to the submit button being contained in the third UpdatePanel I mentioned, so I removed it from there and placed it by itself ... but the problem still occurs. One other thing I've noticed is that when data for one of the UpdatePanels is to be updated via a postback to the server, the other two UpdatePanels act as if they're also being posted back to the server; in other words, all three panels noticeably flicker simultaneously. I have a sneaking suspicion this may somehow tie into my entire page being posted back twice when the submit button is clicked, but I'm not at all sure.

What can I do to prevent my page from being posted back twice?

Hi,

any sync postback at the server side is almost identical to regual postback including:

- all control values are posted to the server
- Viewstate is transferred to the server and back

The most important difference is in the rendering phass: only update panels are rendered and their content transferred to the client

So, you must design your application in such a way, that removing all update panels will not break server logic. UpdatePanels reduce flickering, but they don't change how server code process data.

-yuriy

I think there a couple things that can cause this... I think ImageButtons can get rendered as "Submit" buttons, and have a __doPostBack call attached to their OnClick, which seems to make a double postback. Also, I think a button has a UseSubmitBehavior property... try setting that to false.

Panel Default Button Event Doesnt Fire On Second Submit

I have one UpdatePanel surrounding a asp panel. Inside the panel I have one repeater, two buttons, and two labels. Inside the repeater's ItemTemplate I have an ImageButton and TextBox.

Here is the ASP Code:

1<asp:UpdatePanel ID="AdvancedSearchUpdatePanel" runat="server" UpdateMode="conditional" RenderMode="block" ChildrenAsTriggers="true">2 <ContentTemplate>3 <asp:Panel ID="AdvancedSearchPanel" runat="server" DefaultButton="SubmitSearchButton">4 <asp:Repeater ID="AdvancedSearchRepeater" runat="server">5 <HeaderTemplate>6 <table class="searchButton">7 <tr>8 <td colspan="100%">9 <asp:Label ID="KeywordLabel" runat="server" Text="Search By Keyword" Width="100%" Font-Bold="true"/>10 </td>11 </tr>12 </HeaderTemplate>13 <ItemTemplate>14 <tr>15 <td colspan="100%">16 <table cellpadding="0" cellspacing="0" style="padding-right:5px">17 <tr>18 <td>20 <asp:ImageButton ID="DeleteCriteriaButton" runat="server" ImageUrl="~/Resources/Images/close.gif" AlternateText="Click to Delete" OnClick="DeleteCriteriaButton_Click" />21 </td>22 <td>23 <asp:TextBox ID="KeywordTextBox" runat="server" Text='<%# Container.DataItem%>' CssClass="keywordSearch" Width="123px" OnTextChanged="KeywordTextBox_TextChanged" />24 </td>25 </tr>26 </table>27 </td>28 </tr>29 </ItemTemplate>30 <FooterTemplate>31 </table>32 </FooterTemplate>33 </asp:Repeater>34 <table class="searchButton">35 <tr>36 <td>37 <asp:Button ID="AddAnotherSearchButton" Text="Add Criteria" runat="server" OnClick="AddAnotherSearchButton_Click" />38 </td>39 <td>40 <asp:Button ID="SubmitSearchButton" Text="Submit Search" runat="server" OnClick="SubmitSearchButton_Click" />41 </td>42 </tr>43 <tr>44 <td colspan="100">45 <asp:Label ID="ReadableSqlString" runat="server" />46 </td>47 </tr>48 <tr>49 <td colspan="100">50 <asp:Label ID="ErrorLabel" runat="server" ForeColor="red"/>51 </td>52 </tr>53 </table>54 </asp:Panel>55 </ContentTemplate>56</asp:UpdatePanel>

My problem is that the default button for the panel is the SubmitSearchButton. 
On the first press of the enter key everything works as it should. 
On the second press of the enter key the DeleteCriteriaButton's (ImageButton) event gets fired because it is the first button in the panel. 
The only way I have seen to get around this is to put a button before the ImageButton that has a width of zero and have its event call the SubmitSearchButton event and everything works as should. 
Does anyone know a cleaner way around this problem or a reason this is happening. 
 
Thanks in advance.

There is a free component that allows you to assign a button to the "enter-pressed" client side event of input controls. If you type some text in textbox and press Enter, the form will postback, and the serverside click event of your button is fired.You don't need to write any code You only need to use control's "DefaultButton" property. It you are a beginner programmer this could be a life saver. More about MetaBuilders DefaultButtons Control you can find athttp://www.metabuilders.com/Tools/DefaultButtons.aspx
Wish this can help you.
You can specify a default button through javascript when pressing enter key.Try to take a look at this reading for details -http://www.beansoftware.com/ASP.NET-Tutorials/Accept-Enter-Key.aspx
Here are some sample codes for your reference.
TextBox1.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('"+Button1.UniqueID+"').click();return false;}} else {return true}; ");
Wish the above can help you.

DefaultButton is working fine for me on a simpler example:

<%@. Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void click(object sender, EventArgs e) { label1.Text = string.Format("{0} pressed at {1}", ((Control)sender).ID, DateTime.Now.ToString()); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Panel ID="panel1" runat="server" DefaultButton="button2"> <asp:TextBox ID="text1" runat="server" /> <asp:Button ID="button1" runat="server" OnClick="click" Text="one" /> <asp:Button ID="button2" runat="server" OnClick="click" Text="two" /> </asp:Panel> <asp:Label ID="label1" runat="server" /> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

This does what you'd expect... every time you type something and press enter, the label displays "button2 pressed at " followed by the current time.

Your sample is considerably more complicated (and hard to reproduce, since I would need to provide a datasource etc.). Could you try simplifying your code to see at what point the issue goes away?

You can't forget that in my code I have repeaters. This might be the problem. My quick fix is to put a button before the delete button and set it to call the submit button's click event. I know this is a hack and I'm working on other issues. Your help is greatly appreciated. FYI, the datasource of the repeater is a List<string>.
I tested your code with a asp:Panel(asp:Repeater) in a asp:UpdatePanel in my PC.My test enviroment isWindows Server 2003 Enterprise,VS.NET 2005 and Ajax RC1.0. I found it?could?work?fine.If?you?click?the?TextBox?and?press?Enter?key in theasp:Panel, the?default?button?of?the?asp:Panel will?be?triggered.If?the?current?focus?was?moved to?the?outside?of?the?asp:Panel?and?press?Enter?key, the?default?button?of?the?asp:Panel?can't?be?triggered.So if you want to pressEnter key in anywhere of the current web form and the default button of theasp:Panel will be triggered, try to focus on aTextBox of theasp:Panel throughjavascript when pressingEnter key in the web form.This should work fine for you.
Sample Code: document.forms[0].elements['txtBox'].focus();
Wish this can help you.
This works in Internet Explorer 7, but not in Fire Fox 2. I'm soooo surprised.