Creazione di layout di pagina con le pagine master di visualizzazione (C#)
di Microsoft
In questa esercitazione si apprenderà come creare un layout di pagina comune per più pagine nell'applicazione sfruttando le pagine master di visualizzazione. È possibile usare una pagina master di visualizzazione, ad esempio, per definire un layout di pagina a due colonne e usare il layout a due colonne per tutte le pagine nell'applicazione Web.
Creazione di layout di pagina con le pagine master di visualizzazione
In questa esercitazione si apprenderà come creare un layout di pagina comune per più pagine nell'applicazione sfruttando le pagine master di visualizzazione. È possibile usare una pagina master di visualizzazione, ad esempio, per definire un layout di pagina a due colonne e usare il layout a due colonne per tutte le pagine nell'applicazione Web.
È anche possibile sfruttare le pagine master di visualizzazione per condividere contenuto comune tra più pagine nell'applicazione. Ad esempio, è possibile inserire il logo del sito Web, i collegamenti di spostamento e gli annunci banner in una pagina master di visualizzazione. In questo modo, ogni pagina dell'applicazione visualizzerà automaticamente questo contenuto.
In questa esercitazione si apprenderà come creare una nuova pagina master di visualizzazione e creare una nuova pagina del contenuto della visualizzazione in base alla pagina master.
Creazione di una pagina master di visualizzazione
Si inizierà creando una pagina master di visualizzazione che definisce un layout a due colonne. Per aggiungere una nuova pagina master di visualizzazione a un progetto MVC, fare clic con il pulsante destro del mouse sulla cartella Views\Shared, scegliere l'opzione di menu Aggiungi, Nuovo elemento e selezionare il modello MVC View Master Page (vedere la figura 1).
Figura 01: Aggiunta di una pagina master di visualizzazione (fare clic per visualizzare l'immagine a dimensione intera)
È possibile creare più pagine master di visualizzazione in un'applicazione. Ogni pagina master di visualizzazione può definire un layout di pagina diverso. Ad esempio, potrebbe essere necessario che alcune pagine abbiano un layout a due colonne e altre pagine per avere un layout a tre colonne.
Una pagina master di visualizzazione è molto simile a una visualizzazione standard ASP.NET MVC. Diversamente da una visualizzazione normale, tuttavia, una pagina master di visualizzazione contiene uno o più <asp:ContentPlaceHolder> tag. I <contentplaceholder> tag vengono usati per contrassegnare le aree della pagina master di cui è possibile eseguire l'override in una singola pagina di contenuto.
Ad esempio, la pagina master di visualizzazione in Listato 1 definisce un layout a due colonne. Contiene due <contentplaceholder> tag. Uno <ContentPlaceHolder> per ogni colonna.
Elenco 1 : Views\Shared\Site.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
html
{
background-color:gray;
}
.column
{
float:left;
width:300px;
border:solid 1px black;
margin-right:10px;
padding:5px;
background-color:white;
min-height:500px;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<h1>My Website</h1>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="column">
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Il corpo della pagina master di visualizzazione in Listato 1 contiene due <div> tag che corrispondono alle due colonne. La classe di colonna Csscading Style Sheet viene applicata a entrambi <div> i tag. Questa classe viene definita nel foglio di stile dichiarato nella parte superiore della pagina master. È possibile visualizzare in anteprima il rendering della pagina master della visualizzazione passando alla visualizzazione Struttura. Fare clic sulla scheda Progettazione in basso a sinistra dell'editor del codice sorgente (vedere la figura 2).
Figura 02: Anteprima di una pagina master nella finestra di progettazione (fare clic per visualizzare l'immagine a dimensione intera)
Creazione di una pagina di contenuto di visualizzazione
Dopo aver creato una pagina master di visualizzazione, è possibile creare una o più pagine di contenuto di visualizzazione in base alla pagina master della visualizzazione. Ad esempio, è possibile creare una pagina del contenuto della visualizzazione indice per il controller Home facendo clic con il pulsante destro del mouse sulla cartella Views\Home, scegliendo Aggiungi, Nuovo elemento, selezionando il modello Pagina contenuto visualizzazione MVC , immettendo il nome Index.aspx e facendo clic sul pulsante Aggiungi (vedere la figura 3).
Figura 03: Aggiunta di una pagina del contenuto della visualizzazione (fare clic per visualizzare l'immagine a dimensione intera)
Dopo aver fatto clic sul pulsante Aggiungi, viene visualizzata una nuova finestra di dialogo che consente di selezionare una pagina master di visualizzazione da associare alla pagina del contenuto della visualizzazione (vedere la figura 4). È possibile passare alla pagina master della visualizzazione Site.master creata nella sezione precedente.
Figura 04: Selezione di una pagina master (fare clic per visualizzare l'immagine a dimensione intera)
Dopo aver creato una nuova pagina del contenuto della visualizzazione in base alla pagina master Site.master, si ottiene il file nell'elenco 2.
Elenco 2 : Views\Home\Index.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>
Si noti che questa visualizzazione contiene un <asp:Content> tag che corrisponde a ognuno dei <asp:ContentPlaceHolder> tag nella pagina master della visualizzazione. Ogni <asp:Content> tag include un attributo ContentPlaceHolderID che punta al particolare <asp:ContentPlaceHolder> di cui esegue l'override.
Si noti, inoltre, che la pagina della visualizzazione contenuto nell'elenco 2 non contiene alcun tag HTML di apertura e chiusura normali. Ad esempio, non contiene i tag di apertura e chiusura <html> o <head> . Tutti i tag di apertura e chiusura normali sono contenuti nella pagina master di visualizzazione.
Tutti i contenuti che si desidera visualizzare in una pagina del contenuto della visualizzazione devono essere inseriti all'interno di un <asp:Content> tag. Se si inserisce qualsiasi contenuto HTML o altro al di fuori di questi tag, si riceverà un errore quando si tenta di visualizzare la pagina.
Non è necessario eseguire l'override di ogni <asp:ContentPlaceHolder> tag da una pagina master in una pagina di visualizzazione contenuto. È sufficiente eseguire l'override di un <asp:ContentPlaceHolder> tag quando si vuole sostituire il tag con contenuto specifico.
Ad esempio, la visualizzazione Indice modificata in Listato 3 contiene solo due <asp:Content> tag. Ognuno dei <asp:Content> tag include testo.
Listato 3 : Views\Home\Index.aspx (modified)
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<h1>Content in first column!</h1>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<h1>Content in second column!</h1>
</asp:Content>
Quando viene richiesta la visualizzazione nell'elenco 3, viene eseguito il rendering della pagina nella figura 5. Si noti che la visualizzazione esegue il rendering di una pagina con due colonne. Si noti, inoltre, che il contenuto della pagina del contenuto della visualizzazione viene unito al contenuto dalla pagina master di visualizzazione
Figura 05: pagina Contenuto visualizzazione indice (fare clic per visualizzare l'immagine a dimensione intera)
Modifica del contenuto della pagina master di visualizzazione
Un problema che si verifica quasi immediatamente quando si lavora con le pagine master di visualizzazione è il problema di modificare il contenuto della pagina master di visualizzazione quando vengono richieste pagine di contenuto di visualizzazione diverse. Ad esempio, si vuole che ogni pagina nell'applicazione Web abbia un titolo univoco. Tuttavia, il titolo viene dichiarato nella pagina master della visualizzazione e non nella pagina del contenuto della visualizzazione. Quindi, come personalizzare il titolo della pagina per ogni pagina del contenuto della visualizzazione?
Esistono due modi per modificare il titolo visualizzato da una pagina del contenuto della visualizzazione. Prima di tutto, è possibile assegnare un titolo di pagina all'attributo title della <%@ page %> direttiva dichiarata nella parte superiore di una pagina del contenuto della visualizzazione. Ad esempio, se si vuole assegnare il titolo della pagina "Sito Web super grande" alla visualizzazione Indice, è possibile includere la direttiva seguente nella parte superiore della visualizzazione Indice:
<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>
Quando viene eseguito il rendering della visualizzazione Indice nel browser, il titolo desiderato viene visualizzato nella barra del titolo del browser:
È necessario che una pagina di visualizzazione master soddisfi un requisito importante affinché l'attributo title funzioni. La pagina master della visualizzazione deve contenere un <head runat="server"> tag anziché un tag normale <head> per la relativa intestazione. Se il <head> tag non include l'attributo runat="server", il titolo non verrà visualizzato. La pagina master visualizzazione predefinita include il tag obbligatorio <head runat="server"> .
Un approccio alternativo alla modifica del contenuto della pagina master da una singola pagina del contenuto della visualizzazione consiste nell'eseguire il wrapping dell'area da modificare in un <asp:ContentPlaceHolder> tag. Si supponga, ad esempio, di voler modificare non solo il titolo, ma anche i meta tag, sottoposti a rendering da una pagina di visualizzazione master. La pagina della visualizzazione master in Listato 4 contiene un <asp:ContentPlaceHolder> tag all'interno del <head> tag.
Elenco 4 : Views\Shared\Site2.master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<asp:ContentPlaceHolder ID="head" runat="server">
<title>Please change my title</title>
<meta name="description" content="Please provide a description" />
<meta name="keywords" content="keyword1,keyword2" />
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Si noti che il tag nell'elenco <asp:ContentPlaceHolder> 4 include il contenuto predefinito: un titolo predefinito e i meta tag predefiniti. Se non si esegue l'override di questo <asp:ContentPlaceHolder> tag in una singola pagina del contenuto della visualizzazione, verrà visualizzato il contenuto predefinito.
La pagina di visualizzazione contenuto nell'elenco 5 esegue l'override del <asp:ContentPlaceHolder> tag per visualizzare un titolo personalizzato e i meta tag personalizzati.
Elenco 5 : Views\Home\Index2.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<title>The Index2 Page</title>
<meta name="description" content="Description of Index2 page" />
<meta name="keywords" content="asp.net,mvc,cool,groovy" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
Just some content in the body of the page.
</asp:Content>
Riepilogo
Questa esercitazione fornisce un'introduzione di base per visualizzare le pagine master e visualizzare le pagine di contenuto. Si è appreso come creare nuove pagine master di visualizzazione e creare pagine di contenuto in base a esse. È stato anche esaminato come modificare il contenuto di una pagina master di visualizzazione da una determinata pagina del contenuto della visualizzazione.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per