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

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.

Related

ModalPopupExtender only pops up the UpdatePanel once

The ModalPopupExtender wires the btnCancel button to trigger the a popup an UpdatePanel. The UpdatePanel is a cancel confirmation which contains a Yes button and a No button. After clicking the No button, the panel is closed but the btnCancel no longer trigger the popup when being clicked again. The Yes button works and triggers the server side YesButton_Click event. Here is my code. Thanks for your help.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I'm not 100% positive but it appears that Extender and Extended controls must reside in the same UpdatePanel. So if you move your Cancel button and ModalPopupExtender control inside the UpdatePanel, it should work as expected.
<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
<asp:UpdatePanel ID="upd_yes_no" runat="server">
<ContentTemplate>
<span id="buttons">
<asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
OnClick="undo" CausesValidation="false" />
<asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
ToolTip="Unchange current and create new task"
OnClick="NewTask" CausesValidation="false" />
<asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
</span>
<ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
<asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
<div class="modalPopup-text">
Are you sure you want to cancel this task?
<br />
<br />
<asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />
<asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>

Asp tabpanel updating all tabs

I am working on a webpage that displays online users in a TabPanel, and I want to have it update every X amount of seconds. This part works; however, all of the other tabs in the TabContainer will update too, which I do not want. Here is the code for the online user tab
<cc1:TabPanel runat="server" HeaderText="Online Users" ID="TabPanel1">
<ContentTemplate>
<div>
<div style="position:relative; text-align:left; width:650px; top: 0px; left: 0px;">
<asp:Label ID="lblUpdate" runat="server" Text="This page refreshed automatically every 10 seconds, or press the update button to the right"></asp:Label>
</div>
</div>
<asp:Timer runat="server" ID="timer1" Interval="10000"></asp:Timer>
<asp:Timer runat="server" ID="timer2" Interval="9000"></asp:Timer>
<asp:UpdatePanel runat="server" ID="updateOnlineUsers" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" />
<asp:AsyncPostBackTrigger ControlID="timer2" />
</Triggers>
<ContentTemplate>
<div style="text-align:right; position:relative; top:-20px">
<asp:Image style="position:relative; display:none; z-index:1" ID="Image1" runat="server" ImageUrl="../images/reload.gif" />
<asp:ImageButton ID="ImageButton1" style="position:relative; z-index:2" runat="server" ImageUrl="../images/reload5.png" />
</div>
<div>
<asp:Label ID="lbluserCount" runat="server"></asp:Label>
</div>
<div>
<asp:Label ID="lblOfflineUsers" runat="server"></asp:Label>
</div>
<div>
<asp:Label runat="server" ID="lblOnlineUsers">Hi Everybody</asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
Thanks in advance!
Move timers out of TabPanel. Possibly you'll need to register timers as AsyncPostbackTriggers manually from code-behind after that.

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?

server side event for the button having modal pop up extender

I have a button on which I am calling a modal pop up extender which is showing a panel. Below is the code:
<asp:Button ID="btnOne" runat="server" Text="View "
onclick=" btnOne_Click" />
<asp:Panel ID="test" CssClass="ModalWindow" Width="100%" ScrollBars="Both" runat="server">
<table id="tblgv" width="100%">
<tr>
<td>
<asp:GridView ID="gvTwo" runat="server">
</asp:GridView>
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnPopUpCancel" runat="server" Text="Close" />
</td>
</tr>
</table>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="btnPopUpCancel"
TargetControlID=" btnOne " PopupControlID="test" runat="server">
</asp:ModalPopupExtender>
In the panel, I have a gridview. I want that when I click the button gridview will be loaded. But it is not happening, when I clicked on the button it is not going server side.
help me how to resolve it.
Your problem is that the ModalPopup is showing Client side.
If you what to do stuff (bind the gridview) you need do trigger a postback to the server.
add a dummy target for the ModalPopup
< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />
set TargetControlID="HiddenTargetControlForModalPopup"
call ModalPopupExtender1.show() inside the btnOne_Click event.
btnOne will now trigger a serverside event. You should also put the Gridview inside a update panel and set btnOne at as asyncpostback trigger.
Hope this will help.
You Can Use Asynchronous PostBack Trigger Or PostBackTrigger as per your need. Id want this Grid View In update panel you need to use Asynchronous PostBack Trigger.
and if you want that page to be reload at button click you need to have post back trigger and make sure that control button to be inside that update panel.
Here is an Example
<asp:UpdatePanel ID="UPDTree" runat="server">
<ContentTemplate>
<asp:LinkButton ID="lnkfaketree" runat="server"></asp:LinkButton>
<asp:ModalPopupExtender ID="mpeTree" runat="server" BackgroundCssClass="modalBackground recharge" CancelControlID="btntreeclose" PopupControlID="paneltree" TargetControlID="lnkfaketree"></asp:ModalPopupExtender>
<asp:Panel ID="paneltree" runat="server" Style="display: none">
<div class="btn-group pull-right">
</div>
<div class="box box-primary">
<div class="box-header with-border" style="padding: 3px; background-color: #14181a; font-weight: bolder">
<h3 class="box-title" style="color: white">Tree View</h3>
<div class="btn-group pull-right">
<asp:LinkButton ID="btntreeclose" runat="server" CssClass="fa fa-close" OnClick="btntreeclose_Click"></asp:LinkButton>
</div>
</div>
<div class="form-horizontal">
<div class="box-body">
<div id="chart_div" style="width: 1000px; height: 500px; overflow: auto">
</div>
<asp:Button id="BtnNext" runat="server" OnClick="selectHandler()" />
<asp:Button id="btn_Submit" runat="server" OnClick="selectHandler2()" />
</div>
</div>
</div>
</asp:Panel>
</ContentTemplate><Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnNext" EventName="Click" />
<asp:PostBackTrigger ControlID="btn_Submit" />
</Triggers>
</asp:UpdatePanel>

Losing Button.Click events after first partial postback in UpdatePanel

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.

Resources