使用递归制作仿京东淘宝的商品分类导航栏

前些天，培训ASP.NET的老师布置了作业，制作商城的一些重要功能，

昨天做了一下其中比较难的商品分类导航类，使用了递归的方法。

ps：使用的是WebForm，希望看到MVC的同学请忽略。

最终效果图：

下面记录一下：

首先是数据库部分，使用的是SQL，在一张叫做Category的表中，设置了以下字段：

[Id]　　分类的Id，int，自增长
[Name]　　分类的名称，nvarchar(50)
[ParentId]　　父类的Id，int
[Link]　　链接地址，varchar(max)，用于打开链接，也可以通过Get传Id

这里只模拟了一部分数据，从85开始，有6个子类的测试数据，原本是做书店的后台数据库，但我追加了一部分数据，不影响功能的实现。

三层中的Model层，Category类：

using System.Collections.Generic;

namespace Cong.Model
{
    //根节点
    public class Category
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public int ParentId { get; set; }

        public string Link { get; set; }
        //子类集合 
        public List<Category> Children { get; set; }

        public Category()
        {
            this.Children = new List<Category>();
        }

        public Category(int id,string name,int parentid,string link)
        {
            this.Id = id;
            this.Name = name;
            this.ParentId = parentid;
            this.Link = link;
            this.Children = new List<Category>();
        }
    }
}

三层中的Dao层，CategoryDao类：

using Cong.Model;
using Cong.Utility;
using System.Collections.Generic;
using System.Data.SqlClient;

namespace Cong.Dao
{
    public class CategoryDao
    {
        public IEnumerable<Category> GetAllCate()
        {
            string sql = "select * from Category";
            SqlDataReader reader = SqlHelper.ExecuteReader(sql);
            if (reader.HasRows)
            {
                while (reader.Read())
                {
                    Category cate=SqlHelper.MapEntity<Category>(reader);
                    yield return cate;
                }
            }
        }
    }
}

三层中的Bll层，CategoryBll类：

using Cong.Dao;
using Cong.Model;
using System.Collections.Generic;
using System.Linq;

namespace Cong.Bll
{
    public class CategoryBll
    {
        CategoryDao cd = new CategoryDao();

        public Category GetCategorys()
        {
            List<Category> list = cd.GetAllCate().ToList();

            Category root = new Category();
            //为节点对象root添加子类，主要是parentId为0的对象
            root.Children.AddRange(from c in list where c.ParentId == 0 select c);
            //执行递归方法
            AddNode(root, list);

            return root;
        }

        //参数1：传入一个Category类型的节点，这里从root开始，
        //参数2：第二个参数就是全部分类的集合，用于检索
        public void AddNode(Category cate, List<Category> list)
        {
            for (int i = 0; i < cate.Children.Count; i++)
            {
                //临时集合对象，存放parentId与父类的Id相等的对象
                List<Category> temp = (from c in list where c.ParentId == cate.Children[i].Id select c).ToList();
                //加入到Children属性中
                cate.Children[i].Children.AddRange(temp);
                //递归，执行方法本体
                AddNode(cate.Children[i], list);
            }
        }
    }
}

Html页面的后台代码：

using Cong.Bll;
using Cong.Model;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApp
{
    public partial class master : System.Web.UI.MasterPage
    {
        protected Category root { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            CategoryBll cb = new CategoryBll();

            root = cb.GetCategorys();
        }
    }
}

定义了root属性，把从Bll层查找到的数据存到root，便于前端代码输出。

前端Html代码：

<div id="menu" class="dropdown hover-toggle">
                        <a class="navbar-brand dropdown-toggle" href="#">全部商品分类 <b class="caret"></b></a>
                        <!--data-toggle="dropdown"-->
                        <div class="clearfix"></div>
                        <ul id="categories" class="dropdown-menu">
                            <%foreach (var i in root.Children)
                                {%>
                            <li>
                                <a href="<%=i.Link %>.aspx"><i class="icon-main icon-<%=i %>"></i><%=i.Name %></a>
                                <ul class="sub-item">
                                    <%foreach (var j in i.Children)
                                        {%>
                                    <li>
                                        <a href="<%=j.Link %>.aspx"><%=j.Name %></a>
                                        <ul class="sub-item">
                                            <%foreach (var k in j.Children)
                                                {%>
                                            <li><a href="<%=k.Link %>.aspx"><%=k.Name %></a></li>
                                            <%} %>
                                        </ul>
                                    </li>
                                    <% } %>
                                </ul>
                            </li>

                            <%} %>
                        </ul>
                    </div>

这里使用的是前后台汇编的方法，在后台中已经获取了root节点，通过三层循环，把分类输出到前端。

界面是老师给的前端代码素材，我只是从SQL中查找数据，并且连接到前端。不过这里的前端用的是JQuery和BootStrap，有兴趣的话可以自己制作。

完成。之后还会更新其他部分的代码。