ASP.NET?MVC實(shí)現(xiàn)樹(shù)形導(dǎo)航菜單

更新時(shí)間：2022年09月14日 08:35:57 作者：Darren?Ji

這篇文章介紹了ASP.NET?MVC實(shí)現(xiàn)樹(shù)形導(dǎo)航菜單的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在需要處理很多分類(lèi)以及導(dǎo)航的時(shí)候，樹(shù)形導(dǎo)航菜單就比較適合。例如在汽車(chē)之家上：

頁(yè)面主要分兩部分，左邊是導(dǎo)航菜單，右邊顯示對(duì)應(yīng)的內(nèi)容?，F(xiàn)在，我們就在ASP.NET MVC 4 下臨摹一個(gè)，如下：

實(shí)現(xiàn)的效果包括：
1、點(diǎn)擊導(dǎo)航菜單上的品牌，左側(cè)顯示該品牌下的所有車(chē)型。
2、點(diǎn)擊導(dǎo)航菜單上的車(chē)系，左側(cè)顯示該車(chē)系下的所有車(chē)型。
3、點(diǎn)擊左側(cè)上方的字母導(dǎo)航，錨點(diǎn)跳到導(dǎo)航菜單的對(duì)應(yīng)部分。
4、頁(yè)面加載完畢，顯示所有品牌和車(chē)系，即樹(shù)形導(dǎo)航完全展開(kāi)。
5、點(diǎn)擊導(dǎo)航菜單上的品牌，收縮或展開(kāi)對(duì)應(yīng)的車(chē)系，收縮時(shí)，品牌前面圖標(biāo)為+號(hào)，展開(kāi)時(shí)，品牌前面的圖片為-號(hào)。

源碼部分，在這里。

思路呢？

頁(yè)面分成左右2部分，使用Bootstrap輕松實(shí)現(xiàn)：

<div class="row">
    <div class="col-md-2 col-lg-2 col-sm-2">
    </div>
    <div class="col-md-10 col-lg-10 col-sm-10">
    </div>
</div>

左側(cè)最上方的字母導(dǎo)航，被放在一個(gè)div中，頁(yè)面加載的時(shí)候向控制器動(dòng)態(tài)請(qǐng)求。

品牌上方的字母歸類(lèi)，比如奧迪上方的字母A，實(shí)際上是一個(gè)div。

品牌和車(chē)系放在了ul中，比如奧迪品牌以及奧迪下的奧迪A4和奧迪A6車(chē)系。車(chē)系被放在了dl中。

樹(shù)形菜單采用模版比較合適，先把數(shù)據(jù)填充到模版，再把模版追加到頁(yè)面元素。

當(dāng)點(diǎn)擊左側(cè)樹(shù)形導(dǎo)航上的品牌或車(chē)系，右側(cè)通過(guò)iframe來(lái)呈現(xiàn)對(duì)應(yīng)的內(nèi)容。

領(lǐng)域先行。有關(guān)品牌和車(chē)系就抽象成如下的類(lèi)：

    public class CarCategory
    {
        public int Id { get; set; }
        public int ParentId { get; set; }
        public string Name { get; set; }
        public string FirstLetter { get; set; }
        public string AnchorName { get; set; }
        public int Level { get; set; }
        public short DelFlag { get; set; }
    }

有關(guān)車(chē)型就抽象成如下的類(lèi)：

    public class Car
    {
        public int Id { get; set; }
        public int PinPaiId { get; set; }
        public int CheXiId { get; set; } 
        public string Name { get; set; }
    }

頁(yè)面左側(cè)呈現(xiàn)樹(shù)形導(dǎo)航需要向控制器請(qǐng)求json數(shù)據(jù)，大致格式是：

首字母
錨點(diǎn)名稱(chēng)
所有品牌
    品牌編號(hào)
    品牌名稱(chēng)
    所有車(chē)系
        車(chē)系編號(hào)
        車(chē)系名稱(chēng)
        車(chē)系下車(chē)型的總數(shù)量

貌似有3層，那就從最里面這層開(kāi)始建模。有關(guān)車(chē)系在樹(shù)形導(dǎo)航中的顯示：

    public class CheXiForDisplay
    {
        public int CheXiId { get; set; }
        public int TotalCount { get; set; }
        public string CheXiName { get; set; }
    }

