Procedura dettagliata: creazione di un nuovo sito Web ASP.NET

Aggiornamento: novembre 2007

In questa procedura dettagliata viene fornita un'introduzione alle funzionalità di sviluppo Web di Microsoft Visual Web Developer Express Edition e di Microsoft Visual Studio 2008. L'utente viene guidato nella creazione di una pagina semplice. In questa procedura dettagliata, inoltre, viene descritta la finestra di progettazione visiva in modalità WYSIWYG.

Le attività illustrate in questa procedura dettagliata sono le seguenti:

• Creazione di un sito Web di tipo file system.

• Familiarizzazione con Visual Web Developer.

• Esecuzione di pagine mediante il server di sviluppo ASP.NET Server Web in Visual Web Developer.

Prerequisiti

Per completare la procedura dettagliata, è necessario disporre dei seguenti elementi:

• Microsoft Visual Studio 2008 o Microsoft Visual Web Developer Express Edition. Per informazioni sul download, vedere il sito Web all'indirizzo Visual Studio Development Center (informazioni in lingua inglese).

Creazione di un sito e di una pagina Web

Nella prima parte della procedura dettagliata si creerà un sito Web ASP.NET dotato di una pagina predefinita. Tale sito Web sarà di tipo file system e non richiederà Microsoft Internet Information Services (IIS), così da poter creare ed eseguire la pagina dal file system locale del computer.

Per sito Web di tipo file system si intende un sito Web le cui pagine e i cui file vengono memorizzati in una cartella selezionata sul computer locale. Tra le altre opzioni per siti Web vi sono i siti Web IIS locali, che memorizzano i file in una sottocartella della radice IIS locale, in genere \Inetpub\wwwroot\. Un sito FTP memorizza i file su un server remoto a cui si accede tramite 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.

Nota:
I siti Web possono essere creati anche mediante i progetti di applicazione Web. Per ulteriori informazioni, vedere Cenni preliminari sui progetti di applicazione Web.

Per creare un sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere Nuovo sito Web dal menu File.

   Verrà visualizzata la finestra di dialogo Nuovo sito Web, come mostrato nell'illustrazione seguente.

   

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

4. Nella casella Posizione selezionare la casella File system, quindi immettere il nome della cartella in cui conservare le pagine del sito Web.

   Ad esempio, digitare il nome di cartella C:\Tasks.

5. Nell'elenco Linguaggio fare clic su Visual Basic o su Visual C# per selezionare il linguaggio di programmazione da utilizzare in tutto il progetto Web.

   Nota:
   In questa procedura dettagliata non verrà scritta alcuna riga di codice di programmazione.

6. Scegliere OK.

   Visual Web Developer crea la cartella e una nuova pagina denominata Default.aspx. Per impostazione predefinita, quando viene creata una nuova pagina, quest'ultima viene visualizzata in Visual Web Developer nella visualizzazione Origine, dove è possibile visualizzarne gli elementi HMTL. Nell'illustrazione seguente viene mostrata una pagina Web predefinita nella visualizzazione Origine.

   

Presentazione di Visual Web Developer

Prima di continuare, è utile familiarizzarsi con l'ambiente di sviluppo Visual Web Developer. Nell'illustrazione seguente vengono mostrate alcune delle finestre e degli strumenti di Visual Web Developer.

Diagramma dell'ambiente di Visual Web Developer

Esaminare l'illustrazione precedente e abbinare il testo all'elenco seguente, nel quale vengono descritti le finestre e gli strumenti più frequentemente utilizzati. Non tutte le finestre e gli strumenti visualizzati sono inclusi nell'elenco, ma solo 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 solo se si utilizza la visualizzazione Progettazione.

• Esplora soluzioni. Visualizza i file e le cartelle del 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.

• Schede di visualizzazione. Presentano le diverse visualizzazioni dello stesso documento. La visualizzazione Progettazione costituisce un ambiente di modifica quasi di tipo WYSIWYG. La visualizzazione Origine è l'editor della pagina nel quale viene visualizzato il markup. La visualizzazione suddivisa include sia la visualizzazione Progettazione sia la visualizzazione Origine del documento. Si utilizzeranno le visualizzazioni Progettazione e Origine più avanti in questa procedura dettagliata. 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.

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

• Finestra Proprietà CSS. Visualizza gli stili CSS correnti quando è attiva la visualizzazione Progettazione.

• Finestre Gestisci stili e Applica stili. Consentono di controllare gli stili CSS del sito Web.

• Casella degli strumenti. Rende disponibili controlli ed elementi HTML che è possibile trascinare su una pagina. Gli elementi della Casella degli strumenti sono raggruppati per funzione.

• Esplora database. Visualizza le connessioni di database. Se la finestra Esplora database non viene visualizzata in Visual Web Developer, scegliere Altre finestre dal menu Visualizza, quindi fare clic su Esplora database.

  Nota:
  La finestra Esplora database di Visual Web Developer si chiama Esplora server nella versione completa di Visual Studio.

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

Per esplorare l'ambiente di sviluppo

1. Scegliere Barre degli strumenti dal menu Visualizza.

   Viene visualizzato un sottomenu con le barre degli strumenti disponibili. Le barre degli strumenti attualmente selezionate hanno un segno di spunta accanto a sé.

