locked
Multiple Accordions Error RRS feed

  • Question

  • User-1395768221 posted

    Just updated to the latest version of ACT.  It seems now that two accordions on the same page causes error:

    Multiple controls with the same ID 'h0' were found. FindControl requires that controls have unique IDs.

    If you eliminate the HeaderTemplate, you get the same error except the ID is: 'c0'.  HeaderTemplates or ContentTemplates can be blank and you get the same error.   The error is very simple to replicate - just place two accordions on the same page (with HeaderTemplates).

    I've found this error posted in other threads, but no solution or work around that works for me.

    Any ideas?

    Friday, March 22, 2019 5:15 PM

Answers

  • User839733648 posted

    Hi wgcampbell,

    I reprocude your issue successfully and find a work around.

    I suggest that you could use Masterpage and use the contentplaceholder to put the two Accordions into different ones.

    The principle of the workaround is similar to yours.

    Here is my code.

    Master page.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplicationMaster.SiteMaster" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
        <asp:ContentPlaceHolder runat="server" ID="HeadContent">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
    ......
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <asp:ContentPlaceHolder ID="MainContent2" runat="server">
                </asp:ContentPlaceHolder>
    ......
        </form>
    </body>
    </html>
    

    .aspx

    <%@ Page Title="Contact" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="WebApplicationMaster.Contact" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                var list = new List<KeyValuePair<string, int>>();
                list.Add(new KeyValuePair<string, int>("Tom", 13));
                list.Add(new KeyValuePair<string, int>("Dick", 24));
                list.Add(new KeyValuePair<string, int>("Harry", 45));
                Accordion1.DataSource = list;
                Accordion1.DataBind();
                Accordion2.DataSource = list;
                Accordion2.DataBind();
            }
        </script>
    </asp:Content>
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <ajaxToolkit:Accordion ID="Accordion1" runat="server" RequireOpenedPane="false"> <HeaderTemplate><%# Eval("Key") %></HeaderTemplate> <ContentTemplate><%# Eval("Value") %></ContentTemplate> </ajaxToolkit:Accordion> </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent2" runat="server"> <ajaxToolkit:Accordion ID="Accordion2" runat="server"> <HeaderTemplate><%# Eval("Key") %></HeaderTemplate> <ContentTemplate><%# Eval("Value") %></ContentTemplate> </ajaxToolkit:Accordion> </asp:Content>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 26, 2019 4:12 AM

All replies

  • User-1395768221 posted

    OK - found a moderately simple workaround - I created a User Control for the accordion. 

    Multiple "accordion" User Controls on one page now don't appear to cause any problems.

    Still consider this as a bug - and would be interested in any super simple solution.

    Saturday, March 23, 2019 5:21 PM
  • User839733648 posted

    Hi wgcampbell,

     The error is very simple to replicate - just place two accordions on the same page (with HeaderTemplates).

    I've made a sample to try to reproduce your issue but I'm sorry that I failed.

    Here is my testing code. There is no error when running it.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <ajaxToolkit:Accordion ID="Accordion1" runat="server" requireopenedpane="false">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
                        <Header>This is the first Header</Header>
                        <Content>This is the first Content</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <ContentTemplate>the first ContentTemplate</ContentTemplate>
            </ajaxToolkit:Accordion>
            <ajaxToolkit:Accordion ID="Accordion2" runat="server">
                <Panes>
                    <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
                        <Header>This is the second Header</Header>
                        <Content>This is the second Content</Content>
                    </ajaxToolkit:AccordionPane>
                </Panes>
                <ContentTemplate>the second ContentTemplate</ContentTemplate>
            </ajaxToolkit:Accordion>
        </form>
    </body>
    </html>
    

    If possible, please provide more details like your testing code so that it will be easier for us to help with you.

    Best Regards,

    Jenifer

    Monday, March 25, 2019 4:16 AM
  • User-1395768221 posted

    Thanks for your code, Jenifer.  My accordions are dynamic, based upon a datasource - they contain only HeaderTemplates and ContentTemplates as follows:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!DOCTYPE html>
    <script runat="server">
    
        protected void Page_Load(object sender, EventArgs e)
        {
            var list = new List<KeyValuePair<string, int>>();
            list.Add(new KeyValuePair<string, int>("Tom", 13));
            list.Add(new KeyValuePair<string, int>("Dick", 24));
            list.Add(new KeyValuePair<string, int>("Harry", 45));
            Accordion1.DataSource = list;
            Accordion1.DataBind();
            Accordion2.DataSource = list;
            Accordion2.DataBind();
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:Accordion ID="Accordion1" runat="server">
                <HeaderTemplate><%# Eval("Key") %></HeaderTemplate>
                <ContentTemplate><%# Eval("Value") %></ContentTemplate>
            </asp:Accordion>
            <asp:Accordion ID="Accordion2" runat="server">
                <HeaderTemplate><%# Eval("Key") %></HeaderTemplate>
                <ContentTemplate><%# Eval("Value") %></ContentTemplate>
            </asp:Accordion>
        </form>
    </body>
    </html>
    

    I think you'll see the error if you run the above code.

    Monday, March 25, 2019 5:32 PM
  • User839733648 posted

    Hi wgcampbell,

    I reprocude your issue successfully and find a work around.

    I suggest that you could use Masterpage and use the contentplaceholder to put the two Accordions into different ones.

    The principle of the workaround is similar to yours.

    Here is my code.

    Master page.

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplicationMaster.SiteMaster" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <!DOCTYPE html>
    
    <html lang="en">
    <head runat="server">
        <asp:ContentPlaceHolder runat="server" ID="HeadContent">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager runat="server"></asp:ScriptManager>
    ......
                <asp:ContentPlaceHolder ID="MainContent" runat="server">
                </asp:ContentPlaceHolder>
                <asp:ContentPlaceHolder ID="MainContent2" runat="server">
                </asp:ContentPlaceHolder>
    ......
        </form>
    </body>
    </html>
    

    .aspx

    <%@ Page Title="Contact" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="WebApplicationMaster.Contact" %>
    
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                var list = new List<KeyValuePair<string, int>>();
                list.Add(new KeyValuePair<string, int>("Tom", 13));
                list.Add(new KeyValuePair<string, int>("Dick", 24));
                list.Add(new KeyValuePair<string, int>("Harry", 45));
                Accordion1.DataSource = list;
                Accordion1.DataBind();
                Accordion2.DataSource = list;
                Accordion2.DataBind();
            }
        </script>
    </asp:Content>
    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> <ajaxToolkit:Accordion ID="Accordion1" runat="server" RequireOpenedPane="false"> <HeaderTemplate><%# Eval("Key") %></HeaderTemplate> <ContentTemplate><%# Eval("Value") %></ContentTemplate> </ajaxToolkit:Accordion> </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContent2" runat="server"> <ajaxToolkit:Accordion ID="Accordion2" runat="server"> <HeaderTemplate><%# Eval("Key") %></HeaderTemplate> <ContentTemplate><%# Eval("Value") %></ContentTemplate> </ajaxToolkit:Accordion> </asp:Content>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 26, 2019 4:12 AM
  • User-1395768221 posted

    Thank you Jenifer for your (workaround) suggestion.  I marked your suggestion as the answer, even though it doesn't fix what I would call a basic bug.  

    Cheers!

    Tuesday, March 26, 2019 7:22 PM