Having problem in puting JavaScript Menu into Asp.Net page

Question

Hello everybody.

Before I post my problem here, please be noted that i would really like to leave javascript and css for that menu as it is.

Now to my problem. I have a menu in JavaScript that I am having a problem putting into asp.net page, I am having problem to produce the proper html to be more correct.

I would really appreciate if someone could point me to the right direction.

the menu in html looks like:

        <!-- HOME -->
        <div class="menu_item" onmouseover="hide_all_panels();">
            <a href="/default.aspx">Home</a>
        </div>


        <!-- ABOUT SITE -->
        <div id="trigger1" onmouseover="show_panel('0');">
            <div class="menu_item">

                <a href="/about_us.aspx">About Us</a>
            </div>
            <div class="hidden_div">
                <!-- ABOUT WEB SITE POPOUT -->
                <div class="menu" id="popout1">
                    <div class="menu_item">
                        <a href="/frequently_asked_questions.aspx">Frequently Asked Questions</a>
                    </div>

                    <div class="menu_item">
                        <a href="/our_team.aspx">Our Team</a>
                    </div>
                    <div class="menu_item">
                        <a href="/our_board.aspx">The Board</a>
                    </div>
                </div>
            </div>

        </div>

            <a href="/blog/">Blog</a>
        </div>


        <!-- CONTACT US -->
        <div class="menu_item" onmouseover="hide_all_panels();">
            <a href="/contact.aspx">Contact Us</a>
        </div>

as you can see, the divs are not symmetric for single menu that has not children I have simply link wraped into div, but for the menu with childrens I have a menu with one trigger div and 2 more somewhat main divs inside it.

I tryed to put something like that for this menu on asp.net side (don't put atentions to link namings now, they are not important):

<asp:Repeater ID="rpt_Menu" runat="server" OnItemDataBound="rpt_Menu_DataBound">
                <ItemTemplate>

                    <asp:Panel ID="pnl_MainSubmenuDiv" runat="server" Visible="false" Enabled="false">
                        <div id="trigger<%= index %>" onmouseover="show_panel('<%= index %>');">
                    </asp:Panel>

                    <div class="menu_item" onmouseover="hide_all_panels();">
                        <a href="/default.aspx"><%# Eval("menu_name") %></a>
                    </div>

                    <asp:HiddenField ID="hdn_Id" runat="server" Value='<%# Eval("menu_id") %>' />
                    <asp:Repeater ID="rpt_SubMenu" runat="server">
                        <ItemTemplate>
                             <div class="menu" id="popout<%= index %>">
                               <div class="menu_item">
                                   <a href="/about_us.aspx"><%# Eval("menu_name") %></a>
                               </div>
                             </div>
                        </ItemTemplate>
                    </asp:Repeater>

                    <asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
                        </div>
                    </asp:Panel>
                </ItemTemplate>
            </asp:Repeater>

and the code behind is very simple and there is nothing special, all i do is just bind second repeater that inside first repeater and make panels visible or invisible:

 protected void rpt_Menu_DataBound(object obj, RepeaterItemEventArgs e)
    {
        int parent_id = Int32.Parse(((HiddenField)e.Item.FindControl("hdn_Id")).Value.ToString());
        using (SamaraDataContext mycity = new SamaraDataContext())
        {
            var subMenu = from sm in mycity.tbl_menus
                          where (sm.menu_parent == parent_id)
                          select new
                          {
                              menu_id = sm.menu_id,
                              menu_name = sm.menu_name
                          };

            int count = 0;
            foreach (var item in subMenu)
            {
                count++;
            }

            if (count > 0)
            {
                ((Panel)e.Item.FindControl("pnl_MainSubmenuDiv")).Visible = true;
                ((Panel)e.Item.FindControl("pnl_MainSubmenuClose")).Visible = true;
                ((Repeater)e.Item.FindControl("rpt_SubMenu")).DataSource = subMenu.ToList();
                ((Repeater)e.Item.FindControl("rpt_SubMenu")).DataBind();
                this.index++;
            }
        }
    }
}

However my problems is that panels produce div's even if they are hidden, which breaks out all the html structure.

I would really dislike to put the divs formating inside the code behind.

Answer 1

Well for one thing this section here:

<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
  </div>
</asp:Panel>

Will render invalid HTML if Visible is set to true, thus potentially screwing up your JavaScript and CSS interactions.

That will come out like so:

<div id="something_something_pnl_MainSubmenuClose">
  </div>
</div>

as Panel controls render a around whatever they enclose. So figure a way around that, and you'll likely solve your problem.

Answer 2

Okay, I'm not 100% sure I'm understanding your problem, but if the issue is that .Visible is still leaving room on the page where the hidden control would be, you might try setting the display property to none, like this:

yourDiv.Attributes.Add("style","display:none");

Answer 3

To supplement blesh's answer, use the PlaceHolder control instead of Panel. Placeholders do not render HTML surrounding the contents.