本文將介紹在ASP.NET MVC下用XML實(shí)現(xiàn)breadcrumbs導(dǎo)航欄。這是網(wǎng)站開發(fā)中比較常用的一種導(dǎo)航欄樣式,類似于蘋果MAC界面的樣式。
先看下樣子
像這種導(dǎo)航欄(breadcrumbs)在mvc下我們來實(shí)現(xiàn)他。我們采用XML來實(shí)現(xiàn)這個(gè)功能。
1.首先做個(gè)準(zhǔn)備,我們編寫rounting規(guī)則(順便提一句,我們要用到rounting功能,所以規(guī)則必須寫正確,不然出不來喔)
代碼如下
- public static void RegisterRoutes(RouteCollection routes)
- {
- routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
- routes.MapRoute(
- "inner", // Route name
- "resume/test/inner/{action}/{id}", // URL with parameters
- new { controller = "inner", action = "Index", id = "" } // Parameter defaults
- );
- routes.MapRoute(
- "test", // Route name
- "resume/test/{action}/{id}", // URL with parameters
- new { controller = "test", action = "Index", id = "" } // Parameter defaults
- );
- routes.MapRoute(
- "Default", // Route name
- "{controller}/{action}/{id}", // URL with parameters
- new { controller = "Home", action = "Index", id = "" },
- new { controller = "^(?!(test|inner)).*$", action = "^(?!test).*$" }
- );
- }
我們加了兩個(gè)規(guī)則
/resume/test
和/resume/test/inner
2.編寫用到的XML文件,注意是樹形結(jié)構(gòu)的
在models寫個(gè)Navigator.xml
- <?xml version="1.0" encoding="utf-8" ?>
- <node Title="首頁" Description="潘峰的網(wǎng)站" Action="Index" Controller="Home">
<node Title="簡歷" Description="在線簡歷" Action="Index" Controller="Resume"> <node Title="Test" Description="Test" Action="Index" Controller="test"> <node Title="inner" Description="inner" Action="Index" Controller="inner"> </node> </node> </node> </node>
3.編寫我們的類文件來實(shí)現(xiàn)Navigator
在models寫個(gè)navigatorHelper.cs
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Xml;
- using System.Xml.Linq;
- using System.Web.Routing;
- using System.Web.Mvc;
- using System.IO;
- using System.Text;
-
- namespace conansoft.Helpers
- {
- public static class MenuHelper
- {
- private static HttpServerUtilityBase Server = null;
private static HttpRequestBase Request = null; private static UrlHelper Url = null; private static RouteValueDictionary RouteDictionary = null; public static string Navigator(this HtmlHelper helper) { Server = helper.ViewContext.RequestContext.HttpContext.Server; Request = helper.ViewContext.RequestContext.HttpContext.Request; Url = new UrlHelper(helper.ViewContext.RequestContext); RouteDictionary = helper.ViewContext.RequestContext.RouteData.Values; string xmlPath = Server.MapPath(Url.Content("~/Models/Navigator.xml")); XDocument doc = XDocument.Load(xmlPath); XElement node = FindNode(doc.Root); StringBuilder sb = new StringBuilder(); Stack s = new Stack(); while (node != null) { s.Push(node); nodenode = node.Parent; } //輸出breadcrumbs.可以自行修改使之符合你的要求 while (s.Count() != 0) { node = s.Pop(); if (UrlEqual(node)) { sb.AppendLine(string.Format("{0}", node.Attribute("Title").Value, node.Attribute("Description").Value)); } else { sb.AppendLine(string.Format("{0}", node.Attribute("Title").Value, Url.Action(node.Attribute("Action").Value, node.Attribute("Controller").Value), node.Attribute("Description").Value)); sb.AppendLine(" > "); } } return sb.ToString(); } /// /// 查找當(dāng)前節(jié)點(diǎn) /// /// 當(dāng)前節(jié)點(diǎn) /// 找到返回,找不到為空 private static XElement FindNode(XElement e) { XElement result = e; if (UrlEqual(e)) { return e; } else { if (e.HasElements) { foreach (XElement ee in e.Elements()) { result = FindNode(ee); } } else { return null; } return result; } } /// /// Url是否相等 /// /// 節(jié)點(diǎn) private static bool UrlEqual(XElement e) { string url1 = Url.Action(e.Attribute("Action").Value, e.Attribute("Controller").Value).ToLower(); string url2 = Url.RouteUrl(RouteDictionary).ToLower(); return url1 == url2; } } }
解釋一下我們利用xml文件來實(shí)現(xiàn)breadcrumbs,并且我們用action和controller來判斷是否為當(dāng)前路徑[UrlEqual]
在網(wǎng)頁中加入
- <%=Html.Navigator() %>
<%=Html.Navigator() %>
好了效果如下
我的網(wǎng)站
[[3800]]
【編輯推薦】
- 亮劍.NET:圖解ASP.NET網(wǎng)站開發(fā)實(shí)戰(zhàn)
- 作為ASP.NET開發(fā)人員必須養(yǎng)成的編程習(xí)慣
- 視頻教程:ASP.NET Web開發(fā)詳解
- 教你如何配置Struts2 web.xml文件
- 在Spring中裝配bean的基本xml配置