動態填充megamenu

Question

我有這個函數可以在三個級別獲取類別。

• 一說得到ParentCategories
• 一個由ParentCategoryID
• 一個由categoriesID得到Subcategories得到類別。

我想建立一個megamenu看起來像這樣的網站： http://www.potterybarn.com/

HTML標記

<div> 
    <asp:Repeater ID="HorizMenuRepeater" runat="server"> 
     <HeaderTemplate> 
<ul id="mega-menu"></HeaderTemplate> 
     <ItemTemplate> 
<li><a id="mBox" href="javascript:;">'<%#Eval("ParentCatName")%>'</a></li></ItemTemplate> 
<FooterTemplate></ul></FooterTemplate></asp:Repeater> 
</div> 

    <script> 
     window.addEvent('domready', function() { 


      new mBox.Tooltip({ 
       content: 'MegamenuUC', 
       setStyles: { content: { padding: 15, lineHeight: 20 } }, 
       position: { 
        x: 'right', 
        y: 'bottom' 
       }, 
       attach: 'mBox', 
       closeOnMouseleave: true 
      }); 

     }); 
</script> 
    <div id="MegamenuUC" style="display:none"> 
<uc1:Megamenu ID="Megamenu1" runat="server" /> 
</div> 

結果

的用戶控件的代碼

<ul> 
<h3>Category</h3> 
<ul> 
    <li><a href="#">Sub category</a></li> 
</ul> 
</ul> 

我想動態地做到這一點，現在它只是動態的父類別。

我需要某種方式傳遞的ID就知道魔女上空盤旋，壽PAS正確的ID給我的功能得到類別parentcategory這樣我就可以填充我的用戶用它

感謝

Answer 1

我解決它，我使用的中繼器來創建一個乾淨的列表和一個jQuery插件創建megamenu

鏈接到jQuery插件http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/options/

代碼數據綁定轉換器使用LINQ

 <div> 
     <asp:Repeater ID="ParentRepeater" runat="server" OnItemDataBound="ParentRepeater_OnItemBound"> 
      <HeaderTemplate> 
       <ul> 
      </HeaderTemplate> 
      <ItemTemplate> 
       <li><a><%# DataBinder.Eval(Container.DataItem, "ParentCatName") %></a> 
        <asp:Repeater ID="ParentCatRepeater" runat="server" OnItemDataBound="ChildRepeater_OnItemBound"> 
         <HeaderTemplate> 
          <ul> 
         </HeaderTemplate> 
         <ItemTemplate> 
          <li><a><%# DataBinder.Eval(Container.DataItem, "CategoryName") %></a> 
           <asp:Repeater ID="ChildRepeater" runat="server"> 
            <HeaderTemplate> 
             <ul> 
            </HeaderTemplate> 
            <ItemTemplate> 
             <li><a><%# DataBinder.Eval(Container.DataItem, "ProductName") %></a></li> 
            </ItemTemplate> 
            <FooterTemplate></ul></FooterTemplate> 
           </asp:Repeater> 
          </li> 

         </ItemTemplate> 
         <FooterTemplate></ul></FooterTemplate> 
        </asp:Repeater> 
       </li> 
      </ItemTemplate> 
      <FooterTemplate></ul></FooterTemplate> 
     </asp:Repeater> 

    </div> 

C＃

 protected void Page_Load(object sender, EventArgs e) 
    { 
     LinqtoDBDataContext db = new LinqtoDBDataContext(); 

     ParentRepeater.DataSource = db.GetParentCategories(); 
     ParentRepeater.DataBind(); 
    } 

    protected void ParentRepeater_OnItemBound(object sender, RepeaterItemEventArgs e) 
    { 
     if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
     { 
      dynamic cat = e.Item.DataItem as dynamic; 
      int parentcatid = Convert.ToInt32(cat.ParentCatID); 

      LinqtoDBDataContext db = new LinqtoDBDataContext(); 

      //var cats = from c in db.Categories 
      //   where c.ParentCatID == parentcatid 

      //   select c; 

      Repeater ParentCatRepeater = e.Item.FindControl("ParentCatRepeater") as Repeater; 
      ParentCatRepeater.DataSource = db.GetCategories(parentcatid); 
      ParentCatRepeater.DataBind(); 
     } 
    } 

    protected void ChildRepeater_OnItemBound(object sender, RepeaterItemEventArgs e) 
    { 
     if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) 
     { 
      dynamic prod = e.Item.DataItem as dynamic; 
      int catid = Convert.ToInt32(prod.CategoryID); 

      LinqtoDBDataContext db = new LinqtoDBDataContext(); 

      Repeater ChildRepeater = e.Item.FindControl("ChildRepeater") as Repeater; 
      ChildRepeater.DataSource = db.GetProductsInCategory(catid); 
      ChildRepeater.DataBind(); 
     } 
    } 

}