Losing Button.Click events after first partial postback in UpdatePanel - asp.net

I have a Page that has a single instance of a UserControl that itself has a single UpdatePanel. Inside the UpdatePanel are several Button controls. The Click event for these controls are wired up in the code-behind, in the Init event of the UserControl.
I get the Click event for the first button I push, every time, no problem. After that, I only get Click events for one button (SearchButton) - the rest are ignored. I have included the code for the control below - for sake of brevity, I have excluded the click event handler methods, but they are all of the standard "void Button_Click(object sender, EventArgs e)" variety. Any ideas?
<asp:UpdatePanel ID="PickerUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="Container" runat="server">
<div>
<asp:TextBox ID="PickerResults" runat="server" style="margin-right: 3px;" SkinID="Plain" />
<asp:Image
ID="LaunchPopup" runat="server" ImageUrl="~/images/icons/user_manage.png"
ImageAlign="Top" BorderColor="#294254" BorderStyle="Dotted" BorderWidth="1px"
Height="20px" Width="20px" style="cursor: pointer;" />
</div>
<asp:Panel ID="PickerPanel" runat="server" DefaultButton="OKButton" CssClass="popupDialog" style="height: 227px; width: 400px; padding: 5px; display: none;">
<asp:Panel runat="server" id="ContactPickerSearchParams" style="margin-bottom: 3px;" DefaultButton="SearchButton">
Search: <asp:TextBox ID="SearchTerms" runat="server" style="margin-right: 3px;" Width="266px" SkinID="Plain" />
<asp:Button ID="SearchButton" runat="server" Text="Go" Width="60px" SkinID="Plain" />
</asp:Panel>
<asp:ListBox ID="SearchResults" runat="server" Height="150px" Width="100%" SelectionMode="Multiple" style="margin-bottom: 3px;" />
<asp:Button ID="AddButton" runat="server" Text="Add >>" style="margin-right: 3px;" Width="60px" SkinID="Plain" />
<asp:TextBox ID="ChosenPeople" runat="server" Width="325px" SkinID="Plain" />
<div style="float: left;">
<asp:Button ID="AddNewContact" runat="server" SkinID="Plain" Width="150px" Text="New Contact" />
</div>
<div style="text-align: right;">
<asp:Button ID="OKButton" runat="server" Text="Ok" SkinID="Plain" Width="100px" />
</div>
<input id="SelectedContacts" runat="server" visible="false" />
</asp:Panel>
<ajax:PopupControlExtender ID="PickerPopEx" runat="server" PopupControlID="PickerPanel" TargetControlID="LaunchPopup" Position="Bottom" />
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AddButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="AddNewContact" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
public partial class ContactPicker : System.Web.UI.UserControl
{
protected void Page_Init(object sender, EventArgs e)
{
SearchButton.Click += new EventHandler(SearchButton_Click);
AddButton.Click += new EventHandler(AddButton_Click);
OKButton.Click += new EventHandler(OKButton_Click);
}
// Other code left out
}

It seems that adding UseSubmitBehavior="false" to the button definitions has solved my problem. Still don't know why that first button click worked at all.

The most likely reason for this would be the client IDs that .Net generates for its controls changing. These are dynamically assigned and could change between postbacks / partial postbacks.
If controls are being added to the panel dynamically, the ID of your button could be different between postbacks causing .Net to be unable to tie the click event to the correct event handler in your code.

In my case, i had a LinkButton within a dgPatients_ItemDataBound event handler that used the PostBackUrl property.
The moment i changed the LinkButton to a HyperLink, the problem went away.

Related

ASP.NET Label Inside UpdatePanel Not Updating on Selected Index Changed

I am new to ASP.NET and I'm trying to get a Label to update with some information that is grabbed when I hit On selected index changed. The On selected index changed function is called and returns just fine (I've debugged and stepped through the whole thing). The only thing that doesn't work is where I set the text of the Labels I'm trying to update.
This is the function that gets called on the On selected index changed click:
protected void OnClosetIndexChanged(object sender, EventArgs e)
{
{
UpdatePanel updatePanel1 = Row.FindControl("UpdatePanel1") as UpdatePanel;
Label oldSourceQuantity = (Label)Row.FindControl("lblQuantity");
oldSourceQuantity.Text = "0";//Trying to force a value
updatePanel1.Update();
}
}
I know it goes into the if and tries to set the text but nothing happens on the client side.
This is the UpdatePanel I have:
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%" style="background:#F5F5F5" >
<div id="div<%# Eval("componente_id") %>" style="overflow:auto; display:none; position: relative; left: 15px; overflow: auto">
<div class="ExpandTableHeader">
Cambiar la cantidad
</div>
<div class="body">
<label for="validationOfTypeID">Armario:</label>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:DropDownList ID="drCloset" AppendDataBoundItems="True" runat="server" Width="20%" Height="30px" AutoPostBack="true" OnSelectedIndexChanged = "OnClosetIndexChanged"></asp:DropDownList>
<br/>
<label for="validationOfTypeID" visible="false" >cajon</label> <br/>
<asp:DropDownList ID = "drDrawer" AutoPostBack="true" runat="server" Width="20%" Height="30px" >
</asp:DropDownList>
<asp:Label ID="lblQuantity" runat="server" Text=""></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostbackTrigger ControlID="drCloset" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<label for="validationOfTypeID"></label>
<asp:DropDownList Height="30px" ID="drOperation" runat="server" >
<asp:ListItem>+</asp:ListItem>
<asp:ListItem>-</asp:ListItem>
</asp:DropDownList>
<asp:TextBox width="50px" ID="txtChangeQuantity" runat="server" TextMode="Number" min="0" step="1" Value="0" ></asp:TextBox>
<asp:Label ID="lblTotal" runat="server" Text=""></asp:Label>
<br/>
</br>
<asp:Button class="btn btn-primary" ID="btnConfirmPurchases" runat="server" Text="Validar" AutoPostback="true" width="20%" />
</div>
<asp:DetailsView id="DetailsView1" DataKeyNames="componente_id" Runat="server" Width="300px" Font-Names="Calibri"/>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>

Why does ASP.NET think my control doesn't exist?

I have an ASP.NET form with an UpdatePanel. I have two AsyncPostBackTriggers defined for that UpdatePanel; both are buttons, which both do the same thing (one is at the top of the form, the other is at the bottom of the form), the trigger event name is "Click" for both.
As soon as I load the page, I get the error "A control with ID 'btnSaveChangesBtm' could not be found for the trigger in UpdatePanel 'updIncidentDetails'." This error makes no sense, because I look and there's the control 'btnSaveChangesBtm', clear as day.
Here are the relevant snippets of the markup, in case someone sees something I'm missing. I'm at a loss on this one.
<asp:UpdatePanel ID="updIncidentDetails" runat="server">
<ContentTemplate>
<div id="pnlIncidentDetails" runat="server" class="formPanel">
<h2>Incident Details</h2>
<div id="saveButton" style="float: right; margin-right: 100px; display: none;">
<asp:Button ID="btnSaveChanges" runat="server" OnClientClick="return valEditedFields();" OnClick="btnSubmit_Click" Text="Save Changes" />
<asp:Button ID="btnCancel" runat="server" OnClientClick="return hideEditFields(true);" OnClick="btnCancel_Click" Text="Cancel Changes" />
</div>
...
<div id="saveButtonBtm" style="float: right; display: none;">
<br />
<asp:Button ID="btnSaveChangesBtm" runat="server" OnClientClick="return valEditedFields();" OnClick="btnSubmit_Click" Text="Save Changes" />
<asp:Button ID="btnCancelBtm" runat="server" OnClientClick="return hideEditFields(true);" OnClick="btnCancel_Click" Text="Cancel Changes" />
<br />
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSaveChanges" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="btnSaveChangesBtm" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I first thought it was because I have "display: none;" set on the "saveButtonBtm" <div>, but then I realized the same thing is set on the one at the top ("saveButton"), so I don't think that's it. Any other suggestions?
Here is an image of the error:
The problem was because of the buttons being inside of an AccordionPanel -- I guess that made it so the UpdatePanel couldn't find them. I moved them to outside the Panel and it all works.

