MVC 中的面包屑导航
4.68/5 (15投票s)
MvcSiteMapProvider 示例
引言
在本文中，我们将了解如何在 MVC 中轻松地为 Web 应用程序创建面包屑导航。
背景
传统上，开发人员需要编写 JavaScript 代码才能在 Web 中实现面包屑导航。在 MVC 应用程序中，实现面包屑导航变得更加容易，只需一个 NuGet 包和一个配置文件即可。
环境
我为本文使用的环境是
- VS2013
- Windows 8.1
- .NET 4.5
- MVC4
- C#
- Razor 视图引擎。
我创建了一个 空的 MVC4 应用程序。
NuGet 包安装
首先，我们使用 NuGet 包管理器控制台安装 NuGet 包，如下图所示。
安装包的命令是
Install-package MvcSiteMapProvider.MVC<version>
由于我们正在使用 MVC4，我们将使用以下命令
成功安装后，我们将看到以下消息。如果我们没有收到成功消息，则表示我们没有安装所需的包。
现在，我们将看到一个程序集和一个站点地图文件，如下图所示。
下一步是编辑 mvc.sitemap 文件，以反映我们实际的网站页面结构。如果此站点地图配置错误，面包屑导航将无法正常工作。站点地图必须有一个父节点，通常是主页。所有其他节点都必须至少包装在一个父节点内。
注意
如果任何页面指向不存在的控制器或操作方法，MVC 将不会抛出任何错误，但您将看不到该页面的站点地图。 此外，任何重复的页面也将被忽略。因此，在编辑站点地图文件时必须小心。
页面结构
在本文中，我们将向客户展示应用程序中的以下消息区域。
-
Home
-
消息
-
收件箱
-
已发送
-
草稿
-
-
可以通过编辑站点地图文件并反映相同的嵌套结构来实现上述页面结构的的面包屑导航。编辑后的站点地图文件如下所示。
接下来，我们将为我们的应用程序添加布局以及所需的所有视图和控制器。现在项目看起来如下。
面包屑显示
我们快完成了。除了让系统知道在哪里显示面包屑导航之外，我们已经完成了在网站上设置面包屑导航的所有工作。 最好的放置位置是 _Layout.cshtml，因为它被所有其他页面共享，否则您必须将其放在每个页面上，这不利于项目维护。
要显示面包屑导航，您只需执行以下操作：
@Html.MvcSiteMap().SiteMapPath()
现在我们的 _Layout.cshtml 看起来如下。
就是这样。我们准备好开始工作了。我将运行我们的应用程序，输出如下。我们在消息着陆页，可以从这里转到收件箱、已发送或草稿消息页面。
现在，让我转到已发送消息页面，我们可以看到面包屑导航会自动更改。输出显示在下面的屏幕截图中。
现在，如果我从消息着陆页点击草稿链接，则输出如下。视图中只有一行代码，就可以轻松实现面包屑导航。太棒了！
我们已成功创建了一个简单的面包屑导航。到目前为止一切顺利，但如果面包屑导航中的某个页面需要操作方法中的值怎么办？那么我们需要在页面之间通过面包屑链接来保留这些值。同样，MvcSiteMapProvider 提供了一个简单的解决方案来做到这一点。
在面包屑中保留值
让我们看另一个示例来了解它是如何工作的。我将扩展之前的项目以包含另一个页面结构，以演示保留值。如下所示，我添加了另一组页面来显示网站上可供客户使用的产品。
-
Home
-
消息
-
收件箱
-
已发送
-
草稿
-
-
产品
-
产品
-
详细说明
-
未使用。
-
-
-
我们需要编辑站点地图文件以包含此产品页面结构。编辑后的站点地图如下所示。
现在我将添加产品页面所需的模型、控制器和操作方法。添加模型和控制器后，项目如下所示。
最后，我们需要通过站点地图节点将路由值传递给操作方法。在这种情况下，Product、Details 和 Edit 操作方法将产品 ID 作为参数。因此，我们需要稍微调整一下我们的站点地图以包含路由值。进行这些更改后，我们的站点地图现在如下所示。
让我们运行应用程序并查看输出。下面的屏幕截图显示了产品详细信息页面，面包屑导航根据站点地图文件运行良好。但唯一的问题是，用户看到的面包屑导航不是很直观。我们不希望看到“产品”而不是实际的产品名称显示在面包屑导航中。MvcSiteMapProvider 只能从站点地图文件中显示 mvcSiteMapNode 的标题作为面包屑链接。
因此，我们需要根据我们的要求以编程方式更改面包屑链接的名称。
以编程方式更改面包屑导航
让我们通过编程方式将站点地图中的“产品”标题更改为从列表中选择的产品名称。要做到这一点，我们需要在 Product 操作方法中添加以下代码片段。
SiteMaps.Current.CurrentNode.Title = prod.Name;
以及 Details 操作方法中的以下代码
var node = SiteMaps.Current.CurrentNode;
if (node != null && node.ParentNode != null)
{
node.ParentNode.Title = prod.Name;
}
现在我们准备好查看同一页面输出的变化了。输出看起来好多了，如下所示。
就这些了，伙计们。希望您觉得这篇文章很有用。如果您有任何问题，请在本文底部发布，让我知道。
关注点
也可以在操作方法中使用属性来动态创建面包屑导航，但这超出了本文的范围。