您现在的位置是：网站首页> 编程资料编程资料
ASP.NET MVC实现树形导航菜单_实用技巧_
2023-05-24
265人已围观
简介 ASP.NET MVC实现树形导航菜单_实用技巧_
在需要处理很多分类以及导航的时候，树形导航菜单就比较适合。例如在汽车之家上：
页面主要分两部分，左边是导航菜单，右边显示对应的内容。现在，我们就在ASP.NET MVC 4 下临摹一个，如下：
实现的效果包括：
1、点击导航菜单上的品牌，左侧显示该品牌下的所有车型。
2、点击导航菜单上的车系，左侧显示该车系下的所有车型。
3、点击左侧上方的字母导航，锚点跳到导航菜单的对应部分。
4、页面加载完毕，显示所有品牌和车系，即树形导航完全展开。
5、点击导航菜单上的品牌，收缩或展开对应的车系，收缩时，品牌前面图标为+号，展开时，品牌前面的图片为-号。
源码部分，在这里。
思路呢？
页面分成左右2部分，使用Bootstrap轻松实现：
左侧最上方的字母导航，被放在一个div中，页面加载的时候向控制器动态请求。
品牌上方的字母归类，比如奥迪上方的字母A，实际上是一个div。
品牌和车系放在了ul中，比如奥迪品牌以及奥迪下的奥迪A4和奥迪A6车系。车系被放在了dl中。
树形菜单采用模版比较合适，先把数据填充到模版，再把模版追加到页面元素。
当点击左侧树形导航上的品牌或车系，右侧通过iframe来呈现对应的内容。
领域先行。有关品牌和车系就抽象成如下的类：
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; } }有关车型就抽象成如下的类：
public class Car { public int Id { get; set; } public int PinPaiId { get; set; } public int CheXiId { get; set; } public string Name { get; set; } }页面左侧呈现树形导航需要向控制器请求json数据，大致格式是：
首字母
锚点名称
所有品牌
品牌编号
品牌名称
所有车系
车系编号
车系名称
车系下车型的总数量
貌似有3层，那就从最里面这层开始建模。有关车系在树形导航中的显示：
public class CheXiForDisplay { public int CheXiId { get; set; } public int TotalCount { get; set; } public string CheXiName { get; set; } }有关品牌在树形导航中的显示：
public class PinPaiForDisplay { public int PinPaiId { get; set; } public string PinPaiName { get; set; } public List CheXis { get; set; } } 有关品牌车系分组的：
public class PinPaiCheXiForDisplay { public string FirstLetter { get; set; } public string Anchor { get; set; } public List PinPais { get; set; } } 数据源从哪里来？模拟了一个：
public class Database { public static IEnumerable GetAllCarCategories() { return new List { 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 = "保时捷",FirstLetter = "B", AnchorName = "BB", Level = 1, DelFlag = 0}, new CarCategory(){Id = 4, ParentId = 0, Name = "长安",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 = "东风",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 = "保时捷1",FirstLetter = "B", AnchorName = "BB", Level = 2, DelFlag = 0}, new CarCategory(){Id = 14, ParentId = 3, Name = "保时捷2",FirstLetter = "B", AnchorName = "BB", Level = 2, DelFlag = 0}, new CarCategory(){Id = 15, ParentId = 4, Name = "长安1",FirstLetter = "C", AnchorName = "CC", Level = 2, DelFlag = 0}, new CarCategory(){Id = 16, ParentId = 4, Name = "长安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 = "东风1",FirstLetter = "D", AnchorName = "DD", Level = 2, DelFlag = 0}, new CarCategory(){Id = 20, ParentId = 6, Name = "东风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 GetAllCars() { return new List { 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 = "保时捷101"}, new Car(){Id = 10, PinPaiId = 3, CheXiId = 13, Name = "保时捷102"}, new Car(){Id = 11, PinPaiId = 3, CheXiId = 14, Name = "保时捷201"}, new Car(){Id = 12, PinPaiId = 3, CheXiId = 14, Name = "保时捷202"}, new Car(){Id = 13, PinPaiId = 4, CheXiId = 15, Name = "长安101"}, new Car(){Id = 14, PinPaiId = 4, CheXiId = 15, Name = "长安102"}, new Car(){Id = 15, PinPaiId = 4, CheXiId = 16, Name = "长安201"}, new Car(){Id = 16, PinPaiId = 4, CheXiId = 16, Name = "长安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 = "东风101"}, new Car(){Id = 22, PinPaiId = 6, CheXiId = 19, Name = "东风102"}, new Car(){Id = 23, PinPaiId = 6, CheXiId = 20, Name = "东风201"}, new Car(){Id = 24, PinPaiId = 6, CheXiId = 20, Name = "东风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"} }; } } 好，现在可以向控制器要数据了。
public class HomeController : Controller { public ActionResult Index() { return View(); } //获取所有首字母以及锚点的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); } //获取按首字母分组后的品牌车系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 result1 = new List(); foreach (var item in allPinPaisGroup) { //品牌车系 PinPaiCheXiForDisplay pinPaiCheXiForDisplay = new PinPaiCheXiForDisplay(); pinPaiCheXiForDisplay.FirstLetter = item.Key.FirstLetter; pinPaiCheXiForDisplay.Anchor = item.Key.AnchorName; //品牌 List pinPaiForDisplays = new List(); foreach (var pinpai in item.ToList()) { PinPaiForDisplay pinPaiForDisplay = new PinPaiForDisplay(); pinPaiForDisplay.PinPaiId = pinpai.Id; pinPaiForDisplay.PinPaiName = pinpai.Name; //车系 List cheXiForDisplays = new List(); 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); } //根据品牌Id显示车型 public ActionResult GetCheXingsByPId(int pid) { var cars = Database.GetAllCars().Where(c => c.PinPaiId == pid); return View(cars); } //根据车系Id显示车型 public ActionResult GetCheXingsByChexiId(int cxid) { var cars = Database.GetAllCars().Where(c => c.CheXiId == cxid); return View(cars); } } 在Shared/_Layout.cshtml中，该引用的css,js都要引用上。
提示：
本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
相关内容
- ASP.NET MVC扩展带验证的单选按钮_实用技巧_
- 使用EF Code First搭建简易ASP.NET MVC网站并允许数据库迁移_实用技巧_
- ASP.NET MVC实现横向展示购物车_实用技巧_
- ASP.NET MVC获取多级类别组合下的产品_实用技巧_
- ASP.NET MVC使用正则表达式验证手机号码_实用技巧_
- ASP.NET MVC实现登录后跳转到原界面_实用技巧_
- ASP.NET MVC使用jQuery的Load方法加载静态页面及注意事项_实用技巧_
- ASP.NET MVC解决上传图片脏数据的方法_实用技巧_
- ASP.NET MVC使用JSAjaxFileUploader插件实现单文件上传_实用技巧_
- asp.net core 认证和授权实例详解_实用技巧_
点击排行
本栏推荐
