Guida Aspnet. Lezione 3 Master Page

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>
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
<tr>
<td colspan="2">
&nbsp;</td>
</tr>
</table>


</div>
</form>
</body>
</html>