Launch modal popup extender when button is pressed

I have a button setup to export my gridviews to word. Everything works fine, except I cannot find a way to launch/cancel my modalpopupextender I use to show that processing is happening. If I add it the button click:
btnExportToWord.Attributes.Add("onclick", "StartProgressBarNoValid()") it does not canel the modalpopupextender
Here is the update panel and the javascript function I use.
function StartProgressBarNoValid() {
var myExtender = $find('ProgressBarModalPopupExtender');
ProgressImg = document.getElementById('MyImage');
setTimeout("ProgressImg.src = ProgressImg.src", 10);
myExtender.show();
return true;
}
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<cc1:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
backgroundCssClass="ModalBackground" behaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField1" PopupControlID="Panel1" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<img id="MyImage" src="../Images/Vista_Searching_Bar.gif" alt="" />
<div id="processMessage" style="width:200px;" ><br /><br /> Loading...<br /><br />
</div>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
</div>
</ContentTemplate>
</asp:UpdatePanel>
what is wrong with ProgressBarModalPopupExtender.Show() and ProgressBarModalPopupExtender.Hide() from the codebehind?

Modalpopup with UpdatePanel

I have an autocompleteextender that displays the list of countries. In the same textbox, when I type something and click on "Search" button, a pop-up should be opened and should display the matching countries. I am using modalpopupextender for the popup.
aspx code:
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:TextBox id="TextBox1" runat="server" Width="250px"></asp:TextBox>
<asp:ImageButton id="ImageButton1" onclick="imgBtnSearch_Click" runat="server" ImageUrl="~/Images/Lab/search.jpg"></asp:ImageButton>
<cc1:AutoCompleteExtender id="TextBox1_AutoCompleteExtender" runat="server" EnableCaching="true" CompletionSetCount="10" MinimumPrefixLength="1" ServicePath="AutoComplete.asmx" UseContextKey="True" TargetControlID="TextBox1" ServiceMethod="GetCountryInfo">
</cc1:AutoCompleteExtender>
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="updatePanel2" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
</contenttemplate>
</asp:UpdatePanel>
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
And in my codebehind:
protected void imgBtnSearch_Click(object sender, ImageClickEventArgs e)
{
LoadCountryPopUp();
ModalPopupExtender1.Show();
}
I am not getting any countries in my popup, although I get results via my autocompleteextender. On clicking the imagebutton, I get the popup without any content. Pls help!
Place your popup contents inside panel like this:
<asp:UpdatePanel id="updatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel id="pnlPopup" runat="server">
<asp:RadioButtonList id="RadioButtonList1" runat="server" Width="400" Height="400" RepeatColumns="5" RepeatLayout="Table" RepeatDirection="Vertical" AutoPostBack="True"></asp:RadioButtonList>
<DIV class="Controls">
<INPUT id="btnOk" type="button" value="OK" />
<INPUT id="btnCancel" type="button" value="Cancel" />
</DIV>
</Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ImageButton1" EventName="Click"></asp:AsyncPostBackTrigger>
</Triggers>
</asp:UpdatePanel>
and replace UpdatePanel's controls Id with this Panel's id:
<cc1:ModalPopupExtender id="ModalPopupExtender1" runat="server" TargetControlID="ImageButton1" BackgroundCssClass="ModalPopupBG" Drag="true" PopupDragHandleControlID="PopupHeader" PopupControlID="pnlPopup" CancelControlID="btnCancel" ></cc1:ModalPopupExtender>
and check if it works?
Try putting the extenders outside of the update panel, it should not be a child of what it is extending

