Uso di Visual Studio 2013 per creare una pagina Web Form di base ASP.NET 4.5

di Erik Reitan

Per lo sviluppo di nuove app Web, è consigliabile Blazor.

Questa procedura dettagliata offre un'introduzione all'ambiente di sviluppo Web in Microsoft Visual Studio 2013 e in Microsoft Visual Studio Express 2013 for Web. Questa procedura dettagliata illustra la creazione di una semplice pagina di Web Forms ASP.NET e illustra le tecniche di base per la creazione di una nuova pagina, l'aggiunta di controlli e la scrittura di codice.

Le attività illustrate nella procedura dettagliata sono le seguenti:

• Creazione di un progetto di applicazione Web Form per file system.
• Acquisire familiarità con Visual Studio.
• Creazione di una pagina ASP.NET.
• Aggiunta di controlli.
• Aggiunta di gestori eventi.
• Esecuzione e test di una pagina da Visual Studio.

Prerequisiti

Per completare questo scenario, saranno necessari gli elementi seguenti:

• Microsoft Visual Studio 2013 o Microsoft Visual Studio Express 2013 for Web. .NET Framework viene installato automaticamente.

  Nota

  Microsoft Visual Studio 2013 e Microsoft Visual Studio Express 2013 per Web verranno spesso definiti Visual Studio in questa serie di esercitazioni.

  Se si usa Visual Studio, questa procedura dettagliata presuppone che sia stata selezionata la raccolta di impostazioni Sviluppo Web la prima volta che si è avviato Visual Studio. Per altre informazioni, vedere Procedura: Selezionare impostazioni dell'ambiente di sviluppo Web.

Creazione di un progetto di applicazione Web e di una pagina

In questa parte della procedura dettagliata si creerà un progetto di applicazione Web e si aggiungerà una nuova pagina. Si aggiungerà anche testo HTML ed si eseguirà la pagina nel browser.

Per creare un progetto di applicazione Web

1. Aprire Microsoft Visual Studio.

2. Scegliere Nuovo progetto dal menu File.
   

   Verrà visualizzata la finestra di dialogo Nuovo progetto .

3. Selezionare il gruppo Modelli ->Visual C# ->Modelli Web a sinistra.

4. Scegliere il modello Applicazione Web ASP.NET nella colonna centrale.

5. Assegnare al progetto il nome BasicWebApp e fare clic sul pulsante OK.
   

6. Selezionare quindi il modello Web Form e fare clic sul pulsante OK per creare il progetto.
   

   Visual Studio crea un nuovo progetto che include funzionalità predefinite basate sul modello Web Form. Non solo fornisce una pagina Home.aspx , una pagina About.aspx , una pagina Contact.aspx , ma include anche funzionalità di appartenenza che registra gli utenti e salva le credenziali in modo che possano accedere al sito Web. Quando viene creata una nuova pagina, Per impostazione predefinita Visual Studio visualizza la pagina nella visualizzazione Origine , in cui è possibile visualizzare gli elementi HTML della pagina. La figura seguente mostra ciò che verrà visualizzato nella visualizzazione Origine se è stata creata una nuova pagina Web denominata BasicWebApp.aspx.
   

Panoramica dell'ambiente di sviluppo Web di Visual Studio

Prima di procedere modificando la pagina, è utile acquisire familiarità con l'ambiente di sviluppo di Visual Studio. La figura seguente illustra le finestre e gli strumenti disponibili in Visual Studio e Visual Studio Express per Web.

Nota

Questo diagramma mostra le finestre predefinite e le posizioni delle finestre. Il menu Visualizza consente di visualizzare finestre aggiuntive e di ridisporre e ridimensionare le finestre in base alle proprie preferenze. Se sono già state apportate modifiche alla disposizione della finestra, ciò che viene visualizzato non corrisponderà all'illustrazione.

Ambiente di Visual Studio

Acquisire familiarità con la finestra di progettazione Web

Esaminare l'illustrazione precedente e confrontare il testo con l'elenco seguente, che descrive le finestre e gli strumenti usati più di frequente. Non tutte le finestre e gli strumenti visualizzati sono elencati qui, ma solo quelli contrassegnati nella figura precedente.

• Barre degli strumenti. Specificare i comandi per la formattazione del testo, la ricerca di testo e così via. Alcune barre degli strumenti sono disponibili solo quando si lavora nella visualizzazione Struttura .
• Esplora soluzioni finestra. Visualizza i file e le cartelle nell'applicazione Web.
• Finestra documento. Visualizza i documenti su cui si sta lavorando nelle finestre a schede. È possibile passare da un documento all'altro facendo clic sulle schede.
• Finestra Proprietà . Consente di modificare le impostazioni per la pagina, gli elementi HTML, i controlli e altri oggetti.
• Visualizzare le schede. Presenta le diverse visualizzazioni dello stesso documento. La visualizzazione progettazione è una superficie di modifica quasi WYSIWYG. La visualizzazione origine è l'editor HTML per la pagina. La doppia visualizzazione visualizza sia la visualizzazione Struttura che la visualizzazione Origine per il documento. Le visualizzazioni Progettazione e Origine verranno visualizzate più avanti in questa procedura dettagliata. Se si preferisce aprire pagine Web nella visualizzazione Progettazione, scegliere Opzioni dal menu Strumenti, selezionare il nodo Progettazione HTML e modificare l'opzione Pagine iniziali in .
• ToolBox. Fornisce controlli ed elementi HTML che è possibile trascinare nella pagina. Gli elementi della casella degli strumenti sono raggruppati per funzione comune.
• S erver Explorer. Visualizza le connessioni di database. Se Esplora server non è visibile, scegliere Esplora server dal menu Visualizza.

Creazione di una nuova pagina Web Forms ASP.NET

Quando si crea una nuova applicazione Web Form usando il modello di progetto applicazione Web ASP.NET, Visual Studio aggiunge una pagina ASP.NET (pagina Web Form) denominata Default.aspx, nonché diversi altri file e cartelle. È possibile usare la pagina Default.aspx come home page per l'applicazione Web. Tuttavia, per questa procedura dettagliata, si creerà e si lavorerà con una nuova pagina.

Per aggiungere una pagina all'applicazione Web

1. Chiudere la pagina Default.aspx . A tale scopo, fare clic sulla scheda che visualizza il nome del file e quindi fare clic sull'opzione chiudi.
2. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome dell'applicazione Web (in questa esercitazione il nome dell'applicazione è BasicWebSite) e quindi scegliere Aggiungi ->Nuovo elemento.
   La finestra di dialogo Aggiungi nuovo elemento viene visualizzata.
3. Selezionare il gruppo Visual C# -Web templates (Modelli Web)> a sinistra. Selezionare quindi Web Form dall'elenco centrale e denominarlo FirstWebPage.aspx.
   
4. Fare clic su Aggiungi per aggiungere la pagina Web al progetto.
   Visual Studio crea la nuova pagina e la apre.

Aggiunta del codice HTML alla pagina

In questa parte della procedura dettagliata si aggiungerà un testo statico alla pagina.

Per aggiungere testo alla pagina

1. Nella parte inferiore della finestra del documento fare clic sulla scheda Progettazione per passare alla visualizzazione Progettazione .

   La visualizzazione Struttura visualizza la pagina corrente in modo simile a WYSIWYG. A questo punto, non sono presenti controlli o testo nella pagina, quindi la pagina è vuota ad eccezione di una linea tratteggiata che delinea un rettangolo. Questo rettangolo rappresenta un elemento div nella pagina.

2. Fare clic all'interno del rettangolo delineato da una linea tratteggiata.

3. Digitare Welcome to Visual Web Developer (Benvenuto in Visual Web Developer ) e premere INVIO due volte.

   La figura seguente mostra il testo digitato nella visualizzazione Struttura .

   

4. Passare alla visualizzazione Origine .

   È possibile visualizzare il codice HTML nella visualizzazione Origine creato durante la digitazione nella visualizzazione Struttura .
   

Esecuzione della pagina

Prima di procedere aggiungendo controlli alla pagina, è possibile eseguirlo per la prima volta.

Per eseguire la pagina

1. In Esplora soluzioni fare clic con il pulsante destro del mouse su FirstWebPage.aspx e scegliere Imposta come pagina iniziale.

2. Premere CTRL+F5 per eseguire la pagina.

   La pagina viene visualizzata nel browser. Anche se la pagina creata ha un'estensione di nome file di .aspx, attualmente viene eseguita come qualsiasi pagina HTML.

   Per visualizzare una pagina nel browser, è anche possibile fare clic con il pulsante destro del mouse sulla pagina in Esplora soluzioni e selezionare Visualizza nel browser.

3. Chiudere il browser per arrestare l'applicazione Web.

Aggiunta e programmazione di controlli

Ora si aggiungeranno controlli server alla pagina. I controlli server, ad esempio pulsanti, etichette, caselle di testo e altri controlli familiari, offrono funzionalità tipiche di elaborazione dei moduli per le pagine Web Form. Tuttavia, è possibile programmare i controlli con il codice eseguito nel server, anziché il client.

Si aggiungerà un controllo Button , un controllo TextBox e un controllo Label alla pagina e si scriverà il codice per gestire l'evento Click per il controllo Button .

Per aggiungere controlli alla pagina

1. Fare clic sulla scheda Progettazione per passare alla visualizzazione Struttura .

2. Posizionare il punto di inserimento alla fine del testo Benvenuto in Visual Web Developer e premere INVIO cinque o più volte per fare spazio nella casella dell'elemento div.

3. Nella casella degli strumenti espandere il gruppo Standard se non è già espanso.
   Si noti che potrebbe essere necessario espandere la finestra casella degli strumenti a sinistra per visualizzarla.

4. Trascinare un controllo TextBox nella pagina e rilasciarlo al centro della casella dell'elemento div con Benvenuto in Visual Web Developer nella prima riga.

5. Trascinare un controllo Button nella pagina e rilasciarlo a destra del controllo TextBox .

6. Trascinare un controllo Etichetta nella pagina e rilasciarlo in una riga separata sotto il controllo Pulsante .

7. Posizionare il punto di inserimento sopra il controllo TextBox e quindi digitare Immettere il nome: .

   Questo testo HTML statico è la didascalia per il controllo TextBox . È possibile combinare controlli HTML e server statici nella stessa pagina. La figura seguente mostra come vengono visualizzati i tre controlli nella visualizzazione Struttura .

   

Impostazione delle proprietà del controllo

Visual Studio offre diversi modi per impostare le proprietà dei controlli nella pagina. In questa parte della procedura dettagliata verranno impostate le proprietà sia nella visualizzazione Struttura che nella visualizzazione Origine.

Per impostare le proprietà del controllo

1. Per prima cosa, visualizzare le finestre Proprietà selezionando dal menu Visualizza ->Altre finestre ->Finestra Proprietà. In alternativa, è possibile selezionare F4 per visualizzare la finestra Proprietà.

2. Selezionare il controllo Pulsante e quindi nella finestra Proprietà impostare il valore di Testo su Nome visualizzato. Il testo immesso viene visualizzato sul pulsante nella finestra di progettazione, come illustrato nella figura seguente.

   

3. Passare alla visualizzazione Origine .

   La visualizzazione Origine visualizza il codice HTML per la pagina, inclusi gli elementi creati da Visual Studio per i controlli server. I controlli vengono dichiarati usando la sintassi simile a HTML, ad eccezione del fatto che i tag usano il prefisso asp: e includono l'attributo runat="server".

   Le proprietà del controllo vengono dichiarate come attributi. Ad esempio, quando si imposta la proprietà Text per il controllo Button , nel passaggio 1 si imposta effettivamente l'attributo Text nel markup del controllo.

   Nota

   Tutti i controlli si trovano all'interno di un elemento del modulo , che ha anche l'attributo runat="server". L'attributo runat="server" e il prefisso asp: per i tag di controllo contrassegnano i controlli in modo che vengano elaborati da ASP.NET nel server quando viene eseguita la pagina. Il codice all'esterno del formato runat="server"> e <gli elementi runat="server"> vengono inviati invariati al browser, motivo per cui il codice ASP.NET deve trovarsi all'interno di< un elemento il cui tag di apertura contiene l'attributo runat="server".

4. Successivamente, si aggiungerà una proprietà aggiuntiva al controllo Etichetta . Inserire il punto di inserimento direttamente dopo asp:Label nel< tag asp:Label> e quindi premere BARRA SPAZIATRICE.

   Viene visualizzato un elenco a discesa che visualizza l'elenco delle proprietà disponibili che è possibile impostare per un controllo Etichetta . Questa funzionalità, denominata IntelliSense, consente di usare la visualizzazione Origine con la sintassi dei controlli server, degli elementi HTML e di altri elementi nella pagina. La figura seguente mostra l'elenco a discesa IntelliSense per il controllo Etichetta .

   

5. Selezionare ForeColor e quindi digitare un segno di uguale.

   IntelliSense visualizza un elenco di colori.

   Nota

   È possibile visualizzare un elenco a discesa IntelliSense in qualsiasi momento premendo CTRL+J durante la visualizzazione del codice.

6. Selezionare un colore per il testo del controllo Etichetta . Assicurarsi di selezionare un colore sufficientemente scuro da leggere su uno sfondo bianco.

   L'attributo ForeColor viene completato con il colore selezionato, inclusa la virgoletta di chiusura.

Programmazione del controllo Pulsante

Per questa procedura dettagliata, si scriverà codice che legge il nome immesso dall'utente nella casella di testo e quindi visualizzerà il nome nel controllo Etichetta .

Aggiungere un gestore eventi pulsante predefinito

1. Passare alla visualizzazione Struttura .

2. Fare doppio clic sul controllo Pulsante .

   Per impostazione predefinita, Visual Studio passa a un file code-behind e crea un gestore eventi scheletro per l'evento predefinito del controllo Button , ovvero l'evento Click . Il file code-behind separa il markup dell'interfaccia utente (ad esempio HTML) dal codice server (ad esempio C#).
   Il cursore viene posizionato per aggiungere codice per questo gestore eventi.

   Nota

   Fare doppio clic su un controllo nella visualizzazione Struttura è solo uno dei diversi modi in cui è possibile creare gestori eventi.

3. All'interno del gestore eventi Button1_Click digitare Label1 seguito da un punto (.).

   Quando si digita il punto dopo l'ID dell'etichetta (Label1), Visual Studio visualizza un elenco di membri disponibili per il controllo Etichetta, come illustrato nella figura seguente. Un membro in genere una proprietà, un metodo o un evento.

   

4. Completare il gestore eventi Click per il pulsante in modo che venga letto come illustrato nell'esempio di codice seguente.

   protected void Button1_Click(object sender, System.EventArgs e)
   {    
       Label1.Text = TextBox1.Text + ", welcome to Visual Studio!";
   }
   

   Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Textbox1.Text & ", welcome to Visual Studio!"
   End Sub
   

5. Tornare alla visualizzazione Origine del markup HTML facendo clic con il pulsante destro del mouse su FirstWebPage.aspx nella Esplora soluzioni e scegliendo Visualizza markup.

6. Scorrere fino all'elemento <asp:Button> . Si noti che l'elemento <asp:Button> ha ora l'attributo onclick="Button1_Click".

   Questo attributo associa l'evento Click del pulsante al metodo del gestore codificato nel passaggio precedente.

   I metodi del gestore eventi possono avere qualsiasi nome; Il nome visualizzato è il nome predefinito creato da Visual Studio. Il punto importante è che il nome usato per l'attributo OnClick nel codice HTML deve corrispondere al nome di un metodo definito nel code-behind.

Esecuzione della pagina

È ora possibile testare i controlli server nella pagina.

Per eseguire la pagina

1. Premere CTRL+F5 per eseguire la pagina nel browser. Se si verifica un errore, controllare di nuovo i passaggi precedenti.

2. Immettere un nome nella casella di testo e fare clic sul pulsante Nome visualizzato.

   Il nome immesso viene visualizzato nel controllo Etichetta . Si noti che quando si fa clic sul pulsante, la pagina viene pubblicata nel server Web. ASP.NET quindi ricrea la pagina, esegue il codice (in questo caso, viene eseguito il gestore eventi Click del controllo Pulsante) e quindi invia la nuova pagina al browser. Se si osserva la barra di stato nel browser, si noterà che la pagina sta effettuando un round trip al server Web ogni volta che si fa clic sul pulsante.

3. Nel browser visualizzare l'origine della pagina in esecuzione facendo clic con il pulsante destro del mouse sulla pagina e selezionando Visualizza origine.

   Nel codice sorgente della pagina viene visualizzato HTML senza codice server. In particolare, non vengono visualizzati gli <elementi asp:> con cui si stava lavorando nella visualizzazione Origine . Quando la pagina viene eseguita, ASP.NET elabora i controlli server ed esegue il rendering degli elementi HTML nella pagina che eseguono le funzioni che rappresentano il controllo. Ad esempio, il rendering del controllo asp:Button> viene eseguito come< elemento html input type="submit".><

4. Chiudere il browser.

Utilizzo di controlli aggiuntivi

In questa parte della procedura dettagliata si lavorerà con il controllo Calendario , che visualizza le date di un mese alla volta. Il controllo Calendario è un controllo più complesso rispetto al pulsante, alla casella di testo e all'etichetta in uso e illustra alcune altre funzionalità dei controlli server.

In questa sezione verrà aggiunto un controllo System.Web.UI.WebControls.Calendar alla pagina e formattarlo.

Per aggiungere un controllo Calendario

1. In Visual Studio passare alla visualizzazione Progettazione .

2. Dalla sezione Standard della casella degli strumenti trascinare un controllo Calendario nella pagina e rilasciarlo sotto l'elemento div che contiene gli altri controlli.

   Viene visualizzato il pannello smart tag del calendario. Il pannello visualizza i comandi che semplificano l'esecuzione delle attività più comuni per il controllo selezionato. La figura seguente mostra il controllo Calendario come sottoposto a rendering nella visualizzazione Struttura .

   

3. Nel pannello smart tag scegliere Formato automatico.

   Viene visualizzata la finestra di dialogo Formato automatico, che consente di selezionare uno schema di formattazione per il calendario. La figura seguente mostra la finestra di dialogo Formato automatico per il controllo Calendario .

   

4. Nell'elenco Selezionare uno schema selezionare Semplice e quindi fare clic su OK.

5. Passare alla visualizzazione Origine .

   È possibile visualizzare l'elemento <asp:Calendar> . Questo elemento è molto più lungo degli elementi per i controlli semplici creati in precedenza. Include anche sottoelementi, ad esempio <WeekEndDayStyle>, che rappresentano varie impostazioni di formattazione. Nella figura seguente viene illustrato il controllo Calendario nella visualizzazione Origine . (Il markup esatto visualizzato in La visualizzazione origine potrebbe differire leggermente dall'illustrazione.

   

Programmazione del controllo calendario

In questa sezione verrà programmato il controllo Calendario per visualizzare la data attualmente selezionata.

Per programmare il controllo Calendario

1. Nella visualizzazione Struttura fare doppio clic sul controllo Calendario .

   Viene creato e visualizzato un nuovo gestore eventi nel file code-behind denominato FirstWebPage.aspx.cs.

2. Completare il gestore eventi SelectionChanged con il codice seguente.

   protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
   {    
       Label1.Text = Calendar1.SelectedDate.ToLongDateString();
   }
   

   Protected Sub Calendar1_SelectionChanged(ByVal sender As Object, ByVal e As System.EventArgs)
       Label1.Text = Calendar1.SelectedDate.ToLongDateString()
   End Sub
   

   Il codice precedente imposta il testo del controllo etichetta sulla data selezionata del controllo calendario.

Esecuzione della pagina

È ora possibile testare il calendario.

Per eseguire la pagina

1. Premere CTRL+F5 per eseguire la pagina nel browser.

2. Fare clic su una data nel calendario.

   La data selezionata viene visualizzata nel controllo Etichetta .

3. Nel browser visualizzare il codice sorgente per la pagina.

   Si noti che il rendering del controllo Calendario è stato eseguito nella pagina come tabella, con ogni giorno come elemento td.

4. Chiudere il browser.

Passaggi successivi

Questa procedura dettagliata ha illustrato le funzionalità di base della finestra di progettazione pagine di Visual Studio. Ora che si è appreso come creare e modificare una pagina Web Form in Visual Studio, è possibile esplorare altre funzionalità. Ad esempio, è possibile eseguire le operazioni seguenti:

• Per altre informazioni sulle Web Forms ASP.NET, vedere la serie di esercitazioni dettagliate Introduzione a ASP.NET Web Form 4.5 e Visual Studio 2013.
• Altre informazioni sui fogli di stile CSS (Cascading Style Sheets). Per informazioni dettagliate, vedere Panoramica sull'uso di CSS.