Strutturare un sito Asp.Net

Ogni sito e applicazione Web contiene delle parti di codice html e Asp.Net ripetute in più pagine o in tutte le pagine.
In un sito ben strutturato si evita di ripetere almeno lato server, le stesse porzioni di codice.

In questo modo le porzioni di codice ripetute sono modificabili centralmente in un colpo solo, evitando di dover aggiornare le singole pagine web con il rischio di avere pagine non allineate.

Per ottenere questo risultato la piattaforma Asp.Net Web Forms ci mette a disposizione due strumenti indispensabili: le Master Pages e gli User Controls. Questi due tools ci fanno dimenticare che a differenza di php, Asp.Net non contempla le inclusioni lato server.

Cosa sono le Master Pages

Le Master Pages sono l'evoluzione dei template di DreamWeaver. Il loro scopo è creare un modello contenente il codice html e i tag AspNet che si ripetono in tutte le pagine del sito o dell'applicazione web.
Solitamente si includono le meta informazioni (tag head) e i div che definiscono la struttura delle pagine.

Come per i template di DreamWeaver, è possibile creare dei PlaceHolders all'interno dei quali ogni pagina conterrà il proprio codice specifico, come il titolo, la descrizione, e cosa più importante il testo della pagina.

La differenza rispetto a DreamWeaver è che le MP sono gestite lato server da IIS, quindi non si spalma fisicamente il codice su tutte le pagine. Certo è una soluzione un po' meno performante, ma molto più flessibile.

Creare una Master Page in Visual Studio

Per cominiciare aprire Visual Studio oppure Visual Web Developer e creare un nuovo Sito Web vuoto:

File >> New Web Site >> ASP.NET Empty Web Site

Poi aggiungere la Master Page:

File >> New File >> Master Page

Così facendo si crea un file con estensione .master. E' consigliabile spostarlo in una sottocartella, ad esempio MasterPages in cui si raggruppano tutte le MP del progetto, ad esempio una per il front-end e l'altra per il back-office.

Si ottiene questo codice:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPages_MasterPage" %>

<!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>

Trasformandolo in qualcosa di più simile alla realtà:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPages_MasterPage" %>
<!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><asp:ContentPlaceHolder ID="cpTitle" runat="server"></asp:ContentPlaceHolder></title>
		<link rel="Stylesheet" type="text/css" href="styles/style.css" />
		<script language="javascript" type="text/javascript" src="jscript/functions.js"></script>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
		<asp:ContentPlaceHolder id="cpHead" runat="server">
		</asp:ContentPlaceHolder>
	</head>
	<body>
		<form id="form1" runat="server">
		<div id="Header">Header</div>
		<div id="MainContent">
			<asp:ContentPlaceHolder id="cpPageContent" runat="server">
			Enjoy Dev-oClock.com!
			</asp:ContentPlaceHolder>
		</div>
		<div id="Footer">Footer</div>
		</form>
	</body>
</html>

Il codice contenuto all'interno dei tag <asp:ContentPlaceHolder sarà editabile dalle singole pagine che includono la Master Page. Tutto il resto invece sarà uguale e non modificabile per tutte le pagine.

Ogni volta che si aggiunge una nuova pagina web al sito c'è la possbilità di scegliere se farle usare una Master Page:

File >> New File >> Web Form >> Mettere il check su Select Master Page >> Selezionare la Master Page

Si ottiene un risultato simile a questo:

<%@ Page Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="MasterPages_Default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cpTitle" Runat="Server">
Pagina di prova - Dev-oClock.com
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpHead" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpPageContent" Runat="Server">
Questa pagina AspNet utilizza una Master Page
</asp:Content>

Notare gli attributi della direttiva Page per agganciare la pagina web alla Master Page.

User Controls ascx

Gli User Controls servono a definire una porzione di codice che può essere richiamata da una o più pagine del sito. Servono quindi ad evitare di scrivere più volte lo stesso codice.

