Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
Progettare siti con ASP.net
2
Master page ASP.NET master pages permettono di creare un layout consistente per le pagine di un’applicazione Le Master pages sono formate da almeno due parti, la pagina master e una o più pagie contenute La master page ha un’estensione .master con un layout predefinito che può contenere testo statico, elementi HTML, controlli server, etc. La master page contiene una direttiva al posto della Page usata per le pagine .aspx Master Language="C#" %> Anche la può contenere gli attributi della direttiva @Page come ad esempio il code-behind file Master Language="C#" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
3
Master page Oltre a testo statico e controlli le Master page possono contenere uno o più controlli ContentPlaceHolder , che definiscono le regioni con c proviene da altri file <form id="form1" runat="server"> <table> <tr> <td><asp:contentplaceholder id="Main" runat="server" /></td> <td><asp:contentplaceholder id="Footer" runat="server" /></td> </tr> </table> </form> Si definiscono poi le pagine che sono basate su una master page nei placeholder controls che sono comunque pagine ASP.NET (.aspx e, eventualmente, code-behind file) che vengono legati a una specifica Master Page. Il legame viene fatto nella includendo l’attributo MasterPageFile che punta alla Master Page. Page Language="C#" MasterPageFile="~/MasterPages/Master1.master" Title="Content Page"%>
4
Master page
5
Master Page La lega il contenuto della pagina a una specifica master page. Notare che le content page non contengono contenuto fuori dai controllo Content. La master page deve contenere un elemento head con un attributo runat="server" in modo da poter fare il merge a runtime) Si possono definire più master page in uno steso sito e chiaramente più pagine che si basano su una Master Page Non si può applicare un tema a una master page. Si possono però applicare i temi alle pagine che derivano dalle Master o viene comunque applicato un tema defiito per l’intero sito Le Master page possono essere annidate, con una agine Master che ne referenzia un’altra. Una master page figlia ha estensione .master, e normalmente contiene content controls che sono mappati a content placeholders sulla master page padre. Chiaramente, la master page figlia ha anche essa content placeholders
6
Accesso ad oggetti sulla master page
Per referenziare la pagina Master occorre mettere nella pagina figlia la direttiva MasterType, va inserita subito sotto la direttiva Page. MasterType VirtualPath="~/MasterPage.master" %> Creare una proprietà nella Master (I campi di default sono private) public void impostaColorePI(Color colore) { Panel1.BackColor = colore; } Esempio d metodo che modifica caratteristiche Master.impostaColorePI(System.Drawing.Color.Gray); Master.Page.Header.Title = "MSDN"; Image masterPrimoLogo = (Image)Master.FindControl("PrimoLogo"); if (masterPrimoLogo != null) masterPrimoLogo.ImageUrl = "Immagini/imgMSDN.jpg";
7
Master Page annidate Pagina padre
Master Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" > <body> <form id="Form1" runat="server"> <div> <h1>Parent Master</h1> <p> <font color="red">This is parent master content.</font> </P> <asp:ContentPlaceHolder ID="MainContent" runat="server" /> </div> </form> </body> </html> Pagina figlia Master Language="C#" master="Parent.master"%> <asp:Content id="Content1" ContentPlaceholderID="MainContent" runat="server"> <asp:panel runat="server" id="panelMain" backcolor="lightyellow"> <h2>Child master</h2> <asp:panel runat="server" id="panel1" backcolor="lightblue"> <p>This is child master content.</p> <asp:ContentPlaceHolder ID="Content1" runat="server" /> </asp:panel> <asp:panel runat="server" id="panel2" backcolor="pink"> <p>This is child master content.</p> <asp:ContentPlaceHolder ID="Content2" runat="server" /> </asp:panel> </asp:panel> </asp:Content>
8
Master Page annidate Pagina che usa la master page figlia
Page Language="C#" master="Child.Master"%> <asp:Content id="Content1" ContentPlaceholderID="Content1" runat="server"> <asp:Label runat="server" id="Label1" text="Child label1" font-bold="true" /> <br> </asp:Content> <asp:Content id="Content2" ContentPlaceholderID="Content2" runat=server> <asp:Label runat="server" id="Label2" text="Child label2" font-bold=true/> </asp:Content>
9
I temi I temi permettono di assegnare uno stessa formattazione grafica a una pagina o ad un insieme di pagine Per associare a una pagina un tema occorre creare un nuovo tema (click con dx su progetto add asp.net foder theme Viene creata la cartella App_themes con all’interno un’altra cartella (normalmente theme1) che si può rinominare (es mioTema) Click con il destro sulla cartella e si aggiunge un nuovo file di testo con estensione .skin che contiene formattazione per gli elementi lato sserver, es. <asp:Label runat="server" ForeColor="red" Font-Size="14pt" Font- Names="Verdana" />
10
Temi aggiungere alla direttiva Page l’attributo Theme=“mioTema“ se si vuole applicare il tema e avere predominio sulle carateristiche specifiche della pagina, oppure StylesheetTheme="temaEsempio" se si vuole il contrario Il modo più semplice per modificare uno skin è inserire un controlo server, applicare le formattazioni e poi copiare e incollare il codice nello skin togliendo l’id generato
11
Temi E’ possibile applicare un tema a tutto il sito inserendo >l’attributo theme="sampleTheme“ all’interno dl file Web.Config all’interno del tag <pages contenuto in <syste.web> Se nella pagina si inserisce poi l’attibuto theme nella direttiva quest’ultimo ha la precedenza sul tema del sito
12
Navigazione VWD 2005 presenta una toolbar apposita per elementi di navigazione, ovvero: Menu. Controllo che presenta un menu statico o dinamico, orizz o vert. TreeView Controllo che presenta una struttura ad albero con nodi che possono essere espansi o collassati. SiteMapPath controllo che presenta un percorso di navigazione che visualizza la posizione della pagina vista dall’utente con link per tornare indietro a livello gerarchico
13
Navigazione Menu Statici: inserire il menu nella pagina click dx edit menu items e associare nome a Url (ev immagine con efetti on mouse over) Dinamico basato su site map: aggiungere al progetto una site map e associare il menu alla stessa -> clickcon il dx show smart codechoose data source new data source site map Dinamico basato su file xml: procedra più complessa che prevede un file xml e un file di trasformazione associato I menu possono poi essere visualizzati orizzontalmente, verticalmente, con immagini mouse over, etc.
14
Navigazione TreeView La creazione è simile a quella del menu, come elementi statici o dinamici (basati su site map o file xml) SiteMapPath È necessario che sia presente una site map
Presentazioni simili
