Condividi tramite


Creare il progetto

di Erik Reitan

Questa serie di esercitazioni illustra le nozioni di base per la creazione di un'applicazione Web Form ASP.NET usando ASP.NET 4.5 e Microsoft Visual Studio Express 2013 per Web. Per questa serie di esercitazioni è disponibile un progetto di Visual Studio 2013 con codice sorgente C# .

In questa esercitazione verranno creati, esaminati ed eseguiti il progetto predefinito in Visual Studio, che consentirà di acquisire familiarità con le funzionalità di ASP.NET. Si esaminerà anche l'ambiente di Visual Studio.

Cosa si apprenderà:

  • Come creare un nuovo progetto Web Form.
  • Struttura di file del progetto Web Form.
  • Come eseguire il progetto in Visual Studio.
  • Le diverse funzionalità dell'applicazione Web Form predefinita.
  • Alcune nozioni di base su come usare l'ambiente di Visual Studio.

Creazione del progetto

  1. Apri Visual Studio.

  2. Selezionare Nuovo progetto dal menu File in Visual Studio.

    Crea il Progetto - Voce di menu Nuovo Progetto

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

  4. Scegliere il modello applicazione Web ASP.NET nella colonna centrale.
    Questa serie di esercitazioni usa .NET Framework 4.5.2.

  5. Assegnare al progetto il nome WingtipToys e scegliere il pulsante OK .

    Finestra di dialogo Crea progetto - Nuovo progetto

    Annotazioni

    Il nome del progetto in questa serie di tutorial è WingtipToys. È consigliabile usare questo nome di progetto esatto in modo che il codice fornito in tutta la serie di esercitazioni funzioni come previsto.

  6. Fare clic sul pulsante Modifica autenticazione . Selezionare Account utente individuali e fare clic sul pulsante OK.

  7. Selezionare il modello Web Form e fare clic sul pulsante OK .

    Screenshot della finestra Nuovo progetto ASP.NET con il modello Web Form e il pulsante OK selezionato.

La creazione del progetto richiederà un po' di tempo. Quando è pronto, aprire la pagina Default.aspx .

Screenshot della finestra di Microsoft Visual Studio Express 2013 for Web che mostra la pagina Default.aspx.

È possibile passare dalla visualizzazione Progettazione alla visualizzazione Origine selezionando un'opzione nella parte inferiore della finestra centrale. La visualizzazione Progettazione mostra le pagine Web ASP.NET, le pagine master, le pagine di contenuto, le pagine HTML e i controlli utente utilizzando una visualizzazione near-WYSIWYG. La visualizzazione Origine visualizza il markup HTML per la pagina Web, che è possibile modificare.

Suggerimento

Informazioni sui framework di ASP.NET

ASP.NET Web Form consente di creare siti Web dinamici usando un modello familiare basato su eventi. Un'area di progettazione e centinaia di controlli e componenti consentono di creare rapidamente siti avanzati basati sull'interfaccia utente con accesso ai dati. Wingtip Toy Store si basa su ASP.NET Web Form, ma molti dei concetti appresi in questa serie di esercitazioni sono applicabili a tutti i ASP.NET.

