将 JavaScript 菜单放入 Asp.Net 页面时出现问题

Question

在我在这里发布我的问题之前，请注意，我真的很想保留那个菜单的 javascript 和 css。

现在我的问题。 我在 JavaScript 中有一个菜单，但在将其放入 asp.net 页面时遇到问题，我无法生成更正确的正确 html。

如果有人能指出正确的方向，我将不胜感激。

html 中的菜单如下所示：

        <!-- 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>

如您所见，divs 对于没有子菜单的单个菜单不是对称的一个带有一个触发 div 和 2 个以上的主 div 的菜单。

我尝试在 asp.net 端为这个菜单添加类似的东西（现在不要关注链接命名，它们并不重要）：

<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>

后面的代码很简单，没有什么特别的，我所做的只是绑定第一个中继器内部的第二个中继器并使面板可见或不可见：

 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++;
            }
        }
    }
}

但是我的问题是即使隐藏面板也会产生 div，这会破坏所有 html 结构。

我真的不喜欢将 div 格式放在后面的代码中。

Answer 1

这一节在这里：

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

如果 Visible 设置为 true，将呈现无效的 HTML，从而可能会破坏您的 JavaScript 和 CSS 交互。

结果会是这样：

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

当面板控件围绕它们包含的任何内容呈现 a 时。所以想办法解决这个问题，你可能会解决你的问题。

Answer 2

要补充 blesh 的答案，请使用 PlaceHolder 控件而不是 Panel。占位符不会呈现内容周围的 HTML。