Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

L'editing visuale per pagine ASP.NET Web Forms

Costruire in modo visuale le pagine web sfruttando componenti preconfezionati per l'interfaccia utente
Costruire in modo visuale le pagine web sfruttando componenti preconfezionati per l'interfaccia utente
Link copiato negli appunti

Possiamo considerare una pagina ASP.NET Web Forms, come un insieme di controlli inseriti all'interno di pagine HTML. Per questo Visual Studio 2010 (come già la 2008) fornisce due modalità per l'editing delle pagina: la prima consiste in un editor di testo in cui modificare direttamente il codice, la seconda consiste invece in un designer visuale in cui si può avere una anteprima della resa della pagina. Queste modalità non sono comunque esclusive e possono anche essere usate contemporaneamente.

Figura 3. Editor di pagine asp.net, visualizzazione splittata
Editor di pagine asp.net, visualizzazione splittata

Selezionando la visione combinata, grazie alla modalità "split", troviamo nella parte superiore del pannello il codice asp.net e nella sezione sottostante l'anteprima grafica, che possiamo modellare in modo visuale.

Visualizzando la Toolbox si ha una lista di tutti i controlli che possono essere utilizzati in una pagina aspx, per fare una prova inseriamo in un punto qualsiasi della pagina default.aspx un bottone ed una label, semplicemente effettuando un drag and drop dalla toolbox.

Figura 4. Inserire un bottone ed una label nella pagina
Inserire un bottone ed una label nella pagina

Come si vede in figura, il bottone è visualizzato nell'anteprima e nel codice. Se lo selezioniamo nella parte grafica, viene automaticamente evidenziato il codice sulla parte superiore, ma l'aspetto più importante è che è possibile modificare le proprietà del controllo dalla finestra delle proprietà (properties) come un controllo winform.

Il bottone, come tutti i controlli ASP.NET Web Form, è caratterizzato dalla proprietà runat="server". Durante l'elaborazione della pagina, l'application server chiede al bottone di effettuare il rendering del suo contenuto HTML, che è naturalmente un <input type="button".

Con un doppio click sul bottone si apre la finestra con il codice della pagina (code behind), e viene automticamente creato un metodo in grado di gestire l'evento click, che possiamo comodamente modificare:

protected void Button1_Click(object sender, EventArgs e)
{
  Label1.Text = "You have clicked me at:" + DateTime.Now;
}

Alla pressione del bottone viene quindi modificata la proprietà Text della label con il messaggio e la data corrente.

Lanciare il debug della pagina

Per lanciare la pagina e vedere il risultato premiamo F5, poi clicchiamo sul bottone e verifichiamo che tutto funzioni correttamente.

Figura 5. La pagina reagisce alla pressione del bottone
La pagina reagisce alla pressione del bottone

È anche possibile inserire punti di interruzione sul codice, premendo il tasto F9 nella riga dove ci si vuole fermare. In questo caso, una volta lanciata, l'esecuzuione si interromperà alla riga selezionata e sarà possibile visualizzare lo stato delle variabili, dei controlli etc.

Figura 6. Debug di pagine ASP.NET
Debug di pagine ASP.NET

Nota: se stiamo creando un sito in ISS, che punta alla cartella del progetto e lo specifichiamo nelle opzioni del progetto, premendo F5 siamo comunque in modalità debug, perché VS2010 è in grado di agganciarsi automaticamente al processo di IIS senza nessun intervento manuale.

Gli snippet

Per chi invece è oramai abituato a lavorare prevalentemente sul codice è ora possibile avvalersi degli snippet anche in asp.net, sia web form che MVC come si può vedere in figura:

Figura 7. Snippet per la creazione di controlli ASP.NET
Snippet per la creazione di controlli ASP.NET

Il risultato dello snippet per una listbox è ad esempio il seguente:

<asp:ListBox runat="server">
  <asp:ListItem Text="text1" />
  <asp:ListItem Text="text2" />
</asp:ListBox>

In questo modo, anche se non si ricorda a memoria la sintassi per tutti i controlli ASP.NET si possono utilizzare gli snippet per inserire i controlli in modo rapido direttamente sul codice della pagina, garantendo una maggiore produttività.

Ti consigliamo anche