有關(guān)品牌在樹(shù)形導(dǎo)航中的顯示：

    public class PinPaiForDisplay
    {
        public int PinPaiId { get; set; }
        public string PinPaiName { get; set; }
        public List<CheXiForDisplay> CheXis { get; set; }
    }

有關(guān)品牌車(chē)系分組的：

    public class PinPaiCheXiForDisplay
    {
        public string FirstLetter { get; set; }
        public string Anchor { get; set; }
        public List<PinPaiForDisplay> PinPais { get; set; }
    }

數(shù)據(jù)源從哪里來(lái)？模擬了一個(gè)：

    public class Database
    {
        public static IEnumerable<CarCategory> GetAllCarCategories()
        {
            return new List<CarCategory>
            {
                new CarCategory(){Id = 1, ParentId = 0, Name = "奧迪",FirstLetter = "A", AnchorName = "AA", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 2, ParentId = 0, Name = "寶馬",FirstLetter = "B", AnchorName = "BB", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 3, ParentId = 0, Name = "保時(shí)捷",FirstLetter = "B", AnchorName = "BB", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 4, ParentId = 0, Name = "長(zhǎng)安",FirstLetter = "C", AnchorName = "CC", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 5, ParentId = 0, Name = "大眾",FirstLetter = "D", AnchorName = "DD", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 6, ParentId = 0, Name = "東風(fēng)",FirstLetter = "D", AnchorName = "DD", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 7, ParentId = 0, Name = "豐田",FirstLetter = "F", AnchorName = "FF", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 8, ParentId = 0, Name = "福特",FirstLetter = "F", AnchorName = "FF", Level = 1, DelFlag = 0},
                new CarCategory(){Id = 9, ParentId = 1, Name = "奧迪A4",FirstLetter = "A", AnchorName = "AA", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 10, ParentId = 1, Name = "奧迪A6",FirstLetter = "A", AnchorName = "AA", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 11, ParentId = 2, Name = "寶馬1",FirstLetter = "B", AnchorName = "BB", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 12, ParentId = 2, Name = "寶馬2",FirstLetter = "B", AnchorName = "BB", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 13, ParentId = 3, Name = "保時(shí)捷1",FirstLetter = "B", AnchorName = "BB", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 14, ParentId = 3, Name = "保時(shí)捷2",FirstLetter = "B", AnchorName = "BB", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 15, ParentId = 4, Name = "長(zhǎng)安1",FirstLetter = "C", AnchorName = "CC", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 16, ParentId = 4, Name = "長(zhǎng)安2",FirstLetter = "C", AnchorName = "CC", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 17, ParentId = 5, Name = "大眾1",FirstLetter = "D", AnchorName = "DD", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 18, ParentId = 5, Name = "大眾2",FirstLetter = "D", AnchorName = "DD", Level = 2, DelFlag = 1},
                new CarCategory(){Id = 19, ParentId = 6, Name = "東風(fēng)1",FirstLetter = "D", AnchorName = "DD", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 20, ParentId = 6, Name = "東風(fēng)2",FirstLetter = "D", AnchorName = "DD", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 21, ParentId = 7, Name = "豐田1",FirstLetter = "F", AnchorName = "FF", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 22, ParentId = 7, Name = "豐田2",FirstLetter = "F", AnchorName = "FF", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 23, ParentId = 8, Name = "福特1",FirstLetter = "F", AnchorName = "AFF", Level = 2, DelFlag = 0},
                new CarCategory(){Id = 24, ParentId = 8, Name = "福特2",FirstLetter = "F", AnchorName = "AFF", Level = 2, DelFlag = 0}
            };
        }
        public static IEnumerable<Car> GetAllCars()
        {
            return new List<Car>
            {
                new Car(){Id = 1, PinPaiId = 1, CheXiId = 9, Name = "奧迪A401"},
                new Car(){Id = 2, PinPaiId = 1, CheXiId = 9, Name = "奧迪A402"},
                new Car(){Id = 3, PinPaiId = 1, CheXiId = 10, Name = "奧迪A601"},
                new Car(){Id = 4, PinPaiId = 1, CheXiId = 10, Name = "奧迪A602"},
                new Car(){Id = 5, PinPaiId = 2, CheXiId = 11, Name = "寶馬101"},
                new Car(){Id = 6, PinPaiId = 2, CheXiId = 11, Name = "寶馬102"},
                new Car(){Id = 7, PinPaiId = 2, CheXiId = 12, Name = "寶馬201"},
                new Car(){Id = 8, PinPaiId = 2, CheXiId = 12, Name = "寶馬202"},
                new Car(){Id = 9, PinPaiId = 3, CheXiId = 13, Name = "保時(shí)捷101"},
                new Car(){Id = 10, PinPaiId = 3, CheXiId = 13, Name = "保時(shí)捷102"},
                new Car(){Id = 11, PinPaiId = 3, CheXiId = 14, Name = "保時(shí)捷201"},
                new Car(){Id = 12, PinPaiId = 3, CheXiId = 14, Name = "保時(shí)捷202"},
                new Car(){Id = 13, PinPaiId = 4, CheXiId = 15, Name = "長(zhǎng)安101"},
                new Car(){Id = 14, PinPaiId = 4, CheXiId = 15, Name = "長(zhǎng)安102"},
                new Car(){Id = 15, PinPaiId = 4, CheXiId = 16, Name = "長(zhǎng)安201"},
                new Car(){Id = 16, PinPaiId = 4, CheXiId = 16, Name = "長(zhǎng)安202"},
                new Car(){Id = 17, PinPaiId = 5, CheXiId = 17, Name = "大眾101"},
                new Car(){Id = 18, PinPaiId = 5, CheXiId = 17, Name = "大眾102"},
                new Car(){Id = 19, PinPaiId = 5, CheXiId = 18, Name = "大眾201"},
                new Car(){Id = 20, PinPaiId = 5, CheXiId = 18, Name = "大眾202"},
                new Car(){Id = 21, PinPaiId = 6, CheXiId = 19, Name = "東風(fēng)101"},
                new Car(){Id = 22, PinPaiId = 6, CheXiId = 19, Name = "東風(fēng)102"},
                new Car(){Id = 23, PinPaiId = 6, CheXiId = 20, Name = "東風(fēng)201"},
                new Car(){Id = 24, PinPaiId = 6, CheXiId = 20, Name = "東風(fēng)202"},
                new Car(){Id = 25, PinPaiId = 7, CheXiId = 21, Name = "豐田101"},
                new Car(){Id = 26, PinPaiId = 7, CheXiId = 21, Name = "豐田102"},
                new Car(){Id = 27, PinPaiId = 7, CheXiId = 22, Name = "豐田201"},
                new Car(){Id = 28, PinPaiId = 7, CheXiId = 22, Name = "豐田202"},
                new Car(){Id = 29, PinPaiId = 8, CheXiId = 23, Name = "福特101"},
                new Car(){Id = 30, PinPaiId = 8, CheXiId = 23, Name = "福特102"},
                new Car(){Id = 31, PinPaiId = 8, CheXiId = 24, Name = "福特201"},
                new Car(){Id = 32, PinPaiId = 8, CheXiId = 24, Name = "福特202"}
            };
        }
    }

