MVC-SiteMap-Anbieter, übergeordnetes Menü für ausgeblendetes Menüelement anzeigen

Question

Ich verwende den MVC SiteMap Provider, um ein Menü für meine Website zu erstellen und den aktuellen Menüpunkt hervorzuheben.

In meinem Controller habe ich die Methoden Index, Details, Hinzufügen, Bearbeiten und Löschen.Als Menüelement sind nur die Methoden „Index“ und „Hinzufügen“ verfügbar.

Ich möchte immer noch den aktuellen Hauptmenüpunkt (z. B. Produkte) hervorheben, wenn ich mich in der Aktion „Details“ befinde.Wie mache ich das?

Ich habe es versucht:

<mvcSiteMapNode title="Details" action="Details" visibility="IfSelected,!*" />

Aber dadurch wird das Menü nicht hervorgehoben, und Details sind im Menü, obwohl ich es nicht möchte.

Dann habe ich es versucht

<mvcSiteMapNode title="Details" action="Details" visibility="IfSelected,!*" preservedRouteParameters="id" />

Dadurch wird das Untermenü „Details“ hervorgehoben, aber ich möchte lieber, dass das Untermenü „Details“ im Menü ausgeblendet wird und nur der Hauptmenüpunkt („Projekte“) hervorgehoben wird.

Answer 1

Es gibt eigentlich zwei verschiedene Dinge, die Sie offenbar erreichen wollen, aber Sie haben sie in einer einzigen Frage zusammengefasst.

Um CRUD-Operationen durchzuführen, schauen Sie sich zunächst den Artikel an Wie man MvcSiteMapProvder dazu bringt, sich die Position eines Benutzers zu merken und das dazugehörige herunterladbare Demos.Schauen Sie sich insbesondere die Demo mit dem Titel an MvcSiteMapProvider-Forcing-A-Match weil es genau zeigt, wie man die Knoten verschachtelt, sie zur Übereinstimmung mit der aktuellen Anfrage zwingt, die Sichtbarkeit einrichtet und den Titel der Knoten entsprechend dem von Ihnen ausgewählten Datensatz dynamisch ändert.

Im zweiten Teil Ihrer Frage geht es eigentlich darum, den Ausgabe-HTML-Code so zu ändern, dass ein Menüelement hervorgehoben wird, was mit den integrierten Funktionen nicht möglich ist.Dazu müssen Sie die Datei /Views/Shared/DisplayTemplates/SiteMapNodeModel.cshtml direkt bearbeiten.Diese Datei wird Ihrem MVC-Projekt durch das NuGet-Paket hinzugefügt und Sie sollten darauf achten, Ihre Änderungen beim Upgrade nicht zu überschreiben.Beachten Sie, dass diese Datei von den HTML-Helfern „Menu“, „SiteMap“ und „SiteMapPath“ gemeinsam genutzt wird, also sollten Sie beides tun Machen Sie eine Kopie für das Menü Oder achten Sie darauf, immer die Verzweigungslogik für die spezifischen HTML-Helper zu verwenden, die Sie bearbeiten möchten.

Um den Knoten zu ermitteln, der der aktuellen Seite am nächsten kommt, benötigen Sie diesen Razor-Code.

@{var isClosestVisibleMenuItem = false;}
@if ((Model.IsCurrentNode || (Model.IsInCurrentPath && !Model.IsRootNode && !Model.Descendants.Any())) 
    && Model.SourceMetadata["HtmlHelper"].ToString() == "MvcSiteMapProvider.Web.Html.MenuHelper")
{
    isClosestVisibleMenuItem = true;
}

Beachten Sie, dass der SourceMetadata-Wert überprüft wird, um sicherzustellen, dass wir uns auf das Menü beziehen – alle anderen HTML-Helfer setzen die Variable isClosestVisibleMenuItem immer auf false.

Dann müssen Sie nur noch die Variable verwenden, um der Vorlage mitzuteilen, welcher HTML-Code ausgegeben werden soll.Hier ist ein Beispiel, das a <b></b> nur um den nächstgelegenen sichtbaren Knoten im Menü herum.In einem realen Beispiel möchten Sie wahrscheinlich eine bestimmte CSS-Klasse zum Anker-Tag hinzufügen, um es hervorzuheben.

@model MvcSiteMapProvider.Web.Html.Models.SiteMapNodeModel
@using System.Web.Mvc.Html
@using MvcSiteMapProvider.Web.Html.Models

@{var isClosestVisibleMenuItem = false;}
@if ((Model.IsCurrentNode || (Model.IsInCurrentPath && !Model.IsRootNode && !Model.Descendants.Any())) && Model.SourceMetadata["HtmlHelper"].ToString() == "MvcSiteMapProvider.Web.Html.MenuHelper")
{
    isClosestVisibleMenuItem = true;
}

@if (Model.IsCurrentNode && Model.SourceMetadata["HtmlHelper"].ToString() != "MvcSiteMapProvider.Web.Html.MenuHelper")  { 
    <text>@Model.Title</text>
} else if (Model.IsClickable) {

    if (isClosestVisibleMenuItem)
    {
        <b>
        @if (string.IsNullOrEmpty(Model.Description))
        {
            <a href="@Model.Url">@Model.Title</a>
        }
        else
        {
            <a href="@Model.Url" title="@Model.Description">@Model.Title</a>
        }
        </b>
    }
    else
    {
        if (string.IsNullOrEmpty(Model.Description))
        {
            <a href="@Model.Url">@Model.Title</a>
        }
        else
        {
            <a href="@Model.Url" title="@Model.Description">@Model.Title</a>
        }
    }
} else {
    if (isClosestVisibleMenuItem)
    {
        <b>@Model.Title</b>
    }
    else
    {
        <text>@Model.Title</text>   
    }
}

IfSelected ist für einen bestimmten Anwendungsfall gedacht, bei dem Sie eine tiefe Hierarchie haben und den aktuellen Pfad (egal wie tief) anzeigen möchten, während der Rest des Menüs auf einer hohen Ebene bleibt.Normalerweise gilt dies nur für das Menü, nicht für die anderen HTML-Helfer.Aber nichts an Ihrer Frage deutet darauf hin, dass Sie genau das erreichen wollen.