In questo capitolo inizieremo a fare la conoscenza con le pagine mastro una nuova innovativa tecnologia messa a disposizione da aspnet, in pratica si tratta di veri e propri template che permetto di centrallizzare il mark up del portale , detto proprio in soldoni si crea un template in una pagina aspnet e poi si permette alle altre pagine di utilizzare queste pagine.
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>
Mi piace:
Mi piace Caricamento...
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
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:
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.
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
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
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>Condividi:
Mi piace: