I ran into a problem where I got the error message"A control with ID 'foo' could not be found for the trigger in UpdatePanel bar'."
Basically, I have an update panel with a FormView in it, and in the FormView's EditItem template, I have another UpdatePanel with a Wizard in it. I want the UpdatePanel with the Wizard to trigger on certain Wizard events (like NextButtonClick, PreviousButtonClick), but when the page loads, I get the common error message above.
The long story is, I could just set ChildrenAsTriggers=True for the panel with the wizard, but the different wizard steps have their own UpdatePanels, and I don't want to redraw the whole wizard because someone clicked a radio button, for example... So I decided to fix the problem.
Basically, I wrote a simple control that has an event (UpdateTrigger). It has a single public function to fire that trigger (FireUpdateTrigger). Simple, huh?
So Now I can drop the control on the page right after the UpdatePanel (same nesting level), to be sure that the UpdatePanel can find it. Then, in my Wizard markup, I just add some properties like OnNextButtonClick="WizardEvent" OnPreviousButtonClick="WizardEvent" etc. In the code behind, the WizardEvent trigger simply calls the helper control's FireUpdateTrigger method, which causes the panel to update... like I said, simple.
Here's the code (pretty complex
):
using System.ComponentModel;using System;using System.Web.UI;namespace MMCS.WebControls{ [ToolboxData("<{0}:UpdateTriggerHelper runat=server></{0}:UpdateTriggerHelper>")]public class UpdateTriggerHelper : Control, INamingContainer {private static readonly object EventUpdateTrigger =new object(); [Category("Action")] [Browsable(true)] [Bindable(false)] [DefaultValue(null)] [PersistenceMode(PersistenceMode.Attribute)]public event EventHandler UpdateTrigger { add { Events.AddHandler(EventUpdateTrigger,value); } remove { Events.RemoveHandler(EventUpdateTrigger,value); } }public void FireUpdateTrigger() { EventHandler handler = Events[EventUpdateTrigger]as EventHandler;if (handler !=null) { handler(this, EventArgs.Empty); } } }}Hi,valenumr
Make sure if the following sample can help you:
<%@. Page Language="C#" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="http://links.10026.com/?link=StyleSheet.css" mce_href="StyleSheet.css" rel="stylesheet" type="text/css" /><script type="text/javascript">
var styleToSelect;
function onOk() {
$get('Paragraph1').className = styleToSelect;
}
</script></head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<p id="Paragraph1">
GetContentFillerTextGetContentFillerTextGetContentFillerTextGetContentFillerText</p>
<br />
<ajaxToolkit:Accordion ID="Accordion1" runat="server" ContentCssClass="grey" FadeTransitions="false"
FramesPerSecond="25" TransitionDuration="250" HeaderCssClass="dimgreen" EnableViewState="true">
<Panes>
<ajaxToolkit:AccordionPane runat="server" ID="PaneOne">
<Header>
AccordionPane0
</Header>
<Content>
<a href="http://links.10026.com/?link=javascript:return false" onclick="javascript: LinkButton1.click()">Click here to change
the paragraph style</a>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
<div style="visibility: hidden">
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to change the paragraph style" /></div>
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move; background-color: #DDDDDD;
border: solid 1px Gray; color: Black">
<div>
<p>
Choose the paragraph style you would like:</p>
</div>
</asp:Panel>
<div>
<p>
<input type="radio" name="Radio" id="RadioA" checked="checked" onclick="styleToSelect = 'sampleStyleA';" />
<label for="RadioA" class="sampleStyleA" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioB" onclick="styleToSelect = 'sampleStyleB';" />
<label for="RadioB" class="sampleStyleB" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioC" onclick="styleToSelect = 'sampleStyleC';" />
<label for="RadioC" class="sampleStyleC" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p>
<input type="radio" name="Radio" id="RadioD" onclick="styleToSelect = 'sampleStyleD';" />
<label for="RadioD" class="sampleStyleD" style="padding: 3px;">
Sample paragraph text</label>
</p>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"TargetControlID="LinkButton1"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton"
OnOkScript="onOk()" CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />
</div>
</form>
</body>
</html>
Now you don't get errors like link button with the following name could not be found. :)
Hope this helps,
Let me know if you need more info.
No comments:
Post a Comment