Introduzione a ASP.NET

di Tom FitzMacken

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

Nota

WebMatrix non è più consigliato come ambiente di sviluppo integrato per Pagine Web ASP.NET. Usare Visual Studio o Visual Studio Code.

Questa guida e applicazione offre una panoramica di Pagine Web ASP.NET (versione 2 o successiva) e della sintassi Razor, un framework leggero per la creazione di siti Web dinamici. Introduce anche WebMatrix, uno strumento per la creazione di pagine e siti.

Livello: nuovo da Pagine Web ASP.NET.
Competenze presupposte: HTML, fogli di stile CSS (Cascading basic).

Cosa si apprenderà nella prima esercitazione del set:

• Che cosa Pagine Web ASP.NET tecnologia è e cosa serve.
• Che cos'è WebMatrix.
• Come installare tutti gli elementi.
• Come creare un sito Web usando WebMatrix.

Funzionalità/tecnologie descritte:

• Installazione guidata piattaforma Web Microsoft.
• WebMatrix.
• Pagine con estensione cshtml

Mike Pope ha scritto originariamente questa esercitazione. Tom FitzMacken lo ha aggiornato per Microsoft WebMatrix 3.

Versioni software usate nell'esercitazione

• Pagine Web ASP.NET (Razor) 2
• WebMatrix 3

Cosa dovresti sapere?

Si presuppone che l'utente abbia familiarità con:

• HTML. Non sono necessarie competenze approfondite. Non spiegheremo il codice HTML, ma non usiamo anche nulla di complesso. Verranno forniti collegamenti alle esercitazioni HTML in cui si ritiene che siano utili.
• Fogli di stile CSS (Cascading Style Sheets). Uguale a con HTML.
• Idee di base sul database. Se è stato usato un foglio di calcolo per i dati e sono stati ordinati e filtrati i dati, si tratta in genere del livello di esperienza che si presuppone per questo set di esercitazioni.

Si presuppone anche che si sia interessati all'apprendimento della programmazione di base. Pagine Web ASP.NET usare un linguaggio di programmazione denominato C#. Non è necessario avere alcun background nella programmazione, solo un interesse per esso. Se hai mai scritto javaScript in una pagina Web in precedenza, hai un sacco di background.

Si noti che se si ha familiarità con la programmazione, è possibile che questo set di esercitazioni si sposta inizialmente lentamente mentre i nuovi programmatori sono aggiornati. Mentre passiamo oltre le prime esercitazioni, tuttavia, ci sarà meno programmazione di base per spiegare e le cose si muoveranno in un clip più veloce.

Cosa serve?

Sono necessari gli elementi seguenti:

• Computer che esegue Windows 8, Windows 7, Windows Server 2008 o Windows Server 2012.
• Una connessione Internet dinamica.
• Privilegi di amministratore (necessari per il processo di installazione).

Che cos'è Pagine Web ASP.NET?

Pagine Web ASP.NET è un framework che è possibile usare per creare pagine Web dinamiche. Una semplice pagina Web HTML è statica; il relativo contenuto è determinato dal markup HTML fisso presente nella pagina. Le pagine dinamiche come quelle create con Pagine Web ASP.NET consentono di creare il contenuto della pagina in tempo reale, usando il codice.

Le pagine dinamiche consentono di eseguire tutte le operazioni. È possibile chiedere input a un utente usando un modulo e quindi modificare l'aspetto o la visualizzazione della pagina. È possibile acquisire informazioni da un utente, salvarle in un database e quindi elencarlo in un secondo momento. È possibile inviare un messaggio di posta elettronica dal sito. È possibile interagire con altri servizi sul Web (ad esempio, un servizio di mapping) e produrre pagine che integrano informazioni da tali origini.

Che cos'è WebMatrix?

WebMatrix è uno strumento che integra un editor di pagine Web, un'utilità di database, un server Web per il test delle pagine e funzionalità per la pubblicazione del sito Web in Internet. WebMatrix è gratuito ed è facile da installare e facile da usare. (Funziona anche solo per le pagine HTML semplici, così come per altre tecnologie come PHP).

In realtà non è necessario usare WebMatrix per lavorare con Pagine Web ASP.NET. È possibile creare pagine usando un editor di testo, ad esempio e pagine di test usando un server Web a cui si ha accesso. Tuttavia, WebMatrix rende tutto molto semplice, quindi queste esercitazioni useranno WebMatrix in tutto.

Informazioni su queste esercitazioni

