商城網站分類導航

分類導航已經成爲尤爲商城類網站的重要部分

首先服務器端代碼能夠實現這樣的效果，可是通常不建議用，過度佔用服務器資源，建議從後臺取出數據，用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>