好，現(xiàn)在可以向控制器要數(shù)據(jù)了。

   public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        //獲取所有首字母以及錨點(diǎn)的json
        public ActionResult GetFirstLettersJson()
        {
            var allCarCategories = Database.GetAllCarCategories();
            var result = from l in allCarCategories
                group l by l.FirstLetter
                into g
                select new {firstletter = g.Key, anchor=g.ToList()[0].AnchorName};
            return Json(result, JsonRequestBehavior.AllowGet);
        }
        //獲取按首字母分組后的品牌車(chē)系json
        public ActionResult GetPinPaiCheXiJson() 
        {
            var allPinPais = Database.GetAllCarCategories().Where(c => c.Level == 1).OrderBy(c => c.FirstLetter);
            var allPinPaisGroup = from p in allPinPais
                group p by new
                {
                    p.FirstLetter,
                    p.AnchorName
                };
            List<PinPaiCheXiForDisplay> result1 = new List<PinPaiCheXiForDisplay>();
            foreach (var item in allPinPaisGroup)
            {
                //品牌車(chē)系
                PinPaiCheXiForDisplay pinPaiCheXiForDisplay = new PinPaiCheXiForDisplay();
                pinPaiCheXiForDisplay.FirstLetter = item.Key.FirstLetter;
                pinPaiCheXiForDisplay.Anchor = item.Key.AnchorName;
                
                //品牌
                List<PinPaiForDisplay> pinPaiForDisplays = new List<PinPaiForDisplay>();
                foreach (var pinpai in item.ToList())
                {
                    PinPaiForDisplay pinPaiForDisplay = new PinPaiForDisplay();
                    pinPaiForDisplay.PinPaiId = pinpai.Id;
                    pinPaiForDisplay.PinPaiName = pinpai.Name;
                    
                    //車(chē)系
                    List<CheXiForDisplay> cheXiForDisplays = new List<CheXiForDisplay>();
                    var cheXis = Database.GetAllCarCategories().Where(c => c.ParentId == pinpai.Id).OrderBy(c => c.Id);
                    foreach (var chexi in cheXis)
                    {
                        CheXiForDisplay cheXiForDisplay = new CheXiForDisplay();
                        cheXiForDisplay.CheXiId = chexi.Id;
                        cheXiForDisplay.CheXiName = chexi.Name;
                        cheXiForDisplay.TotalCount = cheXis.Count();
                        cheXiForDisplays.Add(cheXiForDisplay);
                    }
                    pinPaiForDisplay.CheXis = cheXiForDisplays;
                    pinPaiForDisplays.Add(pinPaiForDisplay);
                }
                pinPaiCheXiForDisplay.PinPais = pinPaiForDisplays;
                result1.Add(pinPaiCheXiForDisplay);
            }
            return Json(result1, JsonRequestBehavior.AllowGet);
        }
        //根據(jù)品牌Id顯示車(chē)型
        public ActionResult GetCheXingsByPId(int pid)
        {
            var cars = Database.GetAllCars().Where(c => c.PinPaiId == pid);
            return View(cars);
        }
        //根據(jù)車(chē)系Id顯示車(chē)型
        public ActionResult GetCheXingsByChexiId(int cxid)
        {
            var cars = Database.GetAllCars().Where(c => c.CheXiId == cxid);
            return View(cars);
        }
    }