Questo set di esercitazioni è un'introduzione all'uso di Pagine Web ASP.NET. In questo set di esercitazioni introduttive sono disponibili 9 esercitazioni totali. Fa parte di una serie di set di esercitazioni che ti porta da Pagine Web ASP.NET principiante alla creazione di siti Web reali e professionali.

Questo primo set di esercitazioni è incentrato sulle nozioni di base su come usare Pagine Web ASP.NET. Al termine, è possibile lavorare con set di esercitazioni aggiuntivi che rilevano dove finisce questa e che esplorano le pagine Web in modo più approfondito.

Dobbiamo procedere con facilità con le spiegazioni approfondite. E ogni volta che mostriamo qualcosa, per questo set di esercitazioni scegliamo sempre il modo in cui pensiamo sia più semplice da comprendere. I set di esercitazioni successivi entrano in dettaglio e mostrano approcci più efficienti o più flessibili (anche più divertenti). Tuttavia, queste esercitazioni richiedono prima di tutto di comprendere le nozioni di base.

Il set di esercitazioni appena avviato illustra queste funzionalità di Pagine Web ASP.NET:

• Introduzione e installazione di tutti gli elementi. Questa è l'esercitazione che si sta leggendo.
• Nozioni di base sulla programmazione di Pagine Web ASP.NET.
• Creazione di un database.
• Creazione ed elaborazione di un modulo di input utente.
• Aggiunta, aggiornamento ed eliminazione di dati nel database.

Cosa creerai?

Questo set di esercitazioni e quelli successivi ruotano intorno a un sito Web in cui è possibile elencare film che ti piace. Sarà possibile immettere film, modificarli ed elencarli. Ecco un paio di pagine che verranno create in questo set di esercitazioni. La prima mostra la pagina di presentazione dei film che creerai:

Ed ecco la pagina che consente di aggiungere nuove informazioni sui film al sito:

Le esercitazioni successive si basano su questo set e aggiungono altre funzionalità, ad esempio il caricamento di immagini, l'accesso delle persone, l'invio di messaggi di posta elettronica e l'integrazione con i social media.

Vedere questa app in esecuzione in Azure

Visualizzare il sito completato in esecuzione come app Web live? È possibile distribuire una versione completa dell'app nell'account Azure facendo semplicemente clic sul pulsante seguente.

È necessario un account Azure per distribuire questa soluzione in Azure. Se non si dispone già di un account, sono disponibili le opzioni seguenti:

• Aprire gratuitamente un account Azure: si ottengono crediti che è possibile usare per provare i servizi di Azure a pagamento e, anche dopo che sono stati usati, è possibile mantenere l'account e usare i servizi di Azure gratuiti.
• Attivare i vantaggi dei sottoscrittori MSDN: la sottoscrizione MSDN offre crediti ogni mese che è possibile usare per i servizi di Azure a pagamento.

Installazione di tutti gli elementi

È possibile installare tutti gli elementi usando Il programma di installazione della piattaforma Web di Microsoft. In effetti, installare il programma di installazione e quindi usarlo per installare tutto il resto.

Per usare pagine Web, è necessario avere almeno Windows XP con SP3 installato o Windows Server 2008 o versione successiva.

Nella pagina Pagine Web del sito Web ASP.NET fare clic su Installa.

Ti viene chiesto di accettare le condizioni di licenza e l'informativa sulla privacy prima di installare WebMatrix.

Fare clic su Esegui per avviare l'installazione. Se si desidera salvare il programma di installazione, fare clic su Salvare ed eseguire il programma di installazione dalla cartella in cui è stata salvata.

Viene visualizzato il programma di installazione della piattaforma Web, pronto per l'installazione di WebMatrix. Cliccare Installa.

Il processo di installazione determina cosa deve installare nel computer e avvia il processo. A seconda di ciò che deve essere installato esattamente, il processo può richiedere da qualche istante a diversi minuti. Selezionare Accetto per accettare le condizioni di licenza.

Hello, WebMatrix

Al termine, il processo di installazione può avviare automaticamente WebMatrix. In caso contrario, in Windows, dal menu Start avviare Microsoft WebMatrix.

Quando si avvia WebMatrix per la prima volta, si ha la possibilità di accedere a Microsoft Azure con l'account Microsoft. Eseguendo l'accesso, si riceveranno 10 app Web gratuite tramite Azure. Queste app Web gratuite offrono un modo pratico per testare le app. Se non si ha già un account Azure, ma si dispone di una sottoscrizione MSDN, è possibile attivare i vantaggi della sottoscrizione MSDN. In caso contrario, è possibile creare un account di valutazione gratuito in pochi minuti. Per informazioni dettagliate, vedere Versione di valutazione gratuita di Azure.

Non è necessario accedere subito per continuare con questa esercitazione. Se non si esegue l'accesso ora, sarà comunque possibile eseguire l'accesso in un secondo momento. L'ultimo argomento di questa serie di esercitazioni illustra come distribuire il sito Web in Azure. È quindi necessario accedere per completare l'argomento.

A questo punto, accedere con l'account Microsoft o selezionare Non ora nell'angolo in basso a destra.

Per iniziare, si creerà un sito Web vuoto e si aggiungerà una pagina. In un'esercitazione successiva di questo set si eseguirà con uno dei modelli di sito Web predefiniti.

Nella finestra iniziale fare clic su Nuovo.

I modelli sono file predefiniti e pagine per diversi tipi di siti Web. Per visualizzare tutti i modelli disponibili per impostazione predefinita, selezionare l'opzione Raccolta modelli.

Nella finestra Avvio rapido selezionare Sito vuoto dal gruppo di ASP.NET e assegnare al nuovo sito il nome "WebPagesMovies".

Fare clic su Avanti.

Se si è eseguito l'accesso all'account Microsoft, si avrà la possibilità di creare il sito in Azure. In base al nome del sito, viene suggerito il nome predefinito di WebPagesMovies.azurewebsites.net , ma il punto esclamativo indica che questo nome non è disponibile in Windows Azure. Per semplicità, selezionare Ignora per ignorare la creazione del sito Web in Azure al momento. Più avanti in questa serie il sito verrà pubblicato in Azure.

WebMatrix crea e apre il sito:

Nella parte superiore è presente una barra di accesso rapido e una barra multifunzione. In basso a sinistra viene visualizzato il selettore dell'area di lavoro in cui si passa da un'attività all'altra (Sito, File, Database, Report). A destra è presente il riquadro del contenuto per l'editor e per i report. E nella parte inferiore si noterà occasionalmente una barra di notifica per i messaggi.

Verranno fornite altre informazioni su WebMatrix e sulle relative funzionalità durante queste esercitazioni.

Creazione di un'app Web

Per acquisire familiarità con WebMatrix e Pagine Web ASP.NET, si creerà una semplice pagina.

Nel selettore dell'area di lavoro selezionare l'area di lavoro File . Questa area di lavoro consente di usare file e cartelle. Il riquadro sinistro mostra la struttura di file del sito. La barra multifunzione cambia per visualizzare le attività correlate ai file.

Nella barra multifunzione fare clic sulla freccia sotto Nuovo e quindi su Nuovo file.

WebMatrix visualizza un elenco di tipi di file. Selezionare CSHTML e nella casella Nome digitare "HelloWorld". Una pagina CSHTML è una pagina Pagine Web ASP.NET.

Fare clic su OK.

WebMatrix crea la pagina e la apre nell'editor.

Come si può notare, la pagina contiene principalmente markup HTML ordinari, ad eccezione di un blocco nella parte superiore simile al seguente:

@{ 

}

Questo è per l'aggiunta di codice, come si vedrà a breve.

Si noti che le diverse parti della pagina, ovvero i nomi degli elementi, gli attributi e il testo, più il blocco nella parte superiore, sono tutti in colori diversi. Questa operazione è denominata evidenziazione della sintassi e rende più semplice mantenere tutto chiaro. Si tratta di una delle funzionalità che semplificano l'uso delle pagine Web in WebMatrix.

Aggiungere contenuto per gli <head> elementi e <body> come nell'esempio seguente. Se si vuole, è sufficiente copiare il blocco seguente e sostituire l'intera pagina esistente con questo codice.

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

Nella barra di accesso rapido o nel menu File fare clic su Salva.

Test della pagina

Nell'area di lavoro File fare clic con il pulsante destro del mouse sulla pagina HelloWorld.cshtml e quindi scegliere Avvia nel browser.

WebMatrix avvia un server Web predefinito (IIS Express) che è possibile usare per testare le pagine nel computer. Senza IIS Express in WebMatrix, è necessario pubblicare la pagina in un server Web da qualche parte prima di testarla. La pagina viene visualizzata nel browser predefinito.

Si noti che quando si testa una pagina in WebMatrix, l'URL nel browser è simile http://localhost:33651/HelloWorld.cshtml. al nome localhost fa riferimento a un server locale, ovvero la pagina viene servita da un server Web presente nel proprio computer. Come indicato, WebMatrix include un programma server Web denominato IIS Express che viene eseguito quando si avvia una pagina.