2. Scorrere fino alla fine dell'elenco delle barre degli strumenti e scegliere Personalizza.

   Verrà visualizzata la finestra di dialogo Personalizza.

3. Esaminare le barre degli strumenti disponibili. Al termine, scegliere Chiudi.

4. Scegliere Esplora soluzioni dal menu Visualizza.

   Verrà visualizzata la finestra Esplora soluzioni. Per impostazione predefinita, questa finestra è ancorata a un lato dell'ambiente Visual Web Developer.

5. Fare clic con il pulsante destro del mouse sulla prima voce dell'elenco di siti in Esplora soluzioni.

   Viene visualizzato un menu di scelta rapida per le operazioni più comuni relative ai siti Web.

6. Premere ESC per chiudere il menu di scelta rapida.

7. In Esplora soluzioni fare clic con il pulsante destro del mouse sul file Web.config e scegliere Apri per aprirlo nella finestra del documento.

8. Fare doppio clic sulla pagina Default.aspx per aprirla nella finestra del documento. Fare doppio clic su un file in alternativa all'utilizzo del comando Apri del menu di scelta rapida.

   Il nome di ogni pagina aperta è visualizzato in una scheda nella parte superiore della finestra del documento.

9. Nella parte inferiore della finestra del documento, fare clic su Dividi per visualizzare contemporaneamente la visualizzazione Origine e la visualizzazione Progettazione.

10. Scegliere Finestra Proprietà dal menu Visualizza.

    Verrà visualizzata la finestra Proprietà.

    Quando si seleziona un oggetto nella finestra del documento, ne vengono visualizzate le proprietà nella finestra Proprietà.

11. Nel riquadro della visualizzazione Origine selezionare l'elemento form, quindi esaminare le proprietà disponibili nella finestra Proprietà.

12. Scegliere Casella degli strumenti dal menu Visualizza.

    Verrà visualizzata la finestra Casella degli strumenti.

13. Nella visualizzazione Progettazione, dalla scheda Standard della Casella degli strumenti trascinare un controllo Button sul documento e rilasciarlo sull'elemento div.

    La visualizzazione Origine viene aggiornata con il markup appropriato.

14. Scegliere Esplora database dal menu Visualizza.

    Verrà visualizzata la finestra Esplora database.

    Nota:
    La finestra Esplora database di Visual Web Developer si chiama Esplora server nella versione completa di Visual Studio.

15. Fare clic con il pulsante destro del mouse su Connessioni dati per visualizzare le opzioni di database disponibili.

Creazione di una pagina Web ASP.NET

Quando si crea un nuovo sito Web, Visual Web Developer aggiunge una pagina Web ASP.NET (pagina Web Form) denominata Default.aspx, che è possibile utilizzare come home page del sito Web. Tuttavia, per questa procedura dettagliata, sarà creata e utilizzata una nuova pagina.

Per aggiungere una pagina al sito Web

1. Nella finestra del documento fare clic con il pulsante destro del mouse sulla scheda relativa alla pagina Default.aspx e fare clic su Chiudi.

2. Se viene chiesto di salvare le modifiche, scegliere No.

3. In Esplora soluzioni fare clic con il pulsante destro del mouse sul sito Web, ad esempio C:\Tasks, quindi scegliere Aggiungi nuovo elemento.

   Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

4. In Modelli Visual Studio installati fare clic su Web Form.

5. Nella casella Nome digitare Home.aspx.

6. Nell'elenco Linguaggio selezionare il linguaggio di programmazione da utilizzare (Visual Basic o C#).

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

   Nell'illustrazione seguente viene mostrata la finestra di dialogo Aggiungi nuovo elemento.

   

8. Scegliere Aggiungi.

   Visual Web Developer crea la nuova pagina. Per impostazione predefinita, la pagina viene visualizzata nella visualizzazione Origine.

Aggiunta di 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.

2. Nella pagina, digitare To-Do List.

Esecuzione della pagina

Prima di continuare, è possibile testare la pagina. Per eseguire una pagina, è necessario un server Web. In un sito Web di produzione si utilizza 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 tipo 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.

   Visual Web Developer avvia il server di sviluppo ASP.NET. Nella barra degli strumenti Finestre viene visualizzata un'icona a indicare che il server Web Visual Web Developer è in esecuzione, come mostrato nell'illustrazione seguente:

   

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

   Nota:
   Se il browser visualizza l'errore 502 o un errore che indica l'impossibilità di visualizzare la pagina, può essere necessario configurare il browser affinché ignori i server proxy per le richieste locali. Per i dettagli, vedere Procedura: ignorare un server proxy per le richieste Web locali.

2. Chiudere il browser.

Passaggi successivi

In questa procedura dettagliata sono state illustrate le funzionalità di base di Visual Web Developer.

Per un maggiore controllo sui file, memorizzare i file dei siti Web in un sistema con controllo dell'origine quale Visual SourceSafe. Per ulteriori informazioni, vedere Introduzione al controllo del codice sorgente.

Vedere anche

Concetti

Procedure dettagliate selezionate per ASP.NET