在Shared/_Layout.cshtml中，該引用的css,js都要引用上。

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    <link href="~/bootstrap/css/bootstrap.min.css" rel="external nofollow"  rel="stylesheet" />
    @Styles.Render("~/Content/css")
    @RenderSection("styles", required: false)
    @Scripts.Render("~/bundles/jquery")
    <script src="~/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    @RenderBody()
    
    @RenderSection("scripts", required: false)
</body>

Home/Index.cshtml就負(fù)責(zé)顯示就行了。

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles
{
    <link href="~/Content/sidemenu.css" rel="external nofollow"  rel="stylesheet" />
}
<div class="row">
    <div class="col-md-2 col-lg-2 col-sm-2">
        <!--字母導(dǎo)航開(kāi)始-->
        <div id="lDaoHang">
        </div>
        <!--字母導(dǎo)航結(jié)束-->
        <!--樹(shù)開(kāi)始-->
        <div id="cTreeDiv" style="overflow-x: hidden; overflow-y: scroll; height: 550px; width: 99%;">
        </div>
        <!--樹(shù)結(jié)束-->
        <div>
            <dl id="test"></dl>
        </div>
    </div>
    <div class="col-md-10 col-lg-10 col-sm-10">
        <div class="carContent" id="carContent">
            <iframe id="frameCar" src="" scrolling="no" frameborder="0" height="100%" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
        </div>
    </div>
