MVC 5 + EF6 入門完整教程14 -- 動態產生麵包屑導航

標籤：其他   包含   static   format   內容   oca   name   com   count   

上篇文章我們完成了 動態產生多級菜單 這個實用組件。

本篇文章我們要開發另一個實用組件：麵包屑導航。

麵包屑導航(BreadcrumbNavigation)這個概念來自童話故事"漢賽爾和格萊特"，當漢賽爾和格萊特穿過森林時，不小心迷路了，但是他們發現在沿途走過的地方都撒下了麵包屑，讓這些麵包屑來協助他們找到回家的路。所以，麵包屑導航的作用是告訴訪問者他們目前在網站中的位置以及如何返回。(摘自百度百科)

要實現麵包屑導航，也可以直接從nuget搜一些sitemap組件直接使用。

當然，和上篇一樣，我們同樣不用任何第三方組件，完全自己構建靈活通用的sitemap.

下面給出我的最佳實務。

 

文章提綱

• 概述要點
• 詳細步驟

  一、分析多級目錄的html結構

  二、根據html結構構建xml的網站地圖源及相應的data model

　　 三、構建html helper, 完成breadcrumb產生功能

　　 四、前端調用

• 總結

概述要點

實現麵包屑導航分成兩個步驟：

1. 擷取當前的url地址，根據url地址去相關設定檔中查詢到當前位置，遞迴查詢父節點

2. 根據查詢到的結果動態拼接出 breadcrumb 的html

如果大家看了上篇文章應該會對這篇文章用到的技術很熟悉（比上篇文章更簡單 : )）

 

我們直接根據網站的配置拼接出 html，前端通過自訂html helper的方法調用擷取拼接出的內容。

關於如何自訂html helper，上篇文章有介紹，不再重複。

下面直接講解詳細步驟。

 

 

詳細步驟

分成四個步驟

一、分析多級目錄的html結構

首先開啟一個範例，如

對應的html為

 

大家可以看到，由兩層組成, 外面是一個<ol>, 裡面是一組<li>。

每個<li>包含一個<a>標籤，指向相應的位置地址。

最後的<li>不包含<a>標籤，僅顯示名字。

 

二、根據html結構構建xml的網站地圖源及相應的data model

1. 根據上面的html結構，我們準備網站地圖的資料來源。

一般來說，網站地圖不涉及到許可權，也不會經常改變，如網站的某個位置沒有配置，直接不顯示即可，也不會有其他影響。

因此我們簡單起見，直接準備個xml文檔即可。

<?xml version="1.0" encoding="utf-8" ?>

<!--填絕對路徑，類似 /XEngine/home/about-->

<MvcSiteMaps>

<MvcSiteMap ParnetID = "0" Name = "首頁" Url = "/XEngine/" ID = "1" ></MvcSiteMap>

<MvcSiteMap ParnetID = "1" Name = "組織" Url = "/XEngine/Organization" ID = "2"></MvcSiteMap>

<MvcSiteMap ParnetID = "2" Name = "關於" Url = "/XEngine/home/about" ID = "3"></MvcSiteMap>

</MvcSiteMaps>

 

最終我們只需要將xml中相應的值填充到breadcrumb的html

 

2. 準備對應的data model

[XmlRoot("MvcSiteMaps")]

public class MvcSiteMaps

{

[XmlElement("MvcSiteMap")]

public MvcSiteMap[] Items { get; set; }

}

 

public class MvcSiteMap

{

[XmlAttribute(AttributeName = "ID")]

public int ID { get; set; }

[XmlAttribute(AttributeName = "Name")]

public string Name { get; set; }

[XmlAttribute(AttributeName = "Url")]

public string Url { get; set; }

[XmlAttribute(AttributeName = "ParnetID")]

public int ParnetID { get; set; }

public MvcSiteMap Parent { get; set; }

}

注意 [XmlAttribute(AttributeName = "xxx")]，AttributeName需要和xml裡面的名字對應，我們的xml和data model的命名完全對應，所以也可以省略。

 

三、構建html helper, 完成breadcrumb產生功能

需要完成以下幾個功能

1. 擷取xml中所有的節點資訊

private static string SiteMapString = System.Configuration.ConfigurationManager.AppSettings["SiteMapString"] ?? string.Empty;

//擷取sitemap的配置資訊

public static IList<MvcSiteMap> GetSiteMapList()

{

using (TextReader reader = new StreamReader(HttpContext.Current.Server.MapPath(SiteMapString)))

{

var serializer = new XmlSerializer(typeof(MvcSiteMaps));

var items = (MvcSiteMaps)serializer.Deserialize(reader);

if (items != null)

{

return items.Items;

}

return null;

}

}

 

2. 根據上一步擷取的節點資訊及當前url地址，拼接出麵包屑html

/// <summary>

/// 填充麵包屑

/// </summary>

/// <param name="url"></param>

/// <returns></returns>

public static MvcHtmlString PopulateBreadcrumb(string url)

{

StringBuilder str = new StringBuilder();

List<string> pathList = new List<string>();

MvcSiteMap current = GetSiteMapList().FirstOrDefault(m=>m.Url==url);

 

GetParent(current, pathList);

pathList.Reverse();

 

for (int i = 0; i < pathList.Count; i++)

{

if (i == pathList.Count - 1)

{

string s = pathList[i];

s = s.Substring(s.IndexOf(">") + 1, s.LastIndexOf("<") - s.IndexOf(">") - 1);

str.AppendFormat("<li class=‘active‘>{0}</li>", s);

}

else

{

str.AppendFormat("<li>{0}</li>", pathList[i]);

}

}

 

string result = str.ToString();

return MvcHtmlString.Create(result);

}

 

 

說明：首先找到當前位置，遞迴找出父節點依次添加到列表中；反轉列表，完善html代碼。

 

 

 

/// <summary>

/// 遞迴找到上一級

/// </summary>

/// <param name="parent"></param>

/// <param name="pathList"></param>

static void GetParent(MvcSiteMap parent, List<string> pathList)

{

if (parent != null)

{

pathList.Add(string.Format("<a href={0}>{1}</a>", parent.Url, parent.Name));

parent.Parent = GetSiteMapList().FirstOrDefault(i => i.ID == parent.ParnetID);

GetParent(parent.Parent, pathList);

}

}

 

 

四、前端調用

類似於上一篇文章，我們建立個html helper供前端調用。

這次我們稍微做一點改進（規範一下命名）

先看下微軟原生的html helper定義方法，以Html.ActionLink為例，如

如方框處，類似於 xxxExtensions的命名，我們定義一個靜態類來調用之前的方法。

 

前端調用：

以訪問http://localhost/XEngine/home/about 為例，最終返回的結果

相應的html為：

<div>

<br />

<ol class="breadcrumb">

<li><a href=/XEngine/>首頁</a></li><li><a href=/XEngine/Organization>組織</a></li><li class=‘active‘>關於</li>

</ol>

</div>

總結

本篇對上篇的用到的html helper知識點做了細微改進 :

規範了自訂 html helper命名（類名為xxxExtensions和，原生形式統一）；

直接返回MvcHtmlString類型，這樣html字串不會被轉義，可以直接在前端調用。

自訂的 html helper非常實用，大家可以多多挖掘使用情境。

歡迎大家多多評論，祝學習進步：）

P.S.

樣本中前端直接在_Layout.cshtml中使用。

後端菜單相關的程式結構：

MVC 5 + EF6 入門完整教程14 -- 動態產生麵包屑導航