Introduzione Pagine Web ASP.NET - Nozioni di base sulla programmazione
Questa esercitazione offre una panoramica di come programmare in Pagine Web ASP.NET con la sintassi Razor.
Contenuto dell'esercitazione:
- Sintassi "Razor" di base usata per la programmazione in Pagine Web ASP.NET.
- C# di base, ovvero il linguaggio di programmazione che verrà usato.
- Alcuni concetti di programmazione fondamentali per le pagine Web.
- Come installare pacchetti (componenti che contengono codice predefinito) da usare con il sito.
- Come usare gli helper per eseguire attività di programmazione comuni.
Funzionalità/tecnologie descritte:
- NuGet e gestione pacchetti.
- Helper
Gravatar.
Questa esercitazione è principalmente un esercizio che illustra la sintassi di programmazione che verrà usata per Pagine Web ASP.NET. Verranno fornite informazioni sulla sintassi e sul codice Razor scritti nel linguaggio di programmazione C#. Si è avuto un assaggio di questa sintassi nell'esercitazione precedente; in questa esercitazione verrà illustrata di più la sintassi.
Questa esercitazione prevede la maggior parte della programmazione che verrà visualizzata in un'unica esercitazione e che è l'unica esercitazione che riguarda solo la programmazione. Nelle esercitazioni rimanenti di questo set si creeranno effettivamente pagine che eseguono operazioni interessanti.
Verranno inoltre fornite informazioni sugli helper. Un helper è un componente, un frammento di codice in pacchetto, che è possibile aggiungere a una pagina. L'helper esegue il lavoro per te che altrimenti potrebbe essere noioso o complesso da eseguire a mano.
Creazione di una pagina da riprodurre con Razor
In questa sezione si eseguirà un po' con Razor in modo da avere un'idea della sintassi di base.
Avviare WebMatrix se non è già in esecuzione. Si userà il sito Web creato nell'esercitazione precedente (Introduzione alle pagine Web). Per riaprirlo, fare clic su Siti personali e scegliere WebPageMovies:
Selezionare l'area di lavoro File .
Nella barra multifunzione fare clic su Nuovo per creare una pagina. Selezionare CSHTML e assegnare alla nuova pagina il nome TestRazor.cshtml.
Fare clic su OK.
Copiare il codice seguente nel file, sostituendo completamente ciò che è già presente.
Nota
Quando si copia codice o markup dagli esempi in una pagina, il rientro e l'allineamento potrebbero non essere uguali a quello dell'esercitazione. Il rientro e l'allineamento non influiscono sulla modalità di esecuzione del codice.
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Esame della pagina di esempio
La maggior parte di ciò che vedi è html comune. Tuttavia, nella parte superiore è presente questo blocco di codice:
@{
// Working with numbers.
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings).
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects.
var rightNow = DateTime.Now;
}
Si noti quanto segue su questo blocco di codice:
- Il carattere @ indica ASP.NET che ciò che segue è il codice Razor, non HTML. ASP.NET considera tutto dopo il carattere @ come codice fino a quando non viene nuovamente eseguito in un codice HTML. (In questo caso, questo è il <! Elemento DOCTYPE> .
- Le parentesi graffe ( { e } ) razor razor racchiudono un blocco di codice se il codice ha più di una riga. Le parentesi graffe indicano ASP.NET dove inizia e termina il codice per il blocco.
- I caratteri // contrassegnano un commento, ovvero una parte del codice che non verrà eseguito.
- Ogni istruzione deve terminare con un punto e virgola (;). (Non commenti, però.)
- È possibile archiviare i valori nelle variabili create (dichiarare) con la parola chiave var. Quando si crea una variabile, si assegna un nome, che può includere lettere, numeri e caratteri di sottolineatura (_). I nomi delle variabili non possono iniziare con un numero e non possono usare il nome di una parola chiave di programmazione (ad esempio var).
- Le stringhe di caratteri (ad esempio "ASP.NET" e "Pagine Web") sono racchiuse tra virgolette. Devono essere virgolette doppie. I numeri non sono tra virgolette.
- Gli spazi vuoti all'esterno delle virgolette non sono importanti. Le interruzioni di riga per lo più non importano; l'eccezione è che non è possibile dividere una stringa tra virgolette tra righe. Il rientro e l'allineamento non sono importanti.
Qualcosa che non è ovvio da questo esempio è che tutto il codice fa distinzione tra maiuscole e minuscole. Ciò significa che la variabile TheSum è una variabile diversa dalle variabili che potrebbero essere denominate theSum o thesum. Analogamente, var è una parola chiave, ma var non è .
Oggetti e proprietà e metodi
C'è quindi l'espressione DateTime.Now. In termini semplici, DateTime è un oggetto . Un oggetto è una cosa che è possibile programmare con, una pagina, una casella di testo, un file, un'immagine, una richiesta Web, un messaggio di posta elettronica, un record del cliente e così via. Gli oggetti hanno una o più proprietà che ne descrivono le caratteristiche. Un oggetto casella di testo ha una proprietà Text (tra le altre), un oggetto richiesta ha una proprietà URL (e altri), un messaggio di posta elettronica ha una proprietà From e una proprietà To e così via. Gli oggetti dispongono anche di metodi che sono i "verbi" che possono eseguire. Si lavorerà molto con gli oggetti.
Come si può vedere dall'esempio, DateTime è un oggetto che consente di programmare date e ore. Dispone di una proprietà denominata Now che restituisce la data e l'ora correnti.
Uso del codice per il rendering del markup nella pagina
Nel corpo della pagina notare quanto segue:
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
Anche in questo caso, il carattere @ indica ASP.NET che ciò che segue è il codice, non HTML. Nel markup è possibile aggiungere @ seguito da un'espressione di codice e ASP.NET eseguirà il rendering del valore di tale espressione a questo punto. Nell'esempio @a , eseguirà il rendering di qualsiasi valore della variabile denominata a, @product esegue il rendering di qualsiasi elemento nella variabile denominata product e così via.
Tuttavia, non ci si limita alle variabili. In alcuni casi, il carattere @ precede un'espressione:
- @(a*b) esegue il rendering del prodotto delle variabili a e b. L'operatore * indica la moltiplicazione.
- @(technology + " + product) esegue il rendering dei valori nella tecnologia delle variabili e del prodotto dopo la concatenazione e l'aggiunta di uno spazio tra di essi. L'operatore (+) per la concatenazione delle stringhe è uguale all'operatore per l'aggiunta di numeri. ASP.NET in genere può indicare se si lavora con numeri o con stringhe ed esegue la cosa giusta con l'operatore + .
- @Request.Url esegue il rendering della proprietà Url dell'oggetto Request. L'oggetto Request contiene informazioni sulla richiesta corrente dal browser e naturalmente la proprietà Url contiene l'URL della richiesta corrente.
L'esempio è progettato anche per mostrare che è possibile lavorare in modi diversi. È possibile eseguire calcoli nel blocco di codice nella parte superiore, inserire i risultati in una variabile e quindi eseguire il rendering della variabile nel markup. In alternativa, è possibile eseguire calcoli in un'espressione direttamente nel markup. L'approccio usato dipende da ciò che si sta facendo e, in qualche misura, dalla propria preferenza.
Visualizzazione del codice in azione
Fare clic con il pulsante destro del mouse sul nome del file e scegliere Avvia nel browser. La pagina viene visualizzata nel browser con tutti i valori e le espressioni risolte nella pagina.
Esaminare l'origine nel browser.
Come previsto dall'esperienza nell'esercitazione precedente, nessuno del codice Razor si trova nella pagina. Tutti i valori visualizzati sono i valori di visualizzazione effettivi. Quando si esegue una pagina, si effettua effettivamente una richiesta al server Web integrato in WebMatrix. Quando la richiesta viene ricevuta, ASP.NET risolve tutti i valori e le espressioni e ne esegue il rendering nella pagina. Invia quindi la pagina al browser.
Suggerimento
Razor e C#
Fino ad ora abbiamo detto che stai lavorando con la sintassi Razor. Questo è vero, ma non è la storia completa. Il linguaggio di programmazione effettivo in uso è denominato C#. C# è stato creato da Microsoft più di dieci anni fa ed è diventato uno dei linguaggi di programmazione principali per la creazione di app di Windows. Tutte le regole che si sono apprese su come assegnare un nome a una variabile e su come creare istruzioni e così via sono in realtà tutte le regole del linguaggio C#.
Razor fa riferimento in modo più specifico al piccolo set di convenzioni per incorporare questo codice in una pagina. Ad esempio, la convenzione di utilizzo di @ per contrassegnare il codice nella pagina e l'uso di @{ } per incorporare un blocco di codice è l'aspetto Razor di una pagina. Gli helper sono considerati anche parte di Razor. La sintassi Razor viene usata in più posizioni che in Pagine Web ASP.NET. Ad esempio, viene usato anche nelle visualizzazioni MVC ASP.NET.
Questo viene menzionato perché se si cercano informazioni sulla programmazione Pagine Web ASP.NET, si troveranno molti riferimenti a Razor. Tuttavia, molti di questi riferimenti non si applicano a ciò che si sta facendo e potrebbero quindi creare confusione. In effetti, molte delle domande di programmazione stanno per essere effettivamente relative all'uso di C# o all'uso di ASP.NET. Quindi, se si cercano in modo specifico informazioni su Razor, potrebbe non trovare le risposte necessarie.
Aggiunta di una logica condizionale
Una delle grandi funzionalità sull'uso del codice in una pagina è che è possibile modificare ciò che accade in base a varie condizioni. In questa parte dell'esercitazione si esamineranno alcuni modi per modificare gli elementi visualizzati nella pagina.
L'esempio sarà semplice e piuttosto contrito in modo da potersi concentrare sulla logica condizionale. La pagina creata eseguirà questa operazione:
- Mostra testo diverso nella pagina a seconda che sia la prima volta che viene visualizzata la pagina o se hai fatto clic su un pulsante per inviare la pagina. Sarà il primo test condizionale.
- Visualizzare il messaggio solo se viene passato un determinato valore nella stringa di query dell'URL (http://...? show=true). Sarà il secondo test condizionale.
In WebMatrix creare una pagina e denominarla TestRazorPart2.cshtml. Nella barra multifunzione fare clic su Nuovo, scegliere CSHTML, denominare il file e quindi fare clic su OK.
Sostituire il contenuto della pagina con quanto segue:
@{
var message = "This is the first time you've requested the page.";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<p>@message</p>
<p><input type="submit" value="Submit" /></p>
</div>
</form>
</body>
</html>
Il blocco di codice nella parte superiore inizializza una variabile denominata message con testo. Nel corpo della pagina il contenuto della variabile messaggio viene visualizzato all'interno di un <elemento p> . Il markup contiene anche un <elemento di input> per creare un pulsante Submit .
Eseguire la pagina per vedere come funziona ora. Per il momento, è fondamentalmente una pagina statica, anche se si fa clic sul pulsante Invia .
Tornare a WebMatrix. All'interno del blocco di codice aggiungere il codice evidenziato seguente dopo la riga che inizializza il messaggio:
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
}
Blocco if { }
Ciò che è stato appena aggiunto è una condizione if. Nel codice, la condizione if ha una struttura simile alla seguente:
if(some condition){
One or more statements here that run if the condition is true;
}
La condizione da testare è racchiusa tra parentesi. Deve essere un valore o un'espressione che restituisce true o false. Se la condizione è true, ASP.NET esegue l'istruzione o le istruzioni che si trovano all'interno delle parentesi graffe. Queste sono la parte successiva della logica if-then . Se la condizione è false, il blocco di codice viene ignorato.
Ecco alcuni esempi di condizioni che è possibile testare in un'istruzione if:
if(currentValue > 12) { ... }
if(dueDate <= DateTime.Today) { ... }
if(IsDone == true) { ... }
if(IsPost) { ... }
if(!IsPost) { ... }
if(a != 0) { ... }
if(fileProcessingIsDone != true && displayMessage == false) { ... }
È possibile testare le variabili rispetto ai valori o alle espressioni usando un operatore logico o un operatore di confronto: uguale a (==), maggiore di (), minore di (<>), maggiore o uguale a (>=) e minore o uguale a (<=). L'operatore != indica che non è uguale a , ad esempio if(a != 0) indica se un valore non è uguale a 0.
Nota
Assicurarsi di notare che l'operatore di confronto per uguale a (==) non è uguale a =. L'operatore = viene usato solo per assegnare valori (var a=2). Se si combinano questi operatori, si otterrà un errore o si otterranno risultati strani.
Per verificare se qualcosa è true, la sintassi completa è if(IsDone == true). Ma è anche possibile usare il collegamento if(IsDone). Se non è presente alcun operatore di confronto, ASP.NET presuppone che si stia testando true.
L'operatore ! operatore per sé significa un NOT logico. Ad esempio, la condizione if(! IsPost) indica se IsPost non è true.
È possibile combinare le condizioni usando un operatore AND logico (&&) o OR logico (|| ). Ad esempio, l'ultima delle condizioni se negli esempi precedenti indica se FileProcessingIsDone non è impostato su true AND displayMessage è impostato su false.
Blocco else
Una cosa finale su se blocchi: un blocco if può essere seguito da un blocco else. Un altro blocco è utile è necessario eseguire codice diverso quando la condizione è false. Ecco un semplice esempio:
var message = "";
if(errorOccurred == true)
{
message = "Sorry, an error occurred.";
}
else
{
message = "The process finished without errors!";
}
Verranno visualizzati alcuni esempi nelle esercitazioni successive di questa serie in cui l'uso di un blocco else è utile.
Verifica se la richiesta è un invio (post)
C'è di più, ma torniamo all'esempio, che ha la condizione if(IsPost){ ... }. IsPost è in realtà una proprietà della pagina corrente. La prima volta che viene richiesta la pagina, IsPost restituisce false. Tuttavia, se si fa clic su un pulsante o si invia la pagina, ovvero si pubblica , IsPost restituisce true. IsPost ti permette quindi di determinare se hai a che fare con un invio di modulo. In termini di verbi HTTP, se la richiesta è un'operazione GET, IsPost restituisce false. Se la richiesta è un'operazione POST, IsPost restituisce true. In un'esercitazione successiva si useranno moduli di input, in cui questo test diventa particolarmente utile.
Eseguire la pagina. Poiché questa è la prima volta che viene richiesta la pagina, viene visualizzato "Questa è la prima volta che è stata richiesta la pagina". Tale stringa è il valore in cui è stata inizializzata la variabile del messaggio. Esiste un test if(IsPost), ma che restituisce false al momento, quindi il codice all'interno del blocco if non viene eseguito.
Fare clic sul pulsante Invia . La pagina viene richiesta di nuovo. Come in precedenza, la variabile del messaggio è impostata su "Questa è la prima volta ...". Ma questa volta, il test if(IsPost) restituisce true, quindi il codice all'interno del blocco se viene eseguito. Il codice modifica il valore della variabile messaggio in un valore diverso, ovvero il rendering nel markup.
Aggiungere ora una condizione if nel markup. Sotto l'elemento <p> che contiene il pulsante Submit aggiungere il markup seguente:
@if(IsPost){
<p>You submitted the page at @DateTime.Now</p>
}
Si aggiunge codice all'interno del markup, quindi è necessario iniziare con @. È quindi presente un test se simile a quello aggiunto in precedenza nel blocco di codice. All'interno delle parentesi graffe, tuttavia, si aggiunge codice HTML normale, almeno, è normale fino a quando non arriva a @DateTime.Now. Si tratta di un altro po' di codice Razor, quindi è necessario aggiungere @ di fronte a esso.
Il punto qui è che è possibile aggiungere condizioni in entrambi i blocchi di codice nella parte superiore e nel markup. Se si utilizza una condizione if nel corpo della pagina, le righe all'interno del blocco possono essere markup o codice. In tal caso, e come è vero ogni volta che si combinano markup e codice, è necessario usare @ per rendere chiaro ASP.NET dove si trova il codice.
Eseguire la pagina e fare clic su Invia. Questa volta non viene visualizzato solo un messaggio diverso quando si invia ("Ora che è stato inviato ..."), ma viene visualizzato un nuovo messaggio che elenca la data e l'ora.
Test del valore di una stringa di query
Un altro test. Questa volta si aggiungerà un blocco if che verifica un valore denominato show che potrebbe essere passato nella stringa di query. (Come segue: http://localhost:43097/TestRazorPart2.cshtml?show=true) La pagina verrà modificata in modo che il messaggio visualizzato ("Questa è la prima volta ..." e così via) venga visualizzato solo se il valore di show è true.
Nella parte inferiore (ma all'interno) il blocco di codice nella parte superiore della pagina aggiungere quanto segue:
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
Il blocco di codice completo è ora simile all'esempio seguente. Tenere presente che quando si copia il codice nella pagina, il rientro potrebbe essere diverso. Ma ciò non influisce sul modo in cui viene eseguito il codice.
@{
var message = "This is the first time you've requested the page.";
if(IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if(Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
Il nuovo codice nel blocco inizializza una variabile denominata showMessage su false. Esegue quindi un test se cercare un valore nella stringa di query. Quando si richiede per la prima volta la pagina, ha un URL simile al seguente:
http://localhost:43097/TestRazorPart2.cshtml
Il codice determina se l'URL contiene una variabile denominata show nella stringa di query, come questa versione dell'URL:
http://localhost:43097/TestRazorPart2.cshtml?show=true
Il test stesso esamina la proprietà QueryString dell'oggetto Request. Se la stringa di query contiene un elemento denominato show e se tale elemento è impostato su true, il blocco if viene eseguito e imposta la variabile showMessage su true.
C'è un trucco qui, come si può vedere. Come dice il nome, la stringa di query è una stringa. Tuttavia, è possibile eseguire il test solo per true e false se il valore che si sta testando è un valore booleano (true/false). Prima di poter testare il valore della variabile show nella stringa di query, è necessario convertirlo in un valore booleano. Questo è il metodo AsBool, che accetta una stringa come input e la converte in un valore booleano. Chiaramente, se la stringa è "true", il metodo AsBool converte tale valore in true. Se il valore della stringa è qualsiasi altro elemento, AsBool restituisce false.
Suggerimento
Tipi di dati e metodi As()
Finora è stato detto solo che quando si crea una variabile si usa la parola chiave var. Non è l'intera storia, però. Per modificare i valori, ovvero aggiungere numeri o concatenare stringhe o confrontare date o testare true/false, C# deve usare una rappresentazione interna appropriata del valore. C# in genere può determinare quale rappresentazione deve essere (ovvero il tipo di dati) in base a ciò che si sta eseguendo con i valori. Ora e poi, però, non può farlo. In caso contrario, è necessario ottenere assistenza indicando in modo esplicito come C# deve rappresentare i dati. Il metodo AsBool indica a C# che un valore stringa "true" o "false" deve essere considerato come un valore booleano. Esistono metodi simili per rappresentare anche stringhe come altri tipi, ad esempio AsInt (trattare come un numero intero), AsDateTime (trattare come data/ora), AsFloat (considerare come un numero a virgola mobile) e così via. Quando si usano questi metodi As( ) , se C# non può rappresentare il valore stringa come richiesto, verrà visualizzato un errore.
Nel markup della pagina rimuovere o impostare come commento questo elemento (qui viene visualizzato come commento):
<!-- <p>@message</p> -->
Nella posizione in cui è stato rimosso o impostato come commento il testo, aggiungere quanto segue:
@if(showMessage) {
<p>@message</p>
}
Se il test indica che se la variabile showMessage è true, eseguire il rendering di un <elemento p> con il valore della variabile messaggio.
Riepilogo della logica condizionale
Se non sei completamente sicuro di ciò che hai appena fatto, ecco un riepilogo.
- La variabile messaggio viene inizializzata in una stringa predefinita ("Questa è la prima volta ...").
- Se la richiesta di pagina è il risultato di un invio (post), il valore del messaggio viene modificato in "Ora che hai inviato ..."
- La variabile showMessage viene inizializzata su false.
- Se la stringa di query contiene ?show=true, la variabile showMessage è impostata su true.
- Nel markup, se showMessage è true, viene eseguito il rendering di un <elemento p> che mostra il valore del messaggio. Se showMessage è false, non viene eseguito alcun rendering in quel punto del markup.
- Nel markup, se la richiesta è un post, viene eseguito il rendering di un <elemento p> che visualizza la data e l'ora.
Eseguire la pagina. Non è presente alcun messaggio, perché showMessage è false, quindi nel markup il test if(showMessage) restituisce false.
Cliccare Invia. Viene visualizzata la data e l'ora, ma non viene ancora visualizzato alcun messaggio.
Nel browser passare alla casella URL e aggiungere quanto segue alla fine dell'URL: ?show=true e quindi premere INVIO.
La pagina viene nuovamente visualizzata. Poiché l'URL è stato modificato, si tratta di una nuova richiesta, non di un invio. Fare di nuovo clic su Invia . Il messaggio viene visualizzato di nuovo, così come è la data e l'ora.
Nell'URL modificare ?show=true in ?show=false e premere INVIO. Inviare di nuovo la pagina. La pagina torna al modo in cui è stato avviato, nessun messaggio.
Come indicato in precedenza, la logica di questo esempio è leggermente contriva. Tuttavia, se verrà visualizzato in molte delle tue pagine, e ci vorrà una o più delle forme che hai visto qui.
Installazione di un helper (visualizzazione di un'immagine gravatar)
Alcune attività che spesso gli utenti vogliono eseguire nelle pagine Web richiedono un sacco di codice o richiedono conoscenze aggiuntive. Esempi: visualizzazione di un grafico per i dati; mettendo un pulsante "Like" di Facebook su una pagina; invio di messaggi di posta elettronica dal sito Web; ritagliare o ridimensionare le immagini; utilizzando PayPal per il sito. Per semplificare l'esecuzione di questi tipi di operazioni, Pagine Web ASP.NET consente di usare gli helper. Gli helper sono componenti installati per un sito e che consentono di eseguire attività tipiche usando solo poche righe di codice Razor.
Pagine Web ASP.NET include alcuni helper predefiniti. Tuttavia, molti helper sono disponibili nei pacchetti (componenti aggiuntivi) forniti tramite gestione pacchetti NuGet. NuGet consente di selezionare un pacchetto da installare e quindi si occupa di tutti i dettagli dell'installazione.
In questa parte dell'esercitazione si installerà un helper che consente di visualizzare un'immagine gravatar ("avatar riconosciuto a livello globale"). Si apprenderà due cose. Uno è come trovare e installare un helper. Si apprenderà anche come un helper semplifica l'esecuzione di un'operazione che altrimenti sarebbe necessario eseguire usando un sacco di codice che sarebbe necessario scrivere manualmente.
È possibile registrare il proprio Gravatar sul sito Web di Gravatar in http://www.gravatar.com/, ma non è essenziale creare un account Gravatar per eseguire questa parte dell'esercitazione.
In WebMatrix fare clic sul pulsante NuGet .
Verrà avviato lo strumento di gestione pacchetti NuGet e verranno visualizzati i pacchetti disponibili. Non tutti i pacchetti sono helper. Alcune funzionalità vengono aggiunte a WebMatrix, alcuni sono modelli aggiuntivi e così via. È possibile che venga visualizzato un messaggio di errore relativo all'incompatibilità della versione. È possibile ignorare questo messaggio di errore facendo clic su OK e procedendo con questa esercitazione.
Nella casella di ricerca immettere "asp.net helper". NuGet mostra i pacchetti che corrispondono ai termini di ricerca.
La libreria helper Web ASP.NET contiene codice per semplificare molte attività comuni, tra cui l'uso di immagini Gravatar. Selezionare il pacchetto libreria helper Web ASP.NET e quindi fare clic su Installa per avviare il programma di installazione. Selezionare Sì quando viene chiesto se si vuole installare il pacchetto e accettare le condizioni per completare l'installazione.
È tutto. NuGet scarica e installa tutti gli elementi, inclusi tutti i componenti aggiuntivi che potrebbero essere necessari (dipendenze).
Se per qualche motivo è necessario disinstallare un helper, il processo è molto simile. Fare clic sul pulsante NuGet , fare clic sulla scheda Installato e selezionare il pacchetto da disinstallare.
Uso di un helper in una pagina
A questo punto si userà l'helper appena installato. Il processo di aggiunta di un helper a una pagina è simile per la maggior parte degli helper.
In WebMatrix creare una pagina e denominarla GravatarTest.cshml. Si sta creando una pagina speciale per testare l'helper, ma è possibile usare helper in qualsiasi pagina del sito.
All'interno dell'elemento <body> aggiungere un <elemento div> . All'interno dell'elemento <div> digitare quanto segue:
@Gravatar.
Il carattere @ è lo stesso carattere usato per contrassegnare il codice Razor. Gravatar è l'oggetto helper con cui stai lavorando.
Non appena si digita il punto (.), WebMatrix visualizza un elenco di metodi (funzioni) resi disponibili dall'helper Gravatar:
Questa funzionalità è nota come IntelliSense. Consente di scrivere codice fornendo scelte appropriate per il contesto. IntelliSense funziona con HTML, CSS, codice ASP.NET, JavaScript e altri linguaggi supportati in WebMatrix. È un'altra funzionalità che semplifica lo sviluppo di pagine Web in WebMatrix.
Premere G sulla tastiera e si noterà che IntelliSense trova il metodo GetHtml. Premere TAB. IntelliSense inserisce automaticamente il metodo selezionato (GetHtml). Digitare una parentesi aperta e notare che la parentesi di chiusura viene aggiunta automaticamente. Digitare l'indirizzo di posta elettronica tra virgolette tra le due parentesi. Se si dispone di un account Gravatar, verrà restituita l'immagine del profilo. Se non si dispone di un account Gravatar, viene restituita un'immagine predefinita. Al termine, la riga sarà simile alla seguente:
@Gravatar.GetHtml("john@contoso.com")
Visualizzare ora la pagina in un browser. Viene visualizzata l'immagine o l'immagine predefinita, a seconda che tu abbia un account Gravatar.
Per avere un'idea di cosa sta facendo l'helper, visualizzare l'origine della pagina nel browser. Insieme al codice HTML presente nella pagina, viene visualizzato un elemento immagine che include un identificatore. Si tratta del codice di cui è stato eseguito il rendering dell'helper nella pagina nella posizione in cui si disponeva @Gravatar.GetHtmldi . L'helper ha preso le informazioni fornite e generato il codice che comunica direttamente con Gravatar per ottenere l'immagine corretta per l'account fornito.
Il metodo GetHtml consente anche di personalizzare l'immagine fornendo altri parametri. Il codice seguente illustra come richiedere un'immagine ha una larghezza e un'altezza di 40 pixel e usa un'immagine predefinita specificata denominata wavatar se l'account specificato non esiste.
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
Questo codice produce un risultato simile al seguente (l'immagine predefinita varia in modo casuale).
Prossimo passaggio
Per mantenere breve questa esercitazione, è stato necessario concentrarsi solo su alcune nozioni di base. Naturalmente, c'è molto di più per Razor e C#. Per altre informazioni, vedere queste esercitazioni. Per altre informazioni sugli aspetti di programmazione di Razor e C# al momento, è possibile leggere un'introduzione più approfondita qui: Introduzione alla programmazione Web ASP.NET usando la sintassi Razor.
L'esercitazione successiva presenta l'uso di un database. In questa esercitazione si inizierà a creare l'applicazione di esempio che consente di elencare i film preferiti.
Elenco completo per la pagina TestRazor
@{
// Working with numbers
var a = 4;
var b = 5;
var theSum = a + b;
// Working with characters (strings)
var technology = "ASP.NET";
var product ="Web Pages";
// Working with objects
var rightNow = DateTime.Now;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
span.bright {color:red;}
</style>
</head>
<body>
<h1>Testing Razor Syntax</h1>
<form method="post">
<div>
<p>The value of <em>a</em> is @a. The value of <em>b</em> is @b.
<p>The sum of <em>a</em> and <em>b</em> is <strong>@theSum</strong>.</p>
<p>The product of <em>a</em> and <em>b</em> is <strong>@(a*b)</strong>.</p>
</div>
<div>
<p>The technology is @technology, and the product is @product.</p>
<p>Together they are <span class="bright">@(technology + " " + product)</span></p>
</div>
<div>
<p>The current date and time is: @rightNow</p>
<p>The URL of the current page is<br/><br/><code>@Request.Url</code></p>
</div>
</form>
</body>
</html>
Elenco completo per la pagina TestRazorPart2
@{
var message = "This is the first time you've requested the page.";
if (IsPost) {
message = "Now you've submitted the page.";
}
var showMessage = false;
if (Request.QueryString["show"].AsBool() == true) {
showMessage = true;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing Razor Syntax - Part 2</title>
<meta charset="utf-8" />
<style>
body {font-family:Verdana; margin-left:50px; margin-top:50px;}
div {border: 1px solid black; width:50%; margin:1.2em;padding:1em;}
</style>
</head>
<body>
<h1>Testing Razor Syntax - Part 2</h1>
<form method="post">
<div>
<!--<p>@message</p>-->
@if(showMessage){
<p>@message</p>
}
<p><input type="submit" value="Submit" /></p>
@if (IsPost) {
<p>You submitted the page at @DateTime.Now</p>
}
</div>
</form>
</body>
</html>
Elenco completo per la pagina GravatarTest
@{
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
@Gravatar.GetHtml("john@contoso.com")
@Gravatar.GetHtml("john@contoso.com", 40, "wavatar")
</div>
</body>
</html>