update panel not working

i am having two list box which perform add remove item functionality which are controlled by four buttons and o each button click there happen to be post back but i don't want it to be flicker for which i am using update panel like this but it still made post back wats wrong with this explain me this
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/><br />
<asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>
</ContentTemplate>
</asp:UpdatePanel>
I wrote a quick example that does work. You do not need your buttons in the UpdatePanel. You only need the ListBox since they are the only controls being refresh. Setup the Trigger for the UpdatePanel will cause the refreshes to occur without the 'flicker'.
aspx code:
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click" Width="50px"/><br />
<asp:Button ID="ButtonAddAll" runat="server" Text =">>>" OnClick="ButtonAddAll_Click" Width="50px"/><br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text ="<<<" OnClick="ButtonRemoveAll_Click" Width="50px"/>
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonAdd" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonRemove" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonAddAll" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="ButtonRemoveAll" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:ListBox ID="ListBox1" runat="server"></asp:ListBox>
<asp:ListBox ID="ListBox2" runat="server"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
</div>
cs (codebehind) code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ListBox1.Items.Add(new ListItem("Test1", "1"));
ListBox1.Items.Add(new ListItem("Test2", "2"));
ListBox1.Items.Add(new ListItem("Test3", "3"));
ListBox1.Items.Add(new ListItem("Test4", "4"));
ListBox1.Items.Add(new ListItem("Test5", "5"));
}
}
protected void ButtonRemove_Click(object sender, EventArgs e)
{
if (ListBox2.SelectedItem != null)
{
ListBox1.Items.Add(ListBox2.SelectedItem);
ListBox2.Items.RemoveAt(ListBox2.SelectedIndex);
ListBox2.ClearSelection();
ListBox1.ClearSelection();
}
}
protected void ButtonAdd_Click(object sender, EventArgs e)
{
if (ListBox1.SelectedItem != null)
{
ListBox2.Items.Add(ListBox1.SelectedItem);
ListBox1.Items.RemoveAt(ListBox1.SelectedIndex);
ListBox1.ClearSelection();
ListBox2.ClearSelection();
}
}
I have tested this and it does work. I only implemented 2 of the Buttons to present a complete example.
Add the asp:ListBox to the ContentTemplate of your asp:UpdatePanel, or add a new asp:UpdatePanel and add it to its ContentTemplate. The control won't be updated using an asynchronous postback if it's not placed within an asp:UpdatePanel.
With the following code snippets the newly added listBox will be updated with new content using an asynchronous postback:
Page.aspx:
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px" /><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonAddAll" runat="server" Text=">>>" OnClick="ButtonAddAll_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text="<<<" OnClick="ButtonRemoveAll_Click"
Width="50px" />
<asp:ListBox runat="server" ID="listBox"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>
Sample event handler in the code-behind file, Page.aspx.cs:
protected void ButtonAddAll_Click(object sender, EventArgs e)
{
listBox.DataSource = new List<string>() { "Test" };
listBox.DataBind();
}
<asp:UpdatePanel ID="button" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:Button ID="ButtonAdd" runat="server" Text=">" OnClick="ButtonAdd_Click" Width="50px" /><br />
<asp:Button ID="ButtonRemove" runat="server" Text="<" OnClick="ButtonRemove_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonAddAll" runat="server" Text=">>>" OnClick="ButtonAddAll_Click"
Width="50px" />
<br />
<asp:Button ID="ButtonRemoveAll" runat="server" Text="<<<" OnClick="ButtonRemoveAll_Click"
Width="50px" />
<asp:ListBox runat="server" ID="listBox"></asp:ListBox>
</ContentTemplate>
</asp:UpdatePanel>

Resources