Il numero dopo localhost ,ad esempio localhost:33651, fa riferimento a un numero di porta nel computer. Questo è il numero del "canale" usato da IIS Express per questo particolare sito Web. Il numero di porta viene selezionato in modo casuale dall'intervallo da 1024 a 65536 quando si crea il sito ed è diverso per ogni sito creato. Quando si testa il proprio sito, il numero di porta sarà quasi certamente diverso da 33561. Usando una porta diversa per ogni sito Web, IIS Express può mantenere dritti i siti a cui sta parlando.

Successivamente, quando si pubblica il sito in un server Web pubblico, non viene più visualizzato localhost nell'URL. A questo punto, verrà visualizzato un URL più tipico come http://myhostingsite/mywebsite/HelloWorld.cshtml o qualsiasi altra pagina. Altre informazioni sulla pubblicazione di un sito più avanti in questa serie di esercitazioni.

Aggiunta di codice lato server

Chiudere il browser e tornare alla pagina in WebMatrix.

Aggiungere una riga al blocco di codice in modo che abbia un aspetto simile al codice seguente:

@{
   var currentDateTime = DateTime.Now;
}

Si tratta di un po' di codice Razor. Probabilmente è chiaro che ottiene la data e l'ora correnti e lo inserisce in una variabile denominata currentDateTime . Altre informazioni sulla sintassi Razor sono disponibili nell'esercitazione successiva.

Nel corpo della pagina, dopo l'elemento <p>Hello World!</p> , aggiungere quanto segue:

<p>Right now it's @currentDateTime</p>

Questo codice ottiene il valore inserito nella currentDateTime variabile nella parte superiore e lo inserisce nel markup della pagina. Il @ carattere contrassegna il codice Pagine Web ASP.NET nella pagina.

Eseguire di nuovo la pagina (WebMatrix salva le modifiche prima di eseguire la pagina). Questa volta viene visualizzata la data e l'ora nella pagina.

Attendere alcuni istanti e quindi aggiornare la pagina nel browser. La visualizzazione di data e ora viene aggiornata.

Nel browser esaminare l'origine della pagina. Il markup è simile al seguente:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Si noti che il @{ } blocco nella parte superiore non è presente. Si noti anche che la visualizzazione di data e ora mostra una stringa effettiva di caratteri (1/18/2012 2:49:50 PM o qualsiasi altro), non @currentDateTime come nella pagina con estensione cshtml . Ciò che è successo qui è che quando è stata eseguita la pagina, ASP.NET elaborato tutto il codice (in questo caso molto poco) contrassegnato con @. Il codice genera l'output e l'output è stato inserito nella pagina.

Questo è ciò che Pagine Web ASP.NET si tratta di

Quando si legge che Pagine Web ASP.NET produce contenuto Web dinamico, quello che si è visto qui è l'idea. La pagina appena creata contiene lo stesso markup HTML visualizzato in precedenza. Può anche contenere codice che può eseguire tutti i tipi di attività. In questo esempio, ha eseguito l'attività semplice di ottenere la data e l'ora correnti. Come si è visto, è possibile intersperse codice con il codice HTML per produrre output nella pagina. Quando un utente richiede una pagina con estensione cshtml nel browser, ASP.NET elabora la pagina mentre è ancora nelle mani del server Web. ASP.NET inserisce l'output del codice (se presente) nella pagina come HTML. Al termine dell'elaborazione del codice, ASP.NET invia la pagina risultante al browser. Tutto il browser sempre ottiene è HTML. Ecco un diagramma:

L'idea è semplice, ma ci sono molte attività interessanti che il codice può eseguire e ci sono molti modi interessanti in cui è possibile aggiungere dinamicamente contenuto HTML alla pagina. E ASP.NET pagine con estensione cshtml , come qualsiasi pagina HTML, possono includere anche codice eseguito nel browser stesso (codice JavaScript e jQuery). Tutti questi elementi verranno esaminati in questo set di esercitazioni e in quelli successivi.

Prossimo passaggio

Nell'esercitazione successiva di questa serie si esplora Pagine Web ASP.NET programmazione un po' di più.

Risorse aggiuntive

Creare un sito Web ASP.NET da zero. Questa è un'esercitazione specifica sull'uso di WebMatrix (non Pagine Web ASP.NET). Vengono fornite informazioni più dettagliate su alcune delle funzionalità aggiuntive di WebMatrix che non verranno illustrate in questo set di esercitazioni.

Avanti