Procedura: personalizzare l'aspetto dei controlli server Web SiteMapPath

Aggiornamento: novembre 2007

L'aspetto visivo dei controlli di spostamento all'interno del sito può essere personalizzato impostando gli attributi del controllo o configurando i modelli disponibili. I modelli e gli stili vengono applicati ai collegamenti in base a due regole di precedenza descritte nella sezione Osservazioni di SiteMapPath.

È anche possibile applicare un tema o un'interfaccia a un controllo oppure sviluppare controlli di spostamento all'interno del sito personalizzati in base alle esigenze di rendering. Per ulteriori informazioni sull'applicazione di temi ai controlli Web, vedere Procedura: personalizzare il controllo CreateUserWizard ASP.NET.

Il controllo SiteMapPath visualizza un percorso di spostamento, noto anche come "breadcrumb" o "eyebrow", nel quale i collegamenti sono visualizzati come un percorso di ritorno dalla pagina corrente alla home page del sito Web. In una pagina ASP.NET il controllo SiteMapPath visualizza una stringa simile alla seguente:

Home > Servizi > Esercitazione pratica

Anche i controlli TreeView e Menu eseguono il rendering di dati della mappa del sito e, analogamente al controllo SiteMapPath, possono essere personalizzati come la maggior parte degli altri controlli Web. In questo argomento verrà illustrato come utilizzare le funzionalità di personalizzazione del controllo server Web SiteMapPath riportate di seguito:

• Specificare i caratteri o le immagini che vengono visualizzate tra i collegamenti.

• Invertire la direzione del percorso di spostamento.

• Specificare il numero di collegamenti padre visualizzati.

Le procedure descritte in questo argomento presumono che siano già state create una mappa del sito e una pagina contenente un controllo SiteMapPath. È possibile utilizzare il file Web.sitemap di esempio fornito in Mappe del sito ASP.NET.

Per personalizzare le proprietà di stile dei collegamenti

1. In una pagina Web ASP.NET che contiene un controllo SiteMapPath aggiungere le seguenti proprietà al controllo:

   RootNodeStyle-Font-Names="Verdana"
   RootNodeStyle-ForeColor="Orange"
   RootNodeStyle-BorderWidth=2
   

   Il codice di SiteMapPath, ad esempio, potrebbe essere analogo al seguente:

   <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
     SkipLinkText="Skip Menu"
     RootNodeStyle-Font-Names="Verdana"
     RootNodeStyle-ForeColor="Orange"
     RootNodeStyle-BorderWidth=2 >
   </asp:SiteMapPath>
   

   È disponibile la maggior parte delle proprietà descritte nelle classi Style e FontInfo, inclusa la proprietà CssClass.

2. Se si desidera impostare uno stile differente per ciascun collegamento, ripetere il passaggio precedente con le proprietà ParentNodeStyle, CurrentNodeStyle e PathSeperatorStyle del controllo SiteMapPath.

   Nota:
   Per migliorare le prestazioni, è possibile utilizzare il modello NodeTemplate e personalizzare lo stile di tutti i collegamenti simultaneamente. Per ulteriori informazioni, vedere Modelli dei controlli server Web ASP.NET.

Per personalizzare un carattere che viene visualizzato tra collegamenti

• In una pagina Web ASP.NET che contiene un controllo SiteMapPath aggiungere la proprietà PathSeparator al controllo.

  Il codice di SiteMapPath, ad esempio, potrebbe essere analogo al seguente:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server" 
    PathSeparator=" :: ">
  </asp:SiteMapPath>
  

  Il controllo SiteMapPath risulterà simile al seguente:

  Home :: Servizi :: Esercitazione pratica

  Per separare i collegamenti è possibile utilizzare una stringa qualsiasi. Per utilizzare un'immagine è invece opportuno attenersi alla procedura descritta di seguito.

Per specificare un'immagine che venga visualizzata tra collegamenti

• In una pagina Web ASP.NET che contiene un controllo SiteMapPath aggiungere le seguenti righe di codice al controllo:

  <PathSeparatorTemplate>
    <asp:Image ID="Image1" Runat="Server" 
      Width="20" 
      ImageUrl="Images/PathSeparatorImage.jpg" />
    </PathSeparatorTemplate>
  </PathSeparatorTemplate>
  

  Il codice di SiteMapPath, ad esempio, potrebbe essere analogo al seguente:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server" >
    <PathSeparatorTemplate>
      <asp:Image ID="Image1" Runat="Server" 
        Width="20" 
        ImageUrl="Images/PathSeparatorImage.jpg" />
      </PathSeparatorTemplate>
    </PathSeparatorTemplate>
  </asp:SiteMapPath>
  

Per invertire la direzione del percorso visualizzato dal controllo SiteMapPath

• In una pagina Web ASP.NET che contiene un controllo SiteMapPath aggiungere le proprietà PathDirection e PathSeparator al controllo.

  Il codice di SiteMapPath, ad esempio, potrebbe essere analogo al seguente:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
    PathDirection="CurrentToRoot"
    PathSeparator=" <-- " >
  </asp:SiteMapPath>
  

Per limitare il numero di collegamenti padre visualizzati

• In una pagina Web ASP.NET che contiene un controllo SiteMapPath aggiungere la proprietà ParentLevelsDisplayed al controllo.

  Ad esempio, il codice di un controllo SiteMapPath che visualizza al massimo due collegamenti padre potrebbe essere analogo al seguente:

  <asp:SiteMapPath ID="SiteMapPath1" Runat="server"
    ParentLevelsDisplayed="2" >
  </asp:SiteMapPath>
  

Accessibilità

In ogni pagina di un sito Web vengono in genere utilizzati dei controlli di spostamento all'interno del sito. Le utilità per la lettura dello schermo e altri dispositivi che assistono utenti disabili leggono il testo di un controllo di spostamento durante ciascuna visita a una pagina e a ogni postback.

I controlli di spostamento all'interno del sito SiteMapPath, TreeView e Menu includono ciascuno una proprietà denominata SkipLinkText, che consente di ignorare le informazioni ripetute in pagine successive o in visualizzazioni della stessa pagina.

Per utilizzare la funzionalità di accessibility skip

• In una pagina Web ASP.NET che contiene un controllo di spostamento aggiungere la seguente proprietà al controllo:

  SkipLinkText="Skipped Menu"
  

  Il codice di SiteMapPath, ad esempio, potrebbe essere analogo al seguente:

  <asp:SiteMapPath ID="SiteMapPath1" 
    Runat="server" 
    SkipLinkText="Skip Breadcrumb">
  </asp:SiteMapPath>
  

Vedere anche

Attività

Procedura: personalizzare il controllo CreateUserWizard ASP.NET

Concetti

Cenni preliminari sugli spostamenti all'interno dei siti ASP.NET

Modelli dei controlli server Web ASP.NET

Cenni preliminari sul controllo server Web SiteMapPath

Personalizzazione dell'aspetto del controllo server Web TreeView

Protezione del sistema di spostamento all'interno dei siti ASP.NET

Protezione dell'accesso ai dati

Altre risorse

Protezione delle applicazioni ASP.NET in ambienti host