In realtà sono molto di più, gli UC possono avere funzionalità autonome, generare eventi e postback della pagina. In altre parole, richiamando un User Control non si include del semplice html statico, ma anche controlli aspnet con i relativi metodi.

Alcuni esempi di User Controls sono:

  • Form Contatti, con invio e-mail all'amministratore del sito
  • Form Login
  • Menu laterale, ad esempio quando ogni sezione del sito deve avere un menu differente
  • Banner pubblicitario

Creare un User Control e usarlo in una pagina Asp.Net

Come per le Master Pages, è meglio creare una sottocartella nel sito dove riporre gli UC. Poi:

Tasto destro sulla cartella >> Add New Item > Web User Control >> Si crea un file di tipo .ascx

Il file ottenuto è molto simile a un normale Web Form .aspx. In questo esempio ho creato una semplice textbox e un pulsante e una label.

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="MasterPages_WebUserControl" %>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Hello UC" />
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

Premendo il pulsante si richiama la funzione Button1_Click che mostra il messaggio di benvenuto nella Label.
Per rendere l'esempio più interessante ho aggiunto anche la proprietà BgColor che serve a impostare il colore di sfondo della label.

Partial Class MasterPages_WebUserControl
	Inherits System.Web.UI.UserControl

	Private Property _BgColor As System.Drawing.Color = Drawing.Color.White
	Public Property BgColor As System.Drawing.Color
		Get
			Return _BgColor
		End Get
		Set(value As System.Drawing.Color)
			_BgColor = value
		End Set
	End Property

	Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
		Label1.Text = "Welcome " & TextBox1.Text & "!"
	End Sub

	Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
		Label1.BackColor = _BgColor
	End Sub
End Class

Per usare il Controllo appena creato in una pagina Asp.Net è sufficiente trascinare il file .ascx dal pannello Esplora Soluzione alla pagina in modalità Design. Ovviamente è anche possibile scrivere il codice a mano, ma con il Drag&Drop ci pensa Visual Studio.

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPages/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="MasterPages_Default" %>
<%@ Register src="WebUserControl.ascx" tagname="WebUserControl" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cpTitle" Runat="Server">
	Pagina di prova - Dev-oClock.com
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cpHead" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cpPageContent" Runat="Server">
	Questa pagina AspNet utilizza una Master Page e uno User Control<br />
	<uc1:WebUserControl ID="WebUserControl1" runat="server" BgColor="Aquamarine"  />
</asp:Content>

Notare che nella pagina asp viene aggiunta la direttiva <%@ Register e inserito il tag asp che rappresenta il controllo.
Un'alternativa consiste nel registrare il controllo nel file web.config con il seguente codice:

<controls>
	<add tagPrefix="SRB" tagName="UC_Demo1" src="~/Controls/WebUserControl.ascx" />
</controls>

Cartelle speciali di Asp.Net Web Forms

Le classi che vogliamo usare in più pagine del sito devono essere create in file con estensione .cs o .vb all'interno della cartella App_Code. Questi file di codice vengono automaticamente resi visibili a tutte le altre pagine.

I file di dati, come ad esempio file di testo contente il modello di e-mail da inviare, si devono mettere nella cartella App_Data. Anche queste godono di una visibilità totale da parte delle altre pagine.

Queste ed altre cartelle sono predefinite in Asp.Net, e ognuna ha uno scopo ben preciso.
Per creare una cartella predefinita:

Solution Explorer >> Cliccare sul progetto >> Website >> Add ASP.Net Folder >> Selezionare la cartella (App_Code, Theme, App_Data, ecc)

Attenzione: creare una cartella tramite il comando Add Folder non produce lo stesso risultato, anche attribuendole un nome come App_Code. Si crea la cartella ma non viene considerata come una cartella speciale di AspNet.

Autore: Sergio Roberto Boarina