Sfruttare una sitemap per la navigazione in un sito web ASP.NET MVC

di Marco De Sanctis, in ASP.NET MVC,

In un'applicazione ASP.NET Web Forms, grazie al file di sitemap possiamo descrivere la struttura di pagine del nostro sito, così da poterla sfruttare all'interno di controlli quali Menu o SiteMapPath. In ASP.NET MVC, invece, tale supporto purtroppo manca, anche se è disponibile un package NuGet denominato MvcSiteMapProvider grazie al quale, con poco sforzo, possiamo raggiungere risultati equivalenti. Cerchiamo di capire come utilizzarlo.


Una volta installato il package, vengono aggiunti alcuni file alla nostra progetto; in particolare, nella root, troviamo il file Mvc.sitemap, simile al suo analogo su Web Forms, con cui possiamo descrivere la struttura del nostro sito. Per esempio, prendendo come riferimento il template Internet Application, possiamo comporne la struttura in questo modo:

<mvcSiteMapNode title="Home" controller="Home" action="Index">
  <mvcSiteMapNode title="About" controller="Home" action="About"/>

  <mvcSiteMapNode title="Contacts" controller="Home" action="Contact" />
</mvcSiteMapNode>

In alternativa, possiamo specificare i nodi direttamente nel codice dei controller marcandoli con l'attributo MvcSiteMapNodeAttribute:

[MvcSiteMapNode(Title = "Home", Key="Root")]
public class HomeController : Controller
{
    public ActionResult Index()
    { ... }

    [MvcSiteMapNode(Title = "About", ParentKey="Root")]
    public ActionResult About()
    { ... }

    [MvcSiteMapNode(Title = "Contacts", ParentKey = "Root")]
    public ActionResult Contact()
    { ... }
}

In questo caso, però, dobbiamo ricordarci di disabilitare l'uso del file XML, altrimenti il provider proverà automaticamente a effettuare il merge di queste due sorgenti (attributi e xml) sollevando un'eccezione per la presenza di due nodi root:

<add name="MvcSiteMapProvider"
     type="MvcSiteMapProvider.DefaultSiteMapProvider, MvcSiteMapProvider" 
     siteMapFile="" ... />

Dal punto di vista del layout, invece, i controlli di ASP.NET Web Forms sono sostituiti in MvcSiteMapProvider da una serie di HTML Helper che ci aiutano nella creazione di menu e breadcrumb. Grazie a essi, in _Layout.cshtml e nelle varie view dell'applicazione, possiamo introdurre questi elementi di pagina in maniera molto semplice, come negli esempi seguenti:

Menu del sito su _Layout.cshtml
<nav>
  @Html.MvcSiteMap().Menu()
</nav>

Breadcrumb sulle singole view
<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
    <p>@Html.MvcSiteMap().SiteMapPath()</p>
</hgroup>

Il markup generato, in particolare per il menu, è aderente a quello dei template di Default di ASP.NET MVC e produce il medesimo effetto grafico.


Internamente, l'HTML è generato in base a una serie di DisplayTemplate che vengono installati nella cartella Views\Shared dell'applicazione e che possiamo, ovviamente, personalizzare secondo le nostre necessità. Per esempio, se stiamo sfruttando Bootstrap e vogliamo posizionare il menu nella navigation bar, possiamo modificare i template in questo modo, adeguando le classi CSS e introducendo il widget DropDown nel caso in cui siano presenti sottolivelli:

MenuHelperModel.cshtml
<ul class="nav">
    @foreach (var node in Model.Nodes) { 
        <li class="dropdown">@Html.DisplayFor(m => node) 
            @if (node.Children.Any()) {
                @Html.DisplayFor(m => node.Children)
            }
        </li>
    }
</ul>

SiteMapNodeModel.cshtml
@if (Model.IsCurrentNode && ... )  { 
    <text>@Model.Title</text>
} else if (Model.Children.Any()) {
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">@Model.Title</a>
} else if (Model.IsClickable) { 
    <a href="@Model.Url">@Model.Title</a>
} else { 
    <text>@Model.Title</text>
}

Un'ultima nota, infine, riguarda gli aspetti di security: MvcSiteMapProvider, infatti, si integra con il sistema di autorizzazioni basato su attributi di ASP.NET MVC, nascondendo automaticamente eventuali nodi per cui l'utente corrente non possieda le grant necessarie.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi