Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer

  • Articolo

Aggiornamento: novembre 2007

In questa procedura dettagliata è fornita un'introduzione a Microsoft Visual Web Developer in cui l'utente viene guidato nel processo di creazione di una pagina semplice mediante l'utilizzo di Visual Web Developer, illustrando le tecniche di base per la creazione di una nuova pagina, l'aggiunta di controlli e la scrittura di codice.

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

  • Creazione di un sito Web di file system.

  • Acquisizione della conoscenza di Visual Web Developer.

  • Creazione di una pagina ASP.NET a file singolo in Visual Web Developer.

  • Aggiunta di controlli.

  • Aggiunta di gestori eventi.

  • Esecuzione di pagine con Server Web in Visual Web Developer.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

  • Visual Web Developer

  • .NET Framework

Creazione di un sito e di una pagina Web

In questa parte della procedura dettagliata, sarà creato un sito Web a cui sarà aggiunta una pagina. Sarà inoltre aggiunto un testo HTML e la pagina sarà eseguita nel browser Web.

Per questa procedura dettagliata, sarà creato un sito Web di file system in cui non è richiesto l'utilizzo di Microsoft Internet Information Services (IIS). La pagina sarà invece creata ed eseguita nel file system locale.

Un sito Web di file system consente la memorizzazione delle pagine e di altri file in una cartella scelta in un percorso qualsiasi nel computer locale. Altri opzioni di siti Web includono un sito Web IIS locale, in cui i file sono memorizzati in una sottocartella della directory principale di IIS locale (in genere, \Inetpub\Wwwroot\). In un sito FTP i file vengono memorizzati in un server remoto a cui è possibile accedere in Internet utilizzando il protocollo FTP (File Transfer Protocol). In un sito remoto i file vengono memorizzati in un server remoto a cui è possibile accedere in una rete locale. Per ulteriori informazioni, vedere Procedura dettagliata: modifica di siti Web con FTP in Visual Web Developer. Inoltre i file dei siti Web possono essere memorizzati in un sistema di controllo di origine quale Visual SourceSafe. Per ulteriori informazioni, vedere Introduzione al controllo del codice sorgente.

Per creare un sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovo sito Web dal menu File.

    Vene visualizzata la finestra di dialogo Nuovo sito Web, illustrata nell'immagine riportata di seguito.

    Finestra di dialogo Nuovo sito Web

  3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

    Quando si crea un sito Web, specificare un modello. Ciascun modello consente di creare un'applicazione Web in cui sono contenuti diversi file e cartelle. In questa procedura dettagliata, viene creato un sito Web in base al modello Sito Web ASP.NET, in cui sono create alcune cartelle e alcuni file predefiniti.

  4. Selezionare la casella File system nella casella Percorso e immettere il nome della cartella in cui salvare le pagine del sito Web.

    Digitare, ad esempio, il nome cartella C:\BasicWebSite.

  5. Nell'elenco Linguaggio, selezionare Visual Basic oppure Visual C#.

    Il linguaggio di programmazione scelto sarà quello predefinito per il sito Web. Tuttavia, è possibile utilizzare più linguaggi nella stessa applicazione Web creando pagine e componenti con linguaggi di programmazione diversi.

  6. Scegliere OK.

    La cartella viene creata insieme a una nuova pagina chiamata Default.aspx. Quando si crea una pagina, per impostazione predefinita in Visual Web Developer la pagina viene visualizzata in visualizzazione Origine, in cui è possibile visualizzare gli elementi HTML della pagina. Nell'immagine riportata di seguito viene illustrata la visualizzazione Origine di una pagina Web predefinita.

    Visualizzazione Origine di un pagina predefinita

Presentazione di Visual Web Developer

Prima di procedere all'utilizzo della pagina, può essere utile acquisire una maggiore conoscenza dell'ambiente di sviluppo di Visual Web Developer. Nell'illustrazione riportata di seguito vengono mostrate le finestre e gli strumenti disponibili in Visual Web Developer.

Diagramma dell'ambiente di Visual Web Developer

Per acquisire conoscenza della finestra di progettazione Web in Visual Web Developer

  • Esaminare l'illustrazione precedente e trovare il testo corrispondente nell'elenco riportato di seguito, in cui sono descritte le finestre e gli strumenti utilizzati più comunemente. In questo elenco non sono presenti tutte le finestre e gli strumenti visualizzati, ma soltanto quelli contrassegnati nell'illustrazione precedente.

    • Barre degli strumenti. Forniscono i comandi per la formattazione di testo, la ricerca di testo e così via. Alcune barre degli strumenti sono disponibili soltanto quando si utilizza la visualizzazione Progettazione.

    • Esplora soluzioni. Consente di visualizzare i file e le cartelle nel sito Web.

    • Finestra del documento. Consente di visualizzare i documenti utilizzati in finestre a schede. È possibile passare da un documento all'altro facendo clic sulle schede.

    • Finestra Proprietà. Consente di modificare le impostazioni della pagina, degli elementi HTML, dei controlli e di altri progetti.

    • Schede di visualizzazione. Forniscono diverse visualizzazioni dello stesso documento. La visualizzazione Progettazione costituisce un ambiente di modifica quasi di tipo WYSIWYG. La visualizzazione Origine è l'editor HTML per la pagina. La visualizzazione suddivisa include sia la visualizzazione Progettazione sia la visualizzazione Origine del documento. Più avanti in questa procedura dettagliata si utilizzeranno le visualizzazioni Progettazione e Origine. Se si preferisce aprire le pagine Web nella visualizzazione Progettazione, scegliere Opzioni dal menu Strumenti, selezionare il nodo Finestra di progettazione HTML e modificare l'opzione Apri pagine in.

    • Casella degli strumenti. Fornisce strumenti ed elementi HTML che è possibile trascinare nella pagina. Gli elementi della Casella degli strumenti sono raggruppati per funzione.

    • Esplora server/Esplora database. Consente la visualizzazione delle connessioni al database. Se Esplora server non è visibile in Visual Web Developer, scegliere Esplora server o Esplora database dal menu Visualizza.

      Nota:

      È possibile riordinare e ridimensionare le finestre in base alle proprie preferenze. Il menu Visualizza consente di visualizzare finestre aggiuntive.

Creazione di una nuova pagina Web Form

Quando si crea un nuovo sito Web, in Visual Web Developer viene aggiunta una pagina ASP.NET (pagina Web Form) denominata Default.aspx. Tale pagina può essere utilizzata come home page per il sito Web. Tuttavia, per questa procedura dettagliata, sarà creata e utilizzata una nuova pagina.

Per aggiungere una pagina al sito Web

  1. Chiudere la pagina Default.aspx. Per chiudere la pagina, fare clic con il pulsante destro del mouse sulla scheda in cui è contenuto il nome del file e selezionare Chiudi.

  2. In Esplora soluzioni, fare clic con il pulsante destro del mouse sul sito Web (ad esempio C:\BasicWebSite) e scegliere Aggiungi nuovo elemento.

  3. In Modelli Visual Studio installati fare clic su Web Form. Nell'immagine riportata di seguito è visualizzata la casella di controllo Aggiungi nuovo elemento.

    Finestra di dialogo Aggiungi nuovo elemento

  4. Nella casella Nome digitare FirstWebPage.

  5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione da utilizzare (Visual Basic, C# o J#). Al momento della creazione del sito Web è stato specificato un linguaggio predefinito. Tuttavia, quando si crea una nuova pagina o un componente per il sito Web, è possibile modificare il linguaggio dell'impostazione predefinita. È possibile utilizzare linguaggi di programmazione differenti nello stesso sito Web.

  6. Deselezionare la casella di controllo Inserisci codice in file separato.

    In questa procedura dettagliata, viene creata una pagina a file singolo con il codice e l'HTML nella stessa pagina. Il codice per le pagine ASP.NET può essere inserito nella pagina oppure in un file di classe separato. Per ulteriori informazioni su come mantenere il codice in un file separato, vedere Procedura dettagliata: creazione di una pagina Web di base con separazione del codice in Visual Web Developer .

  7. Scegliere Aggiungi.

    In Visual Web Developer viene creata la nuova pagina e viene aperta in visualizzazione Origine.

Aggiunta di elementi HTML alla pagina

In questa parte della procedura dettagliata, sarà aggiunto un testo statico alla pagina.

Per aggiungere il testo alla pagina

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

    In visualizzazione Progettazione è visualizzata la pagina utilizzata in modalità analoga alla visualizzazione WYSIWYG. In questa fase non si dispone di alcun testo o controlli nella pagina, pertanto la pagina è vuota.

  2. Nella pagina, digitare Welcome to Visual Web Developer.

    Nell'immagine riportata di seguito viene visualizzato il testo digitato in visualizzazione Progettazione.

    Testo di introduzione visualizzato in visualizzazione Progettazione

  3. Passare alla visualizzazione Origine.

    È possibile visualizzare il codice HTML creato digitando nella visualizzazione Progettazione, come illustrato nell'immagine riportata di seguito.

    Testo di introduzione visualizzato in visualizzazione Origine

Esecuzione della pagina

Prima di procedere con l'aggiunta dei controlli alla pagina, è possibile provare ad eseguirla. Per eseguire una pagina, è necessario un server Web. In un sito Web di produzione, utilizzare IIS come server Web. Tuttavia, per eseguire il test di una pagina, è possibile utilizzare il server di sviluppo ASP.NET, che viene eseguito a livello locale e per il quale non è richiesto IIS. Per i siti Web di file system, il server Web predefinito in Visual Web Developer è il server di sviluppo ASP.NET.

Per eseguire la pagina

  1. Premere CTRL+F5 per eseguire la pagina.

    In Visual Web Developer viene avviato il server di sviluppo ASP.NET. Nella barra degli strumenti viene visualizzata un'icona che indica che il server Web Visual Web Developer è in esecuzione, come illustrato nell'immagine riportata di seguito.

    Icona del server Web in Visual Web Developer

    La pagina viene visualizzata nel browser. Sebbene la pagina creata presenti un'estensione aspx, viene eseguita correntemente come una qualsiasi pagina HTML.

    Nota:

    Se nel browser viene visualizzato un errore 502 oppure un errore indicante l'impossibilità di visualizzare la pagina, è possibile che occorra configurare il browser in modo da ignorare i server proxy per le richieste locali. Per informazioni dettagliate, vedere Procedura: ignorare un server proxy per le richieste Web locali.

  2. Chiudere il browser.

Aggiunta e programmazione dei controlli

In questa parte della procedura dettagliata, alla pagina verrà aggiunto un controllo Button, TextBox, e Label e verrà scritto il codice per gestire l'evento Click per il controllo Button.

A questo punto verranno aggiunti i controlli alla pagina. I controlli server, inclusi i pulsanti, le etichette, le caselle di testo e altri controlli comuni, forniscono funzionalità di elaborazione basate su form per le pagine Web ASP.NET. È possibile, tuttavia, programmare i controlli con un codice eseguibile nel server e non nel client.

Per aggiungere controlli alla pagina

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

  2. Premere MAIUSC+INVIO alcune volte per creare spazio.

  3. Dal gruppo Standard della Casella degli strumenti trascinare nella pagina tre controlli: TextBox, Button e Label.

  4. Posizionare il punto di inserimento al di sopra del controllo TextBox e digitare Enter your name:.

    Il testo statico HTML rappresenta la didascalia per il controllo TextBox. È possibile combinare l'HTML statico e i controlli server nella stessa pagina. Nell'immagine riportata di seguito viene visualizzato il modo di visualizzazione dei tre controlli in visualizzazione Progettazione.

    Controlli in visualizzazione Progettazione

Impostazione delle proprietà dei controlli

In Visual Web Developer sono disponibili diversi modi per impostare le proprietà dei controlli nella pagina. In questa parte della procedura dettagliata, le proprietà saranno impostate sia in visualizzazione Progettazione, sia in visualizzazione Origine.

Per impostare le proprietà di controllo

  1. Selezionare il controllo Button, quindi nella finestra Proprietà, impostare Text su Display Name, come illustrato nell'immagine riportata di seguito.

    Testo modificato del controllo Button

  2. Passare alla visualizzazione Origine.

    In visualizzazione Origine viene visualizzato il codice HTML della pagina, inclusi gli elementi creati in Visual Web Developer per i controlli server. I controlli vengono dichiarati utilizzando una sintassi simile al linguaggio HTML, a eccezione del fatto che nei tag viene utilizzato il prefisso asp: e viene incluso l'attributo .

    Le proprietà dei controlli vengono dichiarate come attributi. Ad esempio, quando è stata impostata la proprietà Text per il controllo Button nel passaggio 1, in realtà è stato impostato l'attributo Text nel markup del controllo.

    Notare che tutti i controlli si trovano all'interno di un elemento <form>, in cui è presente anche l'attributo . Mediante l'attributo e il prefisso asp: per i tag di controllo, i controlli vengono contrassegnati per essere elaborati da ASP.NET sul server quando si esegue la pagina. Il codice all'esterno degli elementi <form > e <script > viene inviato al browser come codice o markup client. Per questo motivo il codice ASP.NET deve trovarsi all'interno di un elemento il cui tag di apertura contiene l'attributo .

  3. Posizionare il punto di inserimento in uno spazio all'interno del tag <asp:label>, quindi premere BARRA SPAZIATRICE.

    Viene visualizzato un elenco a discesa con le proprietà che possono essere impostate per un controllo Label. Questa funzionalità, definita IntelliSense, semplifica l'utilizzo, nella visualizzazione Origine, della sintassi dei controlli server, degli elementi HTML e di altri elementi della pagina. Nell'immagine riportata di seguito è visualizzato l'elenco a discesa IntelliSense per il controllo Label.

    IntelliSense per il controllo Label

  4. Selezionare ForeColor, quindi digitare un segno di uguale (=). In IntelliSense viene visualizzato un elenco di colori.

    Nota:

    È possibile visualizzare un elenco a discesa IntelliSense in qualsiasi momento premendo CTRL+J.

  5. Selezionare un colore per il testo del controllo Label.

    L'attributo ForeColor viene completato con il colore selezionato.

Programmazione del controllo Button

Per questa procedura dettagliata, è necessario scrivere il codice che consente di leggere il nome immesso nella casella di testo e di visualizzare il nome nel controllo Label.

Per aggiungere un gestore eventi del pulsante predefinito

  1. Passare alla visualizzazione Progettazione.

  2. Fare doppio clic sul controllo Button.

    Visual Web Developer passa alla visualizzazione Origine e viene creata una struttura del gestore eventi per l'evento predefinito del controllo Button, l'evento Click.

    Nota:

    Il doppio clic su un controllo in visualizzazione Progettazione rappresenta uno dei vari modi per creare dei gestori eventi.

  3. All'interno del gestore, digitare:

    Label1

    In Visual Web Developer viene visualizzato un elenco di membri disponibili per il controllo Label, come illustrato nell'immagine riportata di seguito.

    Membri del controllo Label disponibili

  4. Completare il gestore eventi Click per il pulsante per consentirne la lettura come illustrato nell'esempio di codice riportato di seguito.

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

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

  5. Scorrere verso il basso fino all'elemento <asp:Button>. Notare che, in questa fase, l'elemento <asp:Button> dispone dell'attributo OnClick="Button1_Click". Questo attributo consente di associare l'evento Click del pulsante al metodo del gestore codificato nel passaggio 4.

    I metodi del gestore eventi possono essere denominati in qualsiasi modo; il nome visualizzato è il nome predefinito creato da Visual Web Developer. È importante che il nome utilizzato per l'attributo OnClick corrisponda al nome di un metodo nella pagina.

    Nota:

    Se si utilizza Visual Basic con la separazione del codice, in Visual Web Developer non sarà aggiunto un attributo OnClick esplicito. Al contrario, l'evento viene associato al metodo del gestore utilizzando una parola chiave Handles nella dichiarazione del gestore stessa.

Esecuzione della pagina

È ora possibile eseguire il test dei controlli del server nella pagina.

Per eseguire la pagina

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

    La pagina viene eseguita di nuovo utilizzando il server di sviluppo ASP.NET.

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

    Il nome immesso viene visualizzato nel controllo Label. Notare che, facendo clic sul pulsante, la pagina viene inviata al server Web. In ASP.NET viene ricreata la pagina, eseguito il codice (in questo caso, viene eseguito il gestore eventi Click del controllo Button) e infine la nuova pagina viene inviata al browser. Nella barra di stato nel browser, è possibile visualizzare che la pagina viene sottoposta a un percorso di andata e ritorno al server Web ogni volta che si fa clic sul pulsante.

  3. Nel browser, visualizzare l'origine della pagina in esecuzione.

    Nel codice sorgente della pagina viene visualizzato soltanto il linguaggio HTML ordinario, non sono visualizzati gli elementi <asp:> utilizzati in visualizzazione Origine. Quando si esegue la pagina, in ASP.NET vengono elaborati i controlli server e viene eseguito il rendering degli elementi HTML nella pagina in cui sono eseguite le funzioni che rappresentano il controllo. Ad esempio, viene eseguito il rendering del controllo <asp:Button> come elemento <input type="submit"> HTML.

  4. Chiudere il browser.

Utilizzo di controlli aggiuntivi

In questa parte della procedura dettagliata, sarà utilizzato il controllo Calendar, in cui sono visualizzate le date un mese per volta. Il controllo Calendar è un controllo più complesso rispetto al pulsante, alla casella di testo e all'etichetta utilizzati e consente di illustrare ulteriori funzionalità dei controlli server.

In questa sezione, un controllo Calendar sarà aggiunto alla pagina e formattato.

Per aggiungere un controllo Calendar

  1. In Visual Web Developer, passare alla visualizzazione Progettazione.

  2. Dalla sezione Standard della Casella degli strumenti, trascinare un controllo Calendar nella pagina.

    Viene visualizzato il pannello smart tag del calendario in cui sono presenti comandi che consentono di eseguire in modo semplice le attività più comuni per il controllo selezionato. Nell'immagine riportata di seguito viene mostrato il controllo Calendar nel modo in cui è sottoposto a rendering nella visualizzazione Progettazione.

    Controllo Calendar in visualizzazione Progettazione

  3. Nel pannello smart tag scegliere Formattazione automatica.

    Viene visualizzata la finestra di dialogo Formattazione automatica che consente di selezionare uno schema di formattazione per il calendario. Nell'immagine riportata di seguito è illustrata la finestra di dialogo Formattazione automatica per il controllo Calendar.

    Finestra di dialogo Formattazione automatica per il controllo Calendar

  4. Selezionare Selezionare uno schema dall'elenco Semplice, quindi scegliere OK.

  5. Passare alla visualizzazione Origine.

    È possibile visualizzare l'elemento <asp:Calendar>. Questo elemento è molto più lungo rispetto agli elementi per i controlli semplici creati in precedenza. Inoltre, include sottoelementi, quali <WeekEndDayStyle>, che rappresentano varie impostazioni di formattazione. Nell'immagine riportata di seguito è illustrato il controllo Calendar in visualizzazione Origine.

    Controllo Calendar in visualizzazione Origine

Programmazione del controllo Calendar

In questa sezione, il controllo Calendar sarà programmato per visualizzare la data selezionata correntemente.

Per programmare il controllo Calendar

  1. In visualizzazione Progettazione, fare doppio clic sul controllo Calendar.

    Nella visualizzazione Origine viene creato un nuovo gestore eventi.

  2. Completare il gestore eventi SelectionChanged con il codice evidenziato riportato di seguito.

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

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

Esecuzione della pagina

È ora possibile eseguire il test del 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 Label.

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

    Notare che è stato eseguito il rendering del controllo Calendar nella pagina come tabella, con ciascun giorno come elemento <td> in cui è contenuto un elemento <a>.

  4. Chiudere il browser.

Passaggi successivi

In questa procedura dettagliata sono state illustrate le funzionalità di base della finestra di progettazione della pagina Visual Web Developer. Una volta apprese le modalità di creazione e di modifica di una pagina Web in Visual Web Developer, è possibile esaminare altre funzionalità. Può, ad esempio, essere necessario:

Vedere anche

Attività

Procedura dettagliata: creazione di un sito Web IIS locale in Visual Web Developer

Procedura dettagliata: modifica di siti Web con FTP in Visual Web Developer

Concetti

Cenni preliminari su ASP.NET

Utilizzo di Visual Web Developer