mvc3里，用jQuery+json配合实现导航菜单

最近在做个项目，首页的导航菜单有三级，之前没觉得有多难，后来实现的时候，发现在视图嵌套.net循环 太影响效率了。在查阅资料之后决定用jQuery+json来实现。废话不多说，上代码：

//后台controller的一个action，返回封装好的json。这里我放的是实例类的集合。
public ActionResult getJsonNav()
{
    HomeService home = new HomeService();
    return Json(home.getNavGoods());
}

这里是前台接收json并处理的代码，用ajax。

var jsonNav;
$.ajax({
    url: ´/Home/getJsonNav´, //请求的某个action的地址
    datatype: "json", //只有指定为json下面才可以直接用返回的json数据，否则要转化
    type: ´post´,
    success: function (data) {
        //forTree(data); //该函数中处理json格式的文章数据data;
        jsonNav = data;
        forTree(data);
    },
    beforeSend: function () {
    }
})

递归实现获取无级树数据并生成DOM结构

var forTree = function (data) {
    $.each(data, function (i, item) {
        $(´#IndexBC_left´).append(´<div class="IndexBC_left1"><a href="#"><img src="/Content/img/shouye_tubiao´ + item.ID + ´.png"/>´ + item.TYPE_NAME + ´</a></div>´);
        forSubTree(item.isLeaf);
});

//添加悬停事件，显示次级菜单
if (!$("#IndexBC_left").is(":animated")) {//首先判断是否处于动画状态
    var lis = $("#IndexBC_left .IndexBC_left1");
    //遍历文档树
    lis.each(function (i) {
        $(this).bind("mouseover", i, function () {
            $("#showNav").show();
            var hv = $("#allNav").children().eq(i);
            var str = ´<ul>´ + hv.html();
            str += ´</ul><h4><a href="#">查看全部商品分类</a></h4>´
            $("#showNav").html(str);
            $("#showNav").bind("mouseover", function () {
                $("#showNav").show();
            })
        });
    });
    //控制鼠标移除事件
    $("#IndexBC_left,#showNav").mouseleave(function () {
        $("#showNav").hide();
    });
    }
};
var forSubTree = function (subdata) {
    var str = ´<ul>´;
    $.each(subdata, function (i, item) {
        str += ´<li><p>´ + item.TYPE_NAME + ´</p><br/>´;
        $.each(item.isLeaf, function (i, em) {
        str += ´<a href="SubHome/items?ID=´ + em.ID + ´">´ + em.TYPE_NAME + ´</a>´;
    });
    str += ´</li>´;
    });
    str += ´</ul>´;
    $(´#allNav´).append(str);
};

这里是前台html代码：，样式就不贴了。相信大概思路看懂了就行

<div class="IndexBC_left" id="IndexBC_left">
</div>
<!-- 子菜单 -->
<div class="SY" id="showNav">
<!--<h4><a href="#">查看全部商品分类</a></h4>-->
</div>
<!-- 隐藏菜单 -->
<div id=´allNav´ style="display: none;">
</div>

最后感谢龙龙给我的帮助哈