动态填充megamenu

Question

我有这个功能，可以在三个级别获得类别。

• 获得ParentCategories
的人
• 按ParentCategoryID
获取类别的人
• Subcategories获得categoriesID的一个。

我想构建一个看起来像这个网站的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>

结果

usercontrol的代码

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

我想动态地制作它，现在它只是动态的父类别。

我需要以某种方式通过id来知道你在我的函数中徘徊的女性父类别，这个函数获取类别，所以我可以用它来填充我的用户控件

由于

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();
        }
    }

}