在MVC下用XML实现breadcrumbs导航栏

开发 后端
本文将介绍在ASP.NET MVC下用XML实现breadcrumbs导航栏。这是网站开发中比较常用的一种导航栏样式,类似于苹果MAC界面的样式。

先看下样子导航栏样式

像这种导航栏(breadcrumbs)在mvc下我们来实现他。我们采用XML来实现这个功能。

1.首先做个准备,我们编写rounting规则(顺便提一句,我们要用到rounting功能,所以规则必须写正确,不然出不来喔)

代码如下

  1. public static void RegisterRoutes(RouteCollection routes)  
  2.         {  
  3.             routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  
  4.             routes.MapRoute(  
  5.              "inner",                                              // Route name  
  6.              "resume/test/inner/{action}/{id}",                           // URL with parameters  
  7.              new { controller = "inner"action = "Index"id = "" }  // Parameter defaults  
  8.              );  
  9.             routes.MapRoute(  
  10.            "test",                                              // Route name  
  11.            "resume/test/{action}/{id}",                           // URL with parameters  
  12.            new { controller = "test"action = "Index"id = "" }  // Parameter defaults  
  13.            );  
  14.             routes.MapRoute(  
  15.                 "Default",                                              // Route name  
  16.                 "{controller}/{action}/{id}",                           // URL with parameters  
  17.                 new { controller = "Home"action = "Index"id = "" },  
  18.                 new { controller = "^(?!(test|inner)).*$"action = "^(?!test).*$" }  
  19.             );    
  20.         } 

我们加了两个规则

/resume/test

和/resume/test/inner

2.编写用到的XML文件,注意是树形结构的

在models写个Navigator.xml

  1. <?xml version="1.0" encoding="utf-8" ?> 
  2. <node Title="首页"  Description="潘峰的网站" Action="Index" Controller="Home"> 
  3.   <node Title="简历" Description="在线简历" Action="Index" Controller="Resume"> 
  4.     <node Title="Test" Description="Test" Action="Index" Controller="test"> 
  5.       <node Title="inner" Description="inner" Action="Index" Controller="inner"> 
  6.       </node> 
  7.     </node> 
  8.   </node> 
  9. </node> 

3.编写我们的类文件来实现Navigator

在models写个navigatorHelper.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Xml;  
  6. using System.Xml.Linq;  
  7. using System.Web.Routing;  
  8. using System.Web.Mvc;  
  9. using System.IO;  
  10. using System.Text;  
  11.  
  12. namespace conansoft.Helpers  
  13. {  
  14.     public static class MenuHelper  
  15.     {  
  16.         private static HttpServerUtilityBase Server = null;  
  17.         private static HttpRequestBase Request = null;  
  18.         private static UrlHelper Url = null;  
  19.         private static RouteValueDictionary RouteDictionary = null;  
  20.         public static string Navigator(this HtmlHelper helper)  
  21.         {  
  22.             Server = helper.ViewContext.RequestContext.HttpContext.Server;  
  23.             Request = helper.ViewContext.RequestContext.HttpContext.Request;  
  24.             Url = new UrlHelper(helper.ViewContext.RequestContext);  
  25.             RouteDictionary = helper.ViewContext.RequestContext.RouteData.Values;  
  26.             string xmlPath = Server.MapPath(Url.Content("~/Models/Navigator.xml"));  
  27.             XDocument doc = XDocument.Load(xmlPath);  
  28.             XElement node = FindNode(doc.Root);  
  29.             StringBuilder sb = new StringBuilder();  
  30.             Stack s = new Stack();  
  31.             while (node != null)  
  32.             {  
  33.                 s.Push(node);  
  34.                 nodenode = node.Parent;  
  35.             }  
  36.             //输出breadcrumbs.可以自行修改使之符合你的要求  
  37.             while (s.Count() != 0)  
  38.             {  
  39.                 node = s.Pop();  
  40.                 if (UrlEqual(node))  
  41.                 {  
  42.                     sb.AppendLine(string.Format("{0}", node.Attribute("Title").Value, node.Attribute("Description").Value));  
  43.                 }  
  44.                 else  
  45.                 {  
  46.                     sb.AppendLine(string.Format("{0}", node.Attribute("Title").Value,  
  47.                         Url.Action(node.Attribute("Action").Value, node.Attribute("Controller").Value),  
  48.                         node.Attribute("Description").Value));  
  49.                     sb.AppendLine(" > ");  
  50.                 }  
  51.             }  
  52.             return sb.ToString();  
  53.         }  
  54.  
  55.         ///   
  56.         /// 查找当前节点  
  57.         ///   
  58.         /// 当前节点  
  59.         /// 找到返回,找不到为空  
  60.         private static XElement FindNode(XElement e)  
  61.         {  
  62.             XElement result = e;  
  63.               
  64.             
  65.             if (UrlEqual(e))  
  66.             {  
  67.                 return e;  
  68.             }  
  69.             else  
  70.             {  
  71.                 if (e.HasElements)  
  72.                 {  
  73.                     foreach (XElement ee in e.Elements())  
  74.                     {  
  75.                         result = FindNode(ee);  
  76.                     }  
  77.                 }  
  78.                 else  
  79.                 {  
  80.                     return null;  
  81.                 }  
  82.                 return result;  
  83.             }  
  84.         }  
  85.  
  86.         ///   
  87.         /// Url是否相等  
  88.         ///   
  89.         /// 节点  
  90.         private static bool UrlEqual(XElement e)  
  91.         {  
  92.             string url1 = Url.Action(e.Attribute("Action").Value, e.Attribute("Controller").Value).ToLower();  
  93.             string url2 = Url.RouteUrl(RouteDictionary).ToLower();  
  94.             return url1 == url2;  
  95.         }  
  96.     }  

解释一下我们利用xml文件来实现breadcrumbs,并且我们用action和controller来判断是否为当前路径[UrlEqual]

在网页中加入

  1. <%=Html.Navigator() %> 
<%=Html.Navigator() %>

好了效果如下效果图

我的网站

[[3800]]

实例

【编辑推荐】

  1. 亮剑.NET:图解ASP.NET网站开发实战
  2. 作为ASP.NET开发人员必须养成的编程习惯
  3. 视频教程:ASP.NET Web开发详解
  4. 教你如何配置Struts2 web.xml文件
  5. 在Spring中装配bean的基本xml配置
责任编辑:彭凡 来源: cnblogs
相关推荐

2012-04-28 11:07:15

2023-10-23 08:48:04

CSS宽度标题

2016-12-07 10:18:44

移动应用开发底部导航android

2022-11-15 18:31:37

React

2016-12-07 10:27:16

移动应用开发底部导航android

2016-12-07 10:02:54

移动应用开发底部导航android

2021-01-28 06:11:40

导航组件Sidenav Javascript

2009-05-18 10:11:06

MVCXML动态表单

2016-12-07 10:58:35

移动应用开发底部导航android

2016-12-07 10:32:14

移动应用开发底部导航android

2021-02-20 18:00:26

rangerLinux

2009-12-28 17:17:52

WPF导航

2009-01-03 14:39:04

ibmdwDojoMVC

2009-04-17 09:30:33

Firefox插件浏览器

2023-06-06 15:38:28

HTMLCSS开发

2009-02-12 09:55:22

AjaxMVCDojo

2015-07-30 14:43:04

导航栏iOS开发

2021-01-21 05:55:24

Linux运维Linux系统

2009-03-31 13:12:05

ASP.NETMVC表单验证

2022-08-08 19:46:26

ArkUI鸿蒙
点赞
收藏

51CTO技术栈公众号