Greetings, clever ASP.NET AJAX users.
I have a data-bound Accordion with a Button in each header. Cliking the button changes a label inside an UpdatePanel. But I don't want a full postback when the Button is clicked. I just want the UpdatePanel itself updated.
I have tried registering the ItemCommand event of the Accordion as a trigger, but I get this error message, which I don't understand:
Control with ID 'accAccordion' being registered through RegisterAsyncPostBackControl or RegisterPostBackControl must implement either INamingContainer, IPostBackDataHandler, or IPostBackEventHandler.
Here is my code:
<asp:UpdatePanel ID="upUpdatePanel" runat="server" ChildrenAsTriggers="true" > <ContentTemplate> <div style="border:1px solid black;"> Name: <asp:Label ID="lblName" runat="server" /><br /> <asp:Button ID="btnChange" runat="server" OnClick="btnChange_Click" Text="Inside Update Panel"/> </div> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="accAccordion" EventName="ItemCommand" /> </Triggers> </asp:UpdatePanel> <br /> <ajaxtoolkit:Accordion ID="accAccordion" runat="server" RequireOpenedPane="false" OnItemDataBound="accAccordion_ItemDataBound" OnItemCommand="accAccordion_ItemCommand"> <HeaderTemplate> header: <asp:Button ID="btnChange" runat="server" CommandArgument="Inside Update Panel" /> </HeaderTemplate> <ContentTemplate> content:<br /> </ContentTemplate> </ajaxtoolkit:Accordion>
public partialclass _Test : System.Web.UI.Page{protected string[] aNames = {"foo","bar","baz" };protected void Page_Load(object sender, EventArgs e) {this.accAccordion.DataSource =this.aNames;this.accAccordion.DataBind(); }protected void btnChange_Click(Object sender, EventArgs e) {this.lblName.Text =this.btnChange.Text; }protected void accAccordion_ItemDataBound(Object sender, AjaxControlToolkit.AccordionItemEventArgs e) {if (e.AccordionItem.ItemType == AjaxControlToolkit.AccordionItemType.Header) { Button btnChange = (Button)e.AccordionItem.FindControl("btnChange"); btnChange.Text = e.AccordionItem.DataItem.ToString(); btnChange.CommandArgument = btnChange.Text; } }protected void accAccordion_ItemCommand(Object sender, CommandEventArgs e) {this.lblName.Text = e.CommandArgument.ToString(); }}Obviously if I remove the trigger the error goes away, but then I don't get partial page rendering. I tried adding code to the ItemDataBound event of the Accordion to register the Button with the ScriptManager as an AsyncCallBack or whatever it is, and then added code to the ItemCommand event to call the Update() method of the UpdatePanel, but that doesn't work either -- I still get a full postback.
Any ideas?
If it's not feasible to trap the ItemCommand event of the Accordion or the Click event of the Button, is there a more exotic solution that would let me trigger the UpdatePanel from client script? I would need to be able to somehow pass the CommandArgument from the specific button that was clicked...
FYI, I worked around this problem using the approach described here:http://weblogs.asp.net/rajbk/archive/2007/01/21/refresh-updatepanel-via-javascript.aspx
I used SuppressHeaderPostBasks="true" on the Accordion, then for each Button in the Accordion Pane's header, I used the OnClientClick property to set the value of a hidden input element inside the update panel, then call the __doPostBack method pointing at that element. In the codebehind, I trapped the Change event of the hidden input element and did my processing.
I have an updatepanel inside an Accordion and I think you might have the solution for my problem, but I don't understand you process.
I would be grateful if you could help me.
Here's my code;
codebehind
protectedvoid Page_Init(object sender,EventArgs e){
Accordion1.FindControl("nothing");LinkButton UserLink = Accordion1.FindControl("UserLink")asLinkButton;
ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(UserLink);//Creates a new async trigger
AsyncPostBackTrigger trigger =newAsyncPostBackTrigger();//Sets the control that will trigger a post-back on the UpdatePanel
trigger.ControlID ="UserLink";//Sets the event name of the control
trigger.EventName ="Click";//Adds the trigger to the UpdatePanels' triggers collection
UpdatePanelUser.Triggers.Add(trigger);
}
protectedvoid Page_Load(object sender,EventArgs e){
}
protectedvoid UserLink_Click(object sender,EventArgs e){
//UpdatePanel getUserPanel = UserPanel.FindControl("UpdatePanelUser") as UpdatePanel;
//ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(getUserPanel);
String userPanelPath ="~/CMS/_admin/_components/CMS_controls/admin_controls/UserPanel.ascx";Control userPanel = Page.LoadControl(userPanelPath);PanelUser.Controls.Add(userPanel);
UpdatePanelUser.Update();
}
aspx
<ajaxToolkit:AccordionID="Accordion1"runat="server"HeaderSelectedCssClass="AdminPanelHeaderSelected"RequireOpenedPane="false"SuppressHeaderPostbacks="true"SelectedIndex="0"HeaderCssClass="AdminPanelHeader"ContentCssClass="AdminPanelContent"FadeTransitions="true"FramesPerSecond="40"TransitionDuration="250"AutoSize="none">
<Panes>
<ajaxToolkit:AccordionPanerunat="server"ID="Home">
<Header>
<ahref=""onclick="return false;">Home</a>
</Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPanerunat="server"ID="UserPanel">
<Header>
<asp:LinkButtonID="UserLink"runat="server"OnClick="UserLink_Click">User panel</asp:LinkButton>
</Header>
<Content>
<asp:UpdatePanelID="UpdatePanelUser"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<asp:PanelID="PanelUser"runat="server">
</asp:Panel>
</ContentTemplate></asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPanerunat="server"ID="STATS">
<Header>
<ahref=""onclick="return false;">Statistics</a>
</Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPanerunat="server"ID="GroupEmails">
<Header>
<ahref=""onclick="return false;">Group Email</a>
</Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPanerunat="server"ID="Errors">
<Header>
<ahref=""onclick="return false;">Error reporting</a>
</Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
Thanks.
No comments:
Post a Comment