ASP.NET JsonConvert序列化 三级菜单

实现如下图所示的三级侧边菜单，非常简单

• UI层
  侧边导航栏是动态加载的

<div class="lesson_classfiy_nav">
    <ul id="navmenu" class="mcd-menu"></ul>
</div>
<script language="javascript" type="text/javascript">
    var htmlStr = new Array();
    $(function () {
        loadNode(0);
    });
    function itemMouseMove(item) {
        $(item).addClass('active').find('s').hide();
        $(item).find('.lesson_list_show').show();
    }
    function itemMouseOut(item) {
        $(item).removeClass('active').find('s').show();
        $(item).find('.lesson_list_show').hide();
    }
    function createRootNode(data) {
        var node = "";
        $.each(data, function (i, item) {
            if (item["ParentId"] == '0') {
                node += "<li class='item' ><div class='product'><a>" + item["ClassName"] + "</a><s></s></div>";
                var child = addChildNode(data, item["Id"]);
                if (child != "") {
                    node += " <div class='lesson_list_show'>"
                         + "<div style='width:400px;'>";
                    node += child;
                    node += "</div></div>";
                }
                node += "</li>";
            }
        });
        return node;  
    }
    function addChildNode(data, id) {
        var node = "";
        $.each(data, function (i, item) {
            if (item["ParentId"] == id) {
                node += "<dl><dt><a>" + item["ClassName"] + "</a></dt>"
                     + "<dd class='cf'> ";
                var detail = addDetail(data, item["Id"]);
                if (detail != "") {
                    node += detail;
                }
                node += "</dd></dl>";
            }
        });
        return node;
    }
    function addDetail(data, id) {
        var detail = "";
        $.each(data, function (i, item) {
            if (item["ParentId"] == id) {
                detail += "<a target='_blank' href='CourseDetail.aspx?Id=" + item["Id"].split('_')[0] + "'>" + item["ClassName"] + "</a> ";
            }
        });
        return detail;
    }
    function loadNode(pId) {
        var params = {
            action:"GetData",
            id: pId,
            ts:new Date().getTime()
        };
        $.get(window.location, params, function (result) {
            var htmlstr = createRootNode(result);
            $(".lesson_classfiy_nav ul").html(htmlstr);
            $('.lesson_classfiy_nav .item').hover(function () {
                $(this).addClass('active').find('s').hide();
                $(this).find('.lesson_list_show').show();
            }, function () {
                $(this).removeClass('active').find('s').show();
                $(this).find('.lesson_list_show').hide();
            });
        }, 'json');
    }
    </script> 

• css文件

.lesson_classfiy_nav {
    position: relative;
    width: 210px;
    float: left;
    border-top: 2px solid #2FABE6;
    border-right: 0;
    height: 262px;
    background: url(../../Resourse/Image/nav_border.jpg) 100% 0 repeat-y;
}
.lesson_classfiy_nav ul {
    position: absolute;
    z-index: 800;
    width: 210px;
    height: 260px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-top: 0;
}
.lesson_classfiy_nav li > div {
    width: 208px;
    height: 37px;
    line-height: 37px;
    padding: 0 15px;
    font-size: 13px;
    color: #333;
    border-bottom: 1px solid #F5F5F5;
    background: #fff url(../../Resourse/Image/more-icon.png) 186px center no-repeat;
    background-size: 6px 10px;
    cursor: pointer;
    font-weight: 400;
}
.lesson_classfiy_nav li > div > a {
    color: #333;
}
.lesson_classfiy_nav li > div:hover a {
    color: #2FABE6;
}
.lesson_classfiy_nav li .lesson_list_show {
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.1);
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.1);
    box-shadow: 1px 2px 4px rgba(0,0,0,.1);
    overflow: hidden;
    min-height: 373px;
    min-width: 401px;
    height:auto;
    background: #fff;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 209px;
    top: -2px;
    z-index: 100;
    border-left: 0;
    display: none;
    padding-bottom: 30px;
}
.lesson_classfiy_nav li .lesson_list_show > div {
    float: left;
    width: 399px;
}
.lesson_classfiy_nav li .lesson_list_show dl {
    margin: 0 10px;
    overflow: hidden;
}
.lesson_classfiy_nav li .lesson_list_show dt {
    display: block;
    border-bottom: 1px solid #f5f5f5;
    height: 37px;
    line-height: 45px;
}
.lesson_classfiy_nav li .lesson_list_show dt > a {
    color: #333;
    font-size: 13px;
    font-weight: 400;
}
.lesson_classfiy_nav li .lesson_list_show dd {
    list-style: none;
    margin-left: -8px;
    padding: 3px 0;
}
.lesson_classfiy_nav li .lesson_list_show dd a {
    height: 14px;
    line-height: 14px;
    margin-bottom: 10px;
    margin-top: 4px;
    padding: 0 7px;
    color: #666;
    display: inline-block;
    font-size: 12px;
    border-left: 1px solid #e0e0e0;
    float: left;
    white-space: nowrap;
    font-weight: 400;
}
.lesson_classfiy_nav .active .product  {
    line-height: 32px;
    background-position: -12px -185px;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    width: 210px;
    border-left: 2px solid #2FABE6;
    border-right: 0px;
}
.lesson_classfiy_nav .active .product  a {
    color: #2FABE6;
}
.lesson_list_show dl dd a:hover{
    color: #2FABE6;
}

• 后台的处理方法

public partial class Index 
{
    private static CCourse cc = new CCourse();
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string action = Request["action"];
            if (!string.IsNullOrEmpty(action))
            {
                MethodInfo method = this.GetType().GetMethod(action);
                if (method != null) 
                {
                    method.Invoke(this, null);
                }
            }
        }
    }

    //前台调用的就是这个
    public void GetData()
    {
        string result = string.Empty;
        DataTable dty = cc.GetClassInfo();
        result = JsonConvert.SerializeObject(dty);
        Response.Write(result);
        Response.End();
    }
  }

• DALSQLServer层

public class Course :  ICourse
{
    public DataTable GetClassInfo()
    {
       string tsql = "SELECT convert(varchar(10),Id) as Id, ClassName, ParentId FROM IT_CourseClass  UNION ALL SELECT convert(varchar(10),Id)+'_Course' as Id, CourseName ClassName, ClassId ParentId FROM IT_Course";
       DataTable dt = DBResHelper.ExecuteTable(CommandType.Text, tsql);
       return dt;
    }
}

• DALFactory层

public interface ICourse
{
    DataTable GetClassInfo();
}
public sealed partial class DataAccess
{
    public static ICourse CreateCourse()
    {
        string className = path + ".Course";
        return (ICourse)Assembly.Load(path).CreateInstance(className);
    }
}

• Content层

public class CCourse
{
    private ICourse ic;
    public DataTable GetClassInfo( )
    {
        return ic.GetClassInfo();
    }
}