Vediamo cmq in pratica come si utilizza. Andiamo su Esplora Soluzioni e selezioniamo aggiungi nuovo elemento, dalla finestra che si apre selezionare Pagina Mastro e digitare il nome PersonalPortal.master nella pagina che si è aperta e dopo aggiungi a questo punto la prima pagina mastro è stata creata.
Controlliamo il codice di questa pagina master appena creata ed iniziamo subito facendovi notare una sostganziale differenza , questa volta è presente un nuovo tag che si chiama
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder>
E ora vediamo fattivamente come utlizzarla.
Quando si utilizza una pagina master, questa fornisce tutto il markup e il codice che è comune a una pagina, che pertanto non dovrà avere i tag html, head o form la pagina master contiene questi tag.
Iniziamo a collegare la pagina di default.aspx alla MasterPage nel seguente modo, prendiam la pagina default.aspx e cancelliamo per intero il suo contenuto, tranne la prima riga che rimarrà e quindi avremo:
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile ="~/MasterPages/PersonalPortal.master" CodeFile="~/Default.aspx.cs" Inherits="_Default" %>
mandiamo in esecuzione con il solito run o visualizza nel browser col risultato di ottenere una pagina completamente bianca. Adesso rincominciamo a rimettere i comandi controllo server precedemente introdotti.
Ma prima alcune precisazioni. La pagina master PersonalPortal ha fornito tutto il markup HTML della pagina, pertanto se si aggiunge ulteriore HTML o codice a PersonalPortal.master, qualsiasi pagina che la utilizza avrà questo markup e questo codice automaticamente aggiunto a essa.
Facciamo adesso il caso contrario ossia e se si volesse che il markup o il codice appaiono solo sulla stessa pagina e non su ogni pagina? Asp net mette per questo a disposizione un ulteriore controllo che si chiama ContentPlaceHolder . Si utilizza questo contrllo sulla pagina master per determinare dove il markup verrà posizionato e il controll Content sulla pagina per posizionare il markup e il codice specifico a quella pagina.
Come si puo’ notare dal listato dalla pagina master scritta enon ancora modificata.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="PersonalPortal.master.cs" Inherits="PersonalPortal" %> <!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 runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
tale listato mostra che i controlli sono posizionati nel tag <head> e nel tag <div> del form. Il markup delle pagine che utilizzano la pagina master PersonalPortal hanno queste due posizione per aggiungere il contenuto.
Torniamo alla pagina Default.aspx e aggiungiamo un tag <asp:Content> nella pagina con un testo casuale I ADORO IL VSWD, la pagina dovrà risultare in questa maniera
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile ="~/MasterPages/PersonalPortal.master" CodeFile="~/Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="SomeContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> IO ADORO IL VISUAL WEB DEVELOPER </asp:Content>
Adesso che abbiamo visto il funzionamento basilare della master page incominciamo ad introdurvi degli altri elementi ossia le table. Quindi andimao su PersonalPortal.master in modalità design e facciamo doppio click selezioniamo l’interno del content e andiamo in tabella ed inseriamo una tabella se l’operazione è andata a buon fine ci dovrebbe comparire una schermata del tipo.
Per questa prova mettiamo 3 righe e 2 colonne. Per chi è gia’ esperto di editor visuali potrà notare come il VWD riproduce tutte le funzionalità vedi unione di due o piu’ celle adiacenti e cosi’ via.
Per chi non ha esperienza consigliamo di spippolare un po’ con i comandi della figura sopra…danno non lo si potrà cmq fare.
Ad esempio sarà possibile appunto selezionare due celle adiacenti e con il tasto destro del mouse unirle.
Questa è una primissima infarinatura vedremo in seguito comandi piu’ approfonditi come i CSS e come poterli introdurre dentro il VWD
A questo punto riaggiungiamo i Controlli login e loginstatus come visto precendentemente nel capitolo 2. Ma questa volta le inseriamo nella Pagina Master, ossia dentro le tabelle create in precedenza.
alla fine dovremmo ottenere il seguente risultato
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile ="~/MasterPages/PersonalPortal.master" CodeFile="~/Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="SomeContent" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> IO ADORO IL VISUAL WEB DEVELOPER </asp:Content>
per la pagina di default mentre per la master page avremo
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="PersonalPortal.master.cs" Inherits="PersonalPortal" %>
<!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 runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<table class="style1">
<tr>
<td>
<asp:LoginStatus ID="LoginStatus1" runat="server" />
</td>
<td>
<asp:Login ID="Login1" runat="server">
</asp:Login>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>
</div>
</form>
</body>
</html>