MVC5 使用 MvcSiteMapProvider 构建 twitter 引导菜单

Question

MVC5 模板中的默认菜单部分如下所示：

     <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>

_LoginPartial 看起来像这样：

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "navbar-right" }))
    {
    @Html.AntiForgeryToken()

    <ul class="nav navbar-nav navbar-right">
        <li>
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
        </li>
        <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
    </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

所以我可以替换代码

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </div>

只有一行：

@Html.MvcSiteMap().Menu(false)

那一行会产生这个：

        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
           //how to put _LoginPartial here!
        </div>

所以问题是如何在MvcSiteMapProvider 创建的菜单中渲染@Html.Partial("_LoginPartial")？

Answer 1

Rowan 的回答与您需要做的非常接近，应该引导您走上正确的道路。模板 MyMenu.cshtml 可以包含输出所需 HTML 所需的任何逻辑。您只需修改模板以满足您的要求。请注意，如果需要，您还可以修改默认模板，但在升级 MvcSiteMapProvider 期间被要求替换它们时，您必须小心选择“否”，否则您的自定义设置将被覆盖。

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using MvcSiteMapProvider.Web.Html.Models

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        @foreach (var node in Model.Nodes) { 
            <li>@Html.DisplayFor(m => node)</li>
        }
    </ul>
    @Html.Partial("_LoginPartial")
</div>

然后这一行将产生所需的输出：

@Html.MvcSiteMap().Menu("MyMenu")

Answer 2

如果我没记错的话，您可以在 Menu() 方法中指定 DisplayTemplate。

导航到 ~/Views/Shared/DisplayTemplates 并创建一个名为 MyMenu.cshtml 的新视图。

将模型类型设置为MvcSiteMapProvider.Web.Html.Models.MenuHelperModel，然后指定菜单结构（使用HTML）。

MyMenu.cshtml

@model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
@using MvcSiteMapProvider.Web.Html.Models

<ul class="nav navbar-nav navbar-right">
    @foreach (var node in Model.Nodes) { 
        <li>@Html.DisplayFor(m => node)</li>
    }
</ul>

现在更改您的 Menu() 方法。

@Html.MvcSiteMap().Menu("MyMenu")