Haben Sie Probleme mit JavaScript-Menü in Asp.Net Seite

Question

Bevor ich mein Problem hier, bitte notieren, dass ich würde wirklich gerne Javascript und CSS für das Menü verlassen, wie es ist.

Jetzt zu meinem Problem. Ich habe ein Menü in JavaScript, dass ich ein Problem habe, in Asp.net-Seite zu setzen, habe ich Problem, den richtigen HTML zu produzieren, um richtiger zu sein.

Ich würde wirklich schätzen, wenn jemand mich in die richtige Richtung zeigen könnte.

das Menü in HTML wie folgt aussieht:

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

wie Sie sehen können, die divs sind nicht für die einzelnen Menü symmetrisch, die keine Kinder I hat einfach haben Link Wrapped in Div, aber für das Menü mit Kindern habe ich ein Menü mit o ne trigger div und 2 weitere etwas main divs drin.

Ich habe versucht so etwas wie die für dieses Menü auf asp.net Seite zu setzen (do atentions nicht setzen namings jetzt zu verbinden, sie sind nicht wichtig):

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

und der hinter Code ist sehr einfach und es ist nichts besonderes, alles, was ich tun, ist nur zweite Repeater binden, die innerhalb der ersten Repeater und Platten sichtbar oder unsichtbar machen:

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

Allerdings ist meine Probleme, die Platten produzieren div ist, auch wenn sie versteckt sind, die ausbricht die ganze HTML-Struktur.

Ich würde wirklich nicht gerne die divs formatieren innerhalb des Codes hinter sich.

Answer 1

Um die Antwort von blesh zu ergänzen, verwenden Sie PlaceHolder statt Panel. Platzhalter rendern kein HTML, das den Inhalt umgibt.

Answer 2

Gut für eine Sache dieser Abschnitt hier:

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

ungültig HTML machen, wenn Visible auf true gesetzt ist, damit potenziell sie JavaScript und CSS-Interaktionen zu vermasseln.

, die herauskommen wird wie so:

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

als Panel-Kontrollen eine um machen, was sie umschließen. Machen Sie sich ein Bild davon und Sie werden wahrscheinlich Ihr Problem lösen.