Возникли проблемы при размещении меню JavaScript на странице Asp.Net - PullRequest
Новая
       25

Возникли проблемы при размещении меню JavaScript на странице Asp.Net

0 голосов
/ 03 августа 2009

Прежде, чем я опубликую свою проблему здесь, пожалуйста, обратите внимание, что я действительно хотел бы оставить 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 , но для меню с дочерними элементами у меня есть меню с одним триггером div и двумя более несколькими главными 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 внутри кода.

Ответы [ 2 ]

2 голосов
/ 03 августа 2009

Ну, во-первых, этот раздел здесь: 

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

Будет отображать недействительный HTML, если Visible установлен в значение true, что потенциально может испортить ваши взаимодействия JavaScript и CSS.

Это произойдетпримерно так: 

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

, так как элементы управления Panel визуализируют все, что они включают.Так что обдумайте это, и вы, вероятно, решите свою проблему.

1 голос
/ 03 августа 2009

Чтобы дополнить ответ Блеша, используйте элемент управления PlaceHolder вместо Panel. Заполнители не отображают HTML, окружающий содержимое.

...