MVC5 使用 MvcSiteMapProvider 构建 Twitter 引导菜单 [英] MVC5 using MvcSiteMapProvider to build twitter bootstrap menu

问题描述

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

 
<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>@Html.Partial("_LoginPartial")

_LoginPartial 看起来像这样:

@using Microsoft.AspNet.Identity@if (Request.IsAuthenticated){使用 (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><a href="javascript:document.getElementById('logoutForm').submit()">注销</a></li>}}别的{<ul class="nav navbar-nav navbar-right"><li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })<li>@Html.ActionLink("登录", "登录", "账户", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>}

所以我可以替换代码

 
<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>

只有一行:

@Html.MvcSiteMap().Menu(false)

该行将产生:

 
<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>//如何把_LoginPartial放在这里！

所以问题是我如何在由 MvcSiteMapProvider 创建的菜单中呈现 @Html.Partial("_LoginPartial") ?

解决方案

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(Model.Nodes 中的 var 节点){
@Html.DisplayFor(m => node)
}@Html.Partial("_LoginPartial")

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

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

Default menu section in MVC5 template looking like that:

     <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 looking like that:

@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>
}

So i can replace the code

        <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>

with just one line:

@Html.MvcSiteMap().Menu(false)

That line will produce this:

        <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>

So the question is how can i render @Html.Partial("_LoginPartial") inside menu created by MvcSiteMapProvider ?

解决方案

Rowan's answer is pretty close to what you need to do, and should have led you down the correct path. The template MyMenu.cshtml can contain any logic you need to output the desired HTML. You simply need to modify the template to meet your requirement. Note that you can also modify the default templates if desired, but you will have to be careful to select "no" when asked to replace them during an upgrade of MvcSiteMapProvider, or your customizations will be overwritten.

@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>

And then this line will produce the desired output:

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

这篇关于MVC5 使用 MvcSiteMapProvider 构建 Twitter 引导菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！