ASP.NET offre quattro framework di sviluppo principali:

  • Web Forms ASP.NET
    Il framework Web Form è destinato agli sviluppatori che preferiscono la programmazione dichiarativa e basata su controlli, ad esempio Microsoft Windows Form (WinForms) e WPF/XAML/Silverlight. Offre un modello di sviluppo basato sulla finestra di progettazione WYSIWYG, quindi è molto diffuso con gli sviluppatori che cercano un ambiente di sviluppo rapido di applicazioni (RAD) per lo sviluppo Web. Se non si ha familiarità con la programmazione Web e si ha familiarità con gli strumenti di sviluppo client Microsoft RAD tradizionali (ad esempio, per Visual Basic e Visual C#), è possibile creare rapidamente un'applicazione Web senza avere esperienza in HTML e JavaScript.
  • ASP.NET MVC
    ASP.NET MVC è destinato agli sviluppatori interessati a modelli e principi come lo sviluppo basato su test, la separazione delle problematiche, l'inversione del controllo (IoC) e l'inserimento delle dipendenze (DI). Questo framework incoraggia la separazione del livello di logica di business di un'applicazione Web dal livello di presentazione.
  • pagine Web ASP.NET
    ASP.NET Web Pages è destinato agli sviluppatori che vogliono un approccio allo sviluppo web semplice, simile a PHP. Nel modello Pagine Web si creano pagine HTML e quindi si aggiunge codice basato su server alla pagina per controllare in modo dinamico il rendering del markup. Le pagine Web sono progettate specificamente per essere un framework leggero ed è il punto di ingresso più semplice in ASP.NET per le persone che conoscono HTML, ma potrebbero non avere un'esperienza di programmazione generale, ad esempio studenti o hobbysti. È anche un buon modo per gli sviluppatori Web che conoscono PHP o framework simili per iniziare a usare ASP.NET.
  • applicazione a pagina singola ASP.NET
    ASP.NET applicazione a pagina singola consente di creare applicazioni che includono interazioni lato client significative con HTML 5, CSS 3 e JavaScript. L'aggiornamento di ASP.NET e Web Tools 2012.2 include un nuovo modello per la creazione di applicazioni a pagina singola usando knockout.js e ASP.NET API Web. Oltre al nuovo modello spa, sono disponibili anche nuovi modelli spa creati dalla community per il download.

Oltre ai quattro framework di sviluppo principali, ASP.NET offre anche tecnologie aggiuntive importanti da conoscere e conoscere, ma non sono trattate in questa serie di esercitazioni:

  • ASP.NET API Web : framework per la creazione di servizi HTTP che raggiungono un'ampia gamma di client, inclusi browser e dispositivi mobili.
  • ASP.NET SignalR : libreria che semplifica lo sviluppo di funzionalità Web in tempo reale.

Revisione del progetto

In Visual Studio la finestra Esplora soluzioni consente di gestire i file per il progetto. Verranno ora esaminate le cartelle aggiunte all'applicazione in Esplora soluzioni. Il modello di applicazione Web aggiunge una struttura di cartelle di base:

Creare il progetto - Esplora soluzioni

Visual Studio crea alcune cartelle e file iniziali per il progetto. I primi file che verranno usati più avanti in questa esercitazione sono i seguenti:

File Purpose
Default.aspx In genere la prima pagina visualizzata quando l'applicazione viene eseguita in un browser.
Site.Master Pagina che consente di creare un layout coerente e di usare il comportamento standard per le pagine nell'applicazione.
Global.asax File facoltativo che contiene il codice per rispondere agli eventi a livello di applicazione e a livello di sessione generati da ASP.NET o da moduli HTTP.
Web.config Dati di configurazione per un'applicazione.

Esecuzione dell'applicazione Web predefinita

L'applicazione Web predefinita offre un'esperienza avanzata basata su funzionalità e supporto predefiniti. Senza apportare modifiche al progetto Web form predefinito, l'applicazione è pronta per l'esecuzione nel Web browser locale.

  1. Premere il tasto F5 in Visual Studio.
    L'applicazione verrà compilata e visualizzata nel Web browser.

    Creare il progetto - Pagina predefinita

  2. Dopo aver completato la revisione dell'applicazione in esecuzione, chiudere la finestra del browser.

In questa applicazione Web predefinita sono presenti tre pagine principali: Default.aspx (Home), About.aspx e Contact.aspx. Ognuna di queste pagine può essere raggiunta dalla barra di spostamento superiore. Nella cartella Account sono presenti anche due pagine aggiuntive, la pagina Register.aspx e la pagina Login.aspx. Queste due pagine consentono di usare le funzionalità di appartenenza di ASP.NET per creare, archiviare e convalidare le credenziali utente.

Sfondo di ASP.NET Web Forms

ASP.NET Web Form sono pagine basate sulla tecnologia Microsoft ASP.NET, in cui il codice eseguito nel server genera dinamicamente l'output della pagina Web nel browser o nel dispositivo client. Una pagina web Form ASP.NET esegue automaticamente il rendering del codice HTML corretto conforme al browser per funzionalità quali stili, layout e così via. I Web Form sono compatibili con qualsiasi linguaggio supportato da Common Language Runtime di .NET, ad esempio Microsoft Visual Basic e Microsoft Visual C#. Inoltre, i Web Form sono basati su Microsoft .NET Framework, che offre vantaggi come un ambiente gestito, la sicurezza dei tipi e l'ereditarietà.

Quando viene eseguita una pagina Web Form ASP.NET, la pagina passa attraverso un ciclo di vita in cui esegue una serie di passaggi di elaborazione. Questi passaggi includono l'inizializzazione, la creazione di istanze di controlli, il ripristino e la gestione dello stato, l'esecuzione del codice del gestore eventi e il rendering. Man mano che si ha familiarità con la potenza di ASP.NET Web Form, è importante comprendere il ciclo di vita della pagina ASP.NET in modo da poter scrivere codice nella fase appropriata del ciclo di vita per l'effetto desiderato.

Quando un server Web riceve una richiesta per una pagina, trova la pagina, la elabora, la invia al browser e quindi rimuove tutte le informazioni sulla pagina. Se l'utente richiede di nuovo la stessa pagina, il server ripete l'intera sequenza, rielaborando la pagina da zero. In altre parole, un server non ha memoria delle pagine che ha elaborato: le pagine sono senza stato. Il framework di pagina ASP.NET gestisce automaticamente l'attività di gestione dello stato della pagina e dei relativi controlli e fornisce modi espliciti per mantenere lo stato delle informazioni specifiche dell'applicazione.

Suggerimento

Funzionalità dell'applicazione Web nel modello di applicazione Web Form

Il modello di applicazione Web Form ASP.NET offre un set completo di funzionalità predefinite. 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. Questa panoramica fornisce altre informazioni su alcune delle funzionalità contenute nel modello di applicazione Web Form ASP.NET e su come vengono usate nell'applicazione Wingtip Toys.

Appartenenze

ASP.NET L'identità archivia le credenziali degli utenti in un database creato dall'applicazione. Quando gli utenti accedono, l'applicazione convalida le credenziali leggendo il database. La cartella Account del progetto contiene i file che implementano le varie parti dell'appartenenza: registrazione, accesso, modifica di una password e autorizzazione dell'accesso. Inoltre, ASP.NET Web Form supporta OAuth e OpenID. Questi miglioramenti di autenticazione consentono agli utenti di accedere al sito usando credenziali esistenti, da account come Facebook, Twitter, Windows Live e Google.

Creare il progetto - Esplora soluzioni (identità ASP.NET)

Per impostazione predefinita, il modello crea un database di appartenenza usando un nome di database predefinito in un'istanza di SQL Server Express LocalDB, il server di database di sviluppo fornito con Visual Studio Express 2013 per Web.

SQL Server Express LocalDB

SQL Server Express LocalDB è una versione leggera di SQL Server con molte funzionalità di programmabilità di un database di SQL Server. SQL Server Express LocalDB viene eseguito in modalità utente e dispone di un'installazione rapida e senza configurazione con un breve elenco di prerequisiti di installazione. In Microsoft SQL Server qualsiasi database o codice Transact-SQL può essere spostato da SQL Server Express LocalDB a SQL Server e SQL Azure senza alcun passaggio di aggiornamento. Sql Server Express LocalDB può quindi essere usato come ambiente di sviluppo per le applicazioni destinate a tutte le edizioni di SQL Server. SQL Server Express LocalDB abilita funzionalità come stored procedure, funzioni definite dall'utente e aggregazioni, integrazione di .NET Framework, tipi spaziali e altri non disponibili in SQL Server Compact.

Pagine master

Una pagina master ASP.NET definisce un aspetto e un comportamento coerenti per tutte le pagine dell'applicazione. Il layout della pagina master si unisce al contenuto di una singola pagina di contenuto per produrre la pagina finale visualizzata dall'utente. Nell'applicazione Wingtip Toys, viene modificata la pagina master Site.master in modo che tutte le pagine del sito web Wingtip Toys condividano lo stesso logo distintivo e la stessa barra di navigazione.

HTML5

Il modello di applicazione Web Form ASP.NET supporta HTML5, che è la versione più recente del linguaggio di markup HTML. HTML5 supporta nuovi elementi e funzionalità che semplificano la creazione di siti Web.

Modernizr

Per i browser che non supportano HTML5, è possibile usare Modernizr. Modernizr è una libreria JavaScript open source in grado di rilevare se un browser supporta le funzionalità HTML5 e abilitarle in caso contrario. Nel modello di applicazione Web Form ASP.NET Modernizr viene installato come pacchetto NuGet.

Bootstrap

I modelli di progetto di Visual Studio 2013 usano Bootstrap, un layout e un framework di tema creati da Twitter. Bootstrap usa CSS3 per fornire una progettazione reattiva, il che significa che i layout possono adattarsi dinamicamente a diverse dimensioni della finestra del browser. È anche possibile usare la funzionalità di tema di Bootstrap per modificare facilmente l'aspetto dell'applicazione. Per impostazione predefinita, il modello applicazione Web ASP.NET in Visual Studio 2013 include Bootstrap come pacchetto NuGet.

Pacchetti NuGet

Il modello di applicazione Web Form ASP.NET include un set di pacchetti NuGet . Questi pacchetti forniscono funzionalità componentizzate sotto forma di librerie e strumenti open source. È disponibile un'ampia gamma di pacchetti che consentono di creare e testare le applicazioni. Visual Studio semplifica l'aggiunta, la rimozione e l'aggiornamento di pacchetti NuGet. Gli sviluppatori possono anche creare e aggiungere pacchetti a NuGet.

Screenshot della finestra Gestisci pacchetti NuGet con jQuery evidenziato.

Quando si installa un pacchetto, NuGet copia i file nella soluzione e apporta automaticamente le modifiche necessarie, ad esempio aggiungendo riferimenti e modificando la configurazione associata all'applicazione Web. Se si decide di rimuovere la libreria, NuGet rimuove i file e inverte le modifiche apportate nel progetto in modo che non venga lasciato alcun disordine. NuGet è disponibile dal menu Strumenti in Visual Studio.

jQuery

jQuery è una libreria JavaScript veloce e concisa che semplifica l'attraversamento dei documenti HTML, la gestione degli eventi, l'animazione e le interazioni Ajax per lo sviluppo Web rapido. La libreria JavaScript di jQuery è inclusa nel modello di applicazione Web Form ASP.NET come pacchetto NuGet.

Convalida non invasiva

I controlli di convalida predefiniti sono stati configurati per l'uso di JavaScript non invasivi per la logica di convalida lato client. In questo modo si riduce significativamente la quantità di javaScript di cui è stato eseguito il rendering inline nel markup della pagina e si riduce la dimensione complessiva della pagina. La convalida non invasiva viene aggiunta a livello globale al modello di applicazione Web Form ASP.NET in base all'impostazione nell'elemento <appSettings> del file Web.config alla radice dell'applicazione.

Entity Framework Code First

Oltre alle funzionalità del modello di applicazione Web Form ASP.NET, l'applicazione Wingtip Toys usa Entity Framework Code First, ovvero una libreria NuGet che consente lo sviluppo incentrato sul codice quando si usano i dati. In parole povere, crea automaticamente la parte di database della tua applicazione per te in base al codice che scrivi. Usando Entity Framework, è possibile recuperare e modificare i dati come oggetti fortemente tipizzati. In questo modo è possibile concentrarsi sulla logica di business nell'applicazione anziché sui dettagli sull'accesso ai dati.

Per altre informazioni sulle librerie e i pacchetti installati inclusi nel modello Web Form ASP.NET, vedere l'elenco dei pacchetti NuGet installati. A tale scopo, in Visual Studio creare un nuovo progetto Web Forms, selezionare Strumenti>Gestione pacchetti>Gestisci pacchetti NuGet per la soluzione e selezionare Pacchetti installati nella finestra di dialogo Gestisci pacchetti NuGet.

Tour di Visual Studio

Le finestre principali di Visual Studio includono Esplora soluzioni, Esplora server (Esplora database in Express), la finestra Proprietà, la casella degli strumenti, la barra degli strumenti e la finestra documento.

Diagramma che mostra le finestre principali in Visual Studio.

Per altre informazioni su Visual Studio, vedere Visual Guide to Visual Web Developer.For more information about Visual Studio, see Visual Guide to Visual Web Developer.

Sommario

In questa esercitazione è stata creata, esaminata ed eseguita l'applicazione Web Form predefinita. Sono state esaminate le diverse funzionalità dell'applicazione Web Form predefinita e sono state apprese alcune nozioni di base su come usare l'ambiente di Visual Studio. Nelle esercitazioni seguenti si creerà il livello di accesso ai dati.

Risorse aggiuntive

Progetti di applicazioni Web e progetti di siti Web
Panoramica delle pagine web form di ASP.NET