</div>
@section scripts
{
    <script src="~/Scripts/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //加載首字母
            $.getJSON('@Url.Action("GetFirstLettersJson", "Home")', function (data) {
                $('#firstLetterTemplate').tmpl(data).appendTo('#lDaoHang');
            });
            //加載所有品牌車(chē)系
            $.getJSON('@Url.Action("GetPinPaiCheXiJson", "Home")', function (data) {
                $('#pinpaiTemplate').tmpl(data).appendTo('#cTreeDiv');
                $('.pLink').each(function () {
                    pinPaiInitialState($(this));
                });
            });
            //隱藏ifame所在div
            $("#carContent").css("display", "none");
            //點(diǎn)擊品牌
            $('#cTreeDiv').on("click", ".pLink", function () {
                //切換
                togglePinPaiState($(this));
                //顯示右邊區(qū)域
                var url = "/Home/GetCheXingsByPId?pid=" + $(this).attr('id');
                $("#frameCar").attr("src", url);
                $("#carContent").css("display", "block");
            });
            //點(diǎn)擊車(chē)系
            $('#cTreeDiv').on("click", ".cxLink", function () {
                //顯示右邊區(qū)域
                var url = "/Home/GetCheXingsByChexiId?cxid=" + $(this).attr('id');
                $("#frameCar").attr("src", url);
                $("#carContent").css("display", "block");
            });
        });
        //品牌的初始狀態(tài),即把車(chē)系隱藏和品牌前面的圖標(biāo)為+號(hào)
        var pstate = 0;
        //品牌只有2種狀態(tài)：所有車(chē)系隱藏，品牌前面的圖標(biāo)變?yōu)闉?號(hào)；要么顯示品牌下的所有車(chē)系，品牌前面的圖標(biāo)變?yōu)?號(hào)
        //把車(chē)系隱藏和品牌前面的圖標(biāo)為+號(hào)，記為狀態(tài)0
        //把車(chē)系隱藏和品牌前面的圖標(biāo)為-號(hào)，記為狀態(tài)1
        function togglePinPaiState($pinpai) {
            if (pstate == 0) {
                var $i = $pinpai.parent().find("i");
                var attr = $i.attr('class');
                if (typeof attr !== typeof undefined && attr !== false) {
                    $i.removeClass("iconHide");
                }
                $i.addClass("iconShow");
                $pinpai.parent().parent().find("dl").show();
                pstate = 1;
            } else {
                var $j = $pinpai.parent().find("i");
                var attr1 = $j.attr('class');
                if (typeof attr1 !== typeof undefined && attr1 !== false) {
                    $j.removeClass("iconShow");
                }
                $j.addClass("iconHide");
                $pinpai.parent().parent().find("dl").hide();
                pstate = 0;
            }
        }
        function pinPaiInitialState($pinpai) {
            pstate = 0;
            togglePinPaiState($pinpai);
        }
    </script>
    <!--首字母模版-->
    <script id="firstLetterTemplate" type="text/x-jQuery-tmpl">
        <div class="lWrapper">
            <a href="#${anchor}" rel="external nofollow"  class="lLink">${firstletter}</a>
        </div>
    </script>
    <!--品牌模版-->
    <script id="pinpaiTemplate" type="text/x-jQuery-tmpl">
        <div class="lHeader" id="${Anchor}">${FirstLetter}</div>
        <ul class="uTree">
            {{if PinPais}}
            {{each PinPais}}
            <li>
                <h5 class="font-bold">
                    <a href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  class="pLink" id="${$value.PinPaiId}"><i></i>${$value.PinPaiName}</a>
                </h5>
                <dl>
                    {{tmpl(CheXis) "#chexiTemplate"}}
                </dl>
            </li>
            {{/each}}
            {{else}}
            <li>沒(méi)有對(duì)應(yīng)品牌</li>
            {{/if}}
                
        </ul>
    </script>
    <!--車(chē)系模版-->
    <script id="chexiTemplate" type="text/x-jQuery-tmpl">
        <dd><a id="${CheXiId}" href="javascript:void(0)" rel="external nofollow"  rel="external nofollow"  class="cxLink">${CheXiName}<em>(${TotalCount})</em></a></dd>
    </script>
}

以上，

從控制器返回的有關(guān)樹(shù)形菜單的json數(shù)據(jù)，先填充到j(luò)query.tmpl.min.js模版中，然后追加到頁(yè)面上。
樹(shù)形菜單的展開(kāi)或收縮，通過(guò)全局變量pstate在0和1之間的切換來(lái)實(shí)現(xiàn)，頁(yè)面初次加載給變量pstate一個(gè)初始值。

另外，點(diǎn)擊樹(shù)形導(dǎo)航上的品牌，iframe加載的視圖是Home/GetCheXingsByPId.cshtml

@model IEnumerable<MvcApplication1.Models.Car>
@{
    ViewBag.Title = "GetCheXingsByPId";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>GetCheXingsByPId</h2>
<div>
    @foreach (var item in Model)
    {
        <p>@item.Name </p>
    
    }
</div>

點(diǎn)擊樹(shù)形導(dǎo)航上的車(chē)系，iframe加載的視圖是Home/GetCheXingsByChexiId.cshtml

@model IEnumerable<MvcApplication1.Models.Car>
@{
    ViewBag.Title = "GetCheXingsByChexiId";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>GetCheXingsByChexiId</h2>
<div>
    @foreach (var item in Model)
    {
        <p>@item.Name </p>
    
    }
</div>

就這樣。

到此這篇關(guān)于ASP.NET MVC實(shí)現(xiàn)樹(shù)形導(dǎo)航菜單的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: