商城网站分类导航

分类导航已经成为尤其商城类网站的重要部分

首先服务器端代码可以实现这样的效果，但是一般不建议用，过分占用服务器资源，建议从后台取出数据，用json传给js，用js来实现这样的效果。

传给前台js之前最好先分下组，然后再ToDictionary一下。

数据库设计：

       

后台代码：

 IList<ProductCatalogs> ProductCatalogList = new List<ProductCatalogs>(); 
 Dictionary<string, List<ProductCatalogs>> dic = new Dictionary<string, List<ProductCatalogs>>(); 
 ProductCatalogList = BufferBasic.ProductCatalogList();
 dic = ProductCatalogList.GroupBy(c => c.ParentID).ToDictionary(a => a.Key, a => a.ToList());  
 this.ViewBag.catalog = dic;

怎么查出分类的list集合就不在这里详述，

重点是前台代码：

@{
    Dictionary<string, List<ProductCatalogs>> catalogs = this.ViewBag.catalog;
}

<script>

$(function(){
 var productCatalogs=@(new MvcHtmlString(SerializeHelper.SerializeToJson(catalogs)));
    for(var key in productCatalogs)
    {
        if(key=="00")
        {
            for(var v1 in productCatalogs[key])
            {
                var up='<li class="nav_l_li"><a href="/product/list?catalogid='+productCatalogs[key][v1].CatalogID+
                                '"><dl class="nav_l_Rice clearfix">'+
                                '<dt>'+productCatalogs[key][v1].DisplayName+'</dt>'+
                                '<dd>'+productCatalogs[key][v1].Remark+'</dd></dl></a><i class="nav_l_i">></i><div class="box_submenu clearfix" id="'+productCatalogs[key][v1].CatalogID+'"></div></li>';
                $(up).appendTo($("#up"));
            }
        }
    }
    for(var key in productCatalogs)
    {
        if(key.length==2&&key!="00")
        {
            for(var v1 in productCatalogs[key])
            {
                var second='<div class="bsubmenu_div2 clearfix">'+
                        '<a href="/product/list?catalogid='+productCatalogs[key][v1].CatalogID+'" class="bsubmenu_div2_a fl">'
                            +productCatalogs[key][v1].DisplayName+'<i>></i>'+
                            '</a><ul class="bsubmenu_div2_ul clearfix fl" id="'+productCatalogs[key][v1].CatalogID+'"></ul></div>';
                $(second).appendTo($("#"+productCatalogs[key][v1].ParentID));
            }
        }
    }
    for(var key in productCatalogs)
    {
        if(key.length==4)
        {
            for(var v1 in productCatalogs[key])
            {
                var third='<li><a href="/product/list?catalogid='+productCatalogs[key][v1].CatalogID+'">'+productCatalogs[key][v1].DisplayName+'</a></li>';
                $(third).appendTo($("#"+productCatalogs[key][v1].ParentID));
            }
        }
    }

});
</script>

<div class="nav_top_s">
            <p class="nav_top_qb fl">
                全部商品分类
                <i class="nav_tops"></i>
            </p>
            <ul class="nav_l" id="up"></ul>
        </div>