Div html from code behind is not displaying C#

Question

I'm trying to generate Accordion Pane from code behind. Somehow, the accordion is not display out. I have a Menu.aspx which is in the AccordionMenu ContentPlaceHolder and also a div. In my code behind, i try to create accordion pane with the div. Below are my codes.

Menu.aspx

 <asp:Content ID="Content1" ContentPlaceHolderID="AccordionMenu" runat="Server">

<div id="divMenu" style="width: 241px" runat="server"></div>

CODE BEHIND

protected void Page_Load(object sender, EventArgs e)
{

    // Create Accordion Pane Header Content
    divMenu.InnerHtml = "<div class='tab_container' id='tab_container'>";

    foreach (SiteMapNode node in SiteMap.RootNode.ChildNodes)
    {
        // Header
        //Check whether is first node
        if (SiteMap.RootNode.ChildNodes.Count == 0)
        {
            // Create header html
            divMenu.InnerHtml += "<h3 class='d_active tab_drawer_heading' rel='" + node.Title + "'>" + node.Title + "</h3>";          
        }
        else
        {
            divMenu.InnerHtml += "<h3 class='tab_drawer_heading' rel='" + node.Title + "'>" + node.Title + "</h3>";
        }

        // Create header html
        divMenu.InnerHtml += "div id='" + node.Title + "' class='tab_content' style='display: block;'>";

        // Content
        foreach (SiteMapNode child in node.ChildNodes)
        {
            // Check Role Access Right
            if (CheckRolePermission(ConstantValues.MAINTENANCEMODE_VIEW, GetFunctionNameByTitle(child.Title)))
            {
                // Create content html
                divMenu.InnerHtml += "<p>" + child.Title + "</p>";
                divMenu.InnerHtml += "</div>";
            }
        }
    }

    divMenu.InnerHtml += "</div>";

}

HTML ONLY - Working

<table border="0" cellspacing="0" cellpadding="0" id="content-container">
    <tr>
        <td>
            <div class="tab_container" id="tab_container">
              <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
              <div id="tab1" class="tab_content" style="display: block;">
                <p>Content 1</p>
              </div>
              <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
              <div id="tab2" class="tab_content" style="display: none;">
                <p>Content 2</p>
              </div>
              <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3>
              <div id="tab3" class="tab_content" style="display: none;">
                <p>Content 3</p>
              </div>
            </div>
            <script src="Menu/Js/menu.js" type="text/javascript"></script>
        </td>
        <td/>
    </tr>
</table>

Any specific reason for not using nested repeaters (<asp:Repeater />)? — schei1
– schei1, Commented Aug 21, 2015 at 7:20
i was using ajax accordion pane. Now, my client requested to make the website mobile responsive, i replace the ajax accordion pane with CSS — belltric
– belltric, Commented Aug 21, 2015 at 7:23
when you do this kind of solution (which i would recommend you to do) , you should use a <asp:panel> instead of a <div runat="server"> , asp:panel generates a html Div. — Thorarins
– Thorarins, Commented Aug 21, 2015 at 7:24
Can you post the rendered markup? Does it render the <div /> at all? Could it be related to css? — schei1
– schei1, Commented Aug 21, 2015 at 7:48

Rashmin Javiya · Accepted Answer · 2015-08-21 07:20:19Z

1

You missed starting tag of div. try this one.

protected void Page_Load(object sender, EventArgs e)
{

    // Create Accordion Pane Header Content
    divMenu.InnerHtml = "<div class='tab_container' id='tab_container'>";

    foreach (SiteMapNode node in SiteMap.RootNode.ChildNodes)
    {
        // Header
        //Check whether is first node
        if (SiteMap.RootNode.ChildNodes.Count == 0)
        {
            // Create header html
            divMenu.InnerHtml += "<h3 class='d_active tab_drawer_heading' rel='" + node.Title + "'>" + node.Title + "</h3>";          
        }
        else
        {
            divMenu.InnerHtml += "<h3 class='tab_drawer_heading' rel='" + node.Title + "'>" + node.Title + "</h3>";
        }

        // Create header html
        divMenu.InnerHtml += "<div id='" + node.Title + "' class='tab_content' style='display: block;'>";

        // Content
        foreach (SiteMapNode child in node.ChildNodes)
        {
            // Check Role Access Right
            if (CheckRolePermission(ConstantValues.MAINTENANCEMODE_VIEW, GetFunctionNameByTitle(child.Title)))
            {
                // Create content html
                divMenu.InnerHtml += "<p>" + child.Title + "</p>";
            }
        }

        divMenu.InnerHtml += "</div>";
    }

    divMenu.InnerHtml += "</div>";

}

answered Aug 21, 2015 at 7:20

Rashmin Javiya

5,2223 gold badges31 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

belltric Over a year ago

still not displaying =(

belltric Over a year ago

when i debug, it is not entering the page_load. Any idea to enter the page_load function so I can check the generated html output?

Collectives™ on Stack Overflow

Div html from code behind is not displaying C#

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related