Novità di ASP.NET e dello sviluppo Web in Visual Studio 2012

Articolo
11/21/2024

La nuova versione di Visual Studio introduce numerosi miglioramenti incentrati sul miglioramento dell'esperienza e delle prestazioni quando si usano tecnologie Web. Gli editor di Visual Studio per CSS, JavaScript e HTML sono stati completamente rinnovati per includere molti degli strumenti di codice più richiesti, ad esempio IntelliSense e il rientro automatico. Per quanto riguarda le prestazioni, la creazione di bundle e la minimizzazione sono ora integrate come funzionalità predefinite per ridurre facilmente il tempo di caricamento delle pagine.

Visual Studio consente di usare le tecnologie più recenti per i siti Web. È possibile usare frammenti CSS3 tra browser per assicurarsi che il sito funzioni indipendentemente dalla piattaforma client, sfruttando al tempo stesso i nuovi elementi e funzionalità HTML5.

La scrittura e la profilatura del codice JavaScript devono essere più semplici con questa versione di Visual Studio. Gli elenchi intelliSense, la documentazione XML integrata e le funzionalità di spostamento sono ora disponibili per il codice JavaScript. È ora disponibile il catalogo JavaScript a portata di mano. Inoltre, è possibile controllare la conformità ECMAScript5 agli script e rilevare gli errori di sintassi in una fase iniziale.

Infine, questa versione di Visual Studio implementa la creazione di bundle e la minimizzazione predefinite. I file di script e i fogli di stile verranno compressi e compressi in modo che il sito esegua più velocemente.

Questo lab illustra i miglioramenti e le nuove funzionalità descritte in precedenza applicando modifiche secondarie a un'applicazione Web di esempio fornita nella cartella Origine.

Obiettivi

In questo lab pratico si apprenderà come:

Usare le nuove funzionalità e i miglioramenti nell'editor CSS
Usare le nuove funzionalità e i miglioramenti nell'editor HTML
Usare le nuove funzionalità e i miglioramenti nell'editor JavaScript
Configurare e usare la creazione di bundle e la minimizzazione

Prerequisiti

Microsoft Visual Studio Express 2012 per Web o superiore (vedere Appendice A per istruzioni su come installarlo).
Windows PowerShell (per gli script di installazione: già installati in Windows 8 e Windows Server 2008 R2)
Internet Explorer 10 - o un browser conforme a HTML5

Esercizi

Questo lab pratico include gli esercizi seguenti:

Esercizio 1: Novità nell'editor CSS
Esercizio 2: Novità nell'editor HTML
Esercizio 3: Novità dell'editor JavaScript
Esercizio 4: Creazione di bundle e minimizzazione

Tempo stimato per il completamento del lab: 60 minuti.

Esercizio 1: Novità nell'editor CSS

Gli sviluppatori Web devono avere familiarità con molte delle difficoltà correlate alla modifica CSS. Uno dei problemi principali dello stile CSS è la compatibilità tra browser. Spesso accade che, dopo aver applicato gli stili al sito, si nota che sembra diverso se lo si apre in un altro browser o dispositivo. Pertanto, è possibile dedicare un notevole tempo alla correzione di tali problemi visivi per rendersi conto che, quando finalmente si fa funzionare in un browser, viene interrotto negli altri.

Visual Studio include ora funzionalità che consentono agli sviluppatori di accedere, lavorare e organizzare i fogli di stile CSS in modo efficace. In questo esercizio verranno illustrate le nuove funzionalità per un'organizzazione e un'edizione efficaci, nonché i frammenti di codice CSS3 per la compatibilità tra browser.

Attività 1 - Nuove funzionalità dell'editor

In questa attività verranno illustrate le nuove funzionalità dell'editor CSS. Questo nuovo editor consente di aumentare la produttività sfruttando il nuovo rientro intelligente, i commenti di codice migliorati e l'elenco avanzato di IntelliSense.

Avviare Visual Studio e aprire la soluzione WhatsNewASPNET.sln che si trova nella cartella Source\WhatsNewASPNET di questo lab.
In Esplora soluzioni aprire il file Site.css che si trova nella cartella Stili. Verificare che gli strumenti editor di testo siano visibili sulla barra degli strumenti. A tale scopo, selezionare l'opzione di menu Visualizza | barre degli strumenti e selezionare le opzioni Editor di testo. Si noterà che, poiché questa nuova versione, il pulsante Commento ( ) e il pulsante Rimuovi commento ( ) sono abilitati anche per l'editor CSS.

Abilitazione dell'editor e degli strumenti CSS
Scorrere il codice e selezionare qualsiasi definizione di classe CSS. Fare clic sul pulsante Commento ( ) per impostare come commento le righe selezionate. Fare quindi clic sul pulsante Rimuovi commento ( ) per annullare le modifiche.
Fare clic sui pulsanti Comprimi ( ) ed Espandi ( ) che si trovano sul margine sinistro del testo. Si noti che è ora possibile nascondere gli stili che non si usano per avere una visualizzazione più pulita.

Compressione delle classi CSS
Assicurarsi che la funzionalità di rientro intelligente sia abilitata. Selezionare l'opzione di menu Opzioni strumenti | e quindi selezionare la pagina Formattazione CSS | editor | di testo nel riquadro sinistro della schermata. Selezionare l'opzione Rientro gerarchico.

Abilitazione del rientro gerarchico
Individuare la definizione della classe principale (.main) e aggiungere uno stile agli elementi div. Si noterà che il codice viene allineato automaticamente, consentendo agli utenti di trovare immediatamente le classi padre.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
Allineamento gerarchico in CSS
All'interno della classe div principale individuare il cursore alla fine del bordo: 0px e premere INVIO per visualizzare l'elenco IntelliSense. Iniziare a digitare in alto e notare come l'elenco viene filtrato durante la digitazione. Nell'elenco verranno visualizzati gli elementi che contengono la parte superiore in qualsiasi parte della parola (nelle versioni precedenti di Visual Studio l'elenco viene filtrato in base agli elementi che iniziano con il termine).

Miglioramenti di IntelliSense in CSS

Attività 2- Selezione colori

In questa attività si scoprirà il nuovo controllo selezione colori CSS integrato in Visual Studio IntelliSense.

In Site.css individuare la definizione della classe di intestazione (intestazione) e posizionare il cursore accanto all'attributo di colore di sfondo, tra i caratteri ":" e "#" nella riga di codice .

Individuazione del cursore
Eliminare i due punti (:) e scriverlo di nuovo per visualizzare la selezione colori. Si noti che i primi colori che vedrai sono i colori più frequenti del tuo sito. Se si fa clic sul colore bianco, il relativo codice colore HTML (#fff) sostituirà il codice colore corrente nel foglio di stile.

Selezione colori
Premere il pulsante Espandi ( ) sulla selezione colori per visualizzare la sfumatura di colore e quindi trascinare il cursore sfumato per selezionare un colore diverso. Successivamente, fare clic sul pulsante Eyedropper e selezionare qualsiasi colore dalla schermata. Si noti che il valore del colore di sfondo cambia in modo dinamico mentre si sposta il cursore.

Sfumatura selezione colori
Nel dispositivo di scorrimento Opacity spostare il selettore al centro della barra per ridurre l'opacità. Si noti che il valore del colore di sfondo cambia ora la scala in RGBA.

Opacità selezione colori

Nota

La definizione di colore RGBA (Rosso, Verde, Blu, Alfa) in CSS3 consente di definire il valore di opacità del colore per un singolo elemento. A differenza dell'opacità : anche i colori RGBA di un attributo - CSS simili sono compatibili con i browser più recenti.

Attività 3 - Frammenti di codice compatibili con CSS

In questa attività si apprenderà come usare frammenti CSS3 compatibili con più browser per implementare alcune funzionalità nel sito Web.

Nel file Site.css individuare la definizione della classe CSS dell'intestazione (intestazione) e posizionare il cursore sotto il segnaposto /*border radius*/ per aggiungere un nuovo frammento di codice. Premere INVIO per visualizzare l'elenco di IntelliSense e digitare radius per filtrare l'elenco. Selezionare l'opzione border-radius nell'elenco con un doppio clic e quindi premere TAB per inserire il frammento. Digitare quindi una dimensione del raggio in pixel e premere INVIO. Ad esempio, digitare 15px.

Gli attributi CSS3 aggiunti dal frammento eseguiranno il rendering dei bordi arrotondati nella maggior parte dei browser di conformità HTML5, inclusi i browser basati su Mozilla e WebKit.

Uso di un frammento di raggio del bordo

Applicare gli stessi frammenti di bordo nello stile di pagina (.page).

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Premere F5 per eseguire la soluzione. Si noti che ogni pagina ha ora bordi arrotondati.

Angoli arrotondati
Chiudere il browser e tornare a Visual Studio.
Aprire il file Custom.css che si trova nella cartella Stili e posizionare il cursore all'interno della definizione della classe div.images ul li img .
Premere INVIO per visualizzare l'elenco IntelliSense, digitare box-shadow e premere il tasto TAB due volte per inserire il frammento di codice shadow predefinito all'interno della definizione della classe. Impostare i valori di ombreggiatura su 10px 10px 5px #888. Digitare quindi il raggio del bordo e inserire il frammento di codice. Digitare 15px per impostare le dimensioni del raggio e premere INVIO.

Angoli arrotondati con ombreggiatura

Nota

In questo momento, l'attributo shadow viene inserito con il prefisso corrispondente (moz, webkit, o) per supportare i browser Mozilla e Webkit (Chrome, Safari, Konkeror).
Creare una nuova classe div.images ul li img:hover sotto la definizione della classe div.images ul li img e posizionare il cursore all'interno delle parentesi quadre .

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```

Digitare transform e premere il tasto TAB due volte per inserire il frammento di trasformazione. Immettere quindi rotate(-15deg) per modificare il valore dell'angolo di rotazione quando le immagini vengono spostate al passaggio del mouse.

CSS

div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Premere F5 per eseguire la soluzione e passare alla pagina CSS3. Si noti che le immagini hanno angoli arrotondati e ombreggiature box. Passare il puntatore del mouse sulle immagini e osservarli ruotare.

Trasformare un frammento di codice che ruota un'immagine

Nota

Se si usa Internet Explorer 10 e non è possibile visualizzare le ombreggiature, assicurarsi che la modalità documento sia impostata su Standard IE10. Premere F12 per aprire gli strumenti di sviluppo di Internet Explorer e fare clic su Modalità documento per passare agli standard di Internet Explorer 10.

Esercizio 2: Novità nell'editor HTML

Visual Studio ha un editor HTML migliorato. Alcuni dei miglioramenti inclusi in questa versione sono il rientro intelligente nei documenti HTML, frammenti HTML5, corrispondenza di tag html e fine e convalida HTML. In questo esercizio si vedrà in che modo queste modifiche migliorano la propria influenza quando si lavora nel markup del sito Web.

Come l'editor CSS, anche l'editor HTML è stato migliorato. La maggior parte di questi miglioramenti sono piccoli che semplificano la vita dello sviluppatore Web. Aspetti come più frammenti di codice per HTML5, rientro intelligente, corrispondenza dei tag iniziale e finale durante la modifica e la convalida destinati al documento HTML DOCTYPE sono alcuni di questi miglioramenti.

Attività 1 - Convalida DOCTYPE migliorata

L'editor HTML ora ha la possibilità di controllare doctype della pagina, anche se la definizione potrebbe trovarsi nella pagina master. A seconda di DOCTYPE della pagina, l'editor HTML convalida con il set corretto di regole e filtra l'elenco IntelliSense considerando gli elementi DOCTYPE.

In questa attività si modificherà il documento DOCTYPE di una pagina per vedere come cambia di conseguenza il comportamento dell'editor HTML.

Se non è già aperto, avviare Visual Studio e aprire la soluzione WhatsNewASPNET.sln che si trova nella cartella Source\WhatsNewASPNET di questo lab.
Aprire la pagina Site.Master .
Si noti lo schema di destinazione per la barra degli strumenti di convalida. Il comportamento dell'editor HTML (Convalida, IntelliSense e così via) cambierà correttamente in modo da adattarsi all'elemento Doctype selezionato.

Usare Doctype nella barra degli strumenti di modifica dell'origine HTML
Modificare lo schema di destinazione in HTML 4.01.

Modifica di Doctype nella barra degli strumenti di modifica dell'origine HTML
Posizionare il cursore sotto l'elemento body e iniziare a digitare il nome di un elemento HTML5 (ad esempio, video). Si noti che l'elemento non è disponibile nell'elenco IntelliSense.

Elementi HTML5 non elencati
Annullare le modifiche apportate allo schema di destinazione per la barra degli strumenti di convalida, selezionando DOCTYPE: XHTML5 dall'elenco a discesa.

Reimposta doctype nella barra degli strumenti di modifica dell'origine HTML
Posizionare il cursore sotto l'elemento body e iniziare a digitare di nuovo un elemento HTML5 (ad esempio, come il video). Si noti che gli elementi HTML5 sono ora disponibili nell'elenco IntelliSense.

Elementi HTML5 elencati

Attività 2 - Aggiornamento automatico dei tag di inizio/fine

Visual Studio aggiorna ora i tag di apertura o chiusura HTML dell'elemento che si sta modificando in modo che corrispondano tra loro. Questa nuova funzionalità migliorerà la produttività durante la modifica dei tag HTML.

Nella pagina Default.aspx aggiungere un elemento H3 con un titolo (ad esempio, Visual Studio 2012 Rocks!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

Modificare il tag H3 e digitare H2 o H1.

Si noti che il tag di fine viene aggiornato automaticamente. È anche possibile modificare il tag finale per verificare che anche il tag iniziale venga aggiornato di conseguenza.

Aggiornamento automatico del tag di fine

Attività 3 - Nuovi frammenti di codice HTML5

Visual Studio include ora diversi frammenti di codice HTML5. In questa attività si useranno alcuni di questi frammenti di codice.

Aggiungere una nuova cartella denominata audio alla radice della cartella del sito Web. Aprire Esplora risorse e copiare qualsiasi file audio nella cartella audio della soluzione WhatsNewASPNET.sln .
Nella pagina Default.aspx individuare il cursore sotto Le rocce Web11!! Intestazione. Digitare audio e premere TAB.

Il nuovo editor HTML include frammenti di codice per il contenuto HTML5. Ricordarsi di usare la definizione DOCTYPE appropriata per abilitare i frammenti di codice HTML5.

Inserimento di frammenti di codice HTML5

Aggiornare l'origine audio in modo che punti a un file audio esistente.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

Nota

Dovrai aggiungere il file audio alla soluzione.

Premere F5 per eseguire il sito e riprodurre l'audio.

Esecuzione del controllo audio

Nota

È anche possibile provare altri frammenti di codice inclusi in Visual Studio, ad esempio video, figura e così via.
Provare ora a inserire un controllo in una parte della pagina. Ad esempio, provare a inserire un controllo GridView , ma invece di digitare <Gri, iniziare a digitare <GV. Si noti che l'elenco IntelliSense mostra il controllo asp:GridView .

IntelliSense nell'editor HTML fornisce ora la ricerca con maiuscole e minuscole titolo, nonché la corrispondenza parziale (recuperando tutti gli elementi che contengono il termine).

Inserimento di un controllo GridView con elenchi IntelliSense

Se si digita <griglia si otterranno tutti gli elementi che corrispondono al termine, ma Visual Studio suggerirà il controllo gridview :

Inserimento di un controllo GridView con elenchi IntelliSense e corrispondenza parziale

Attività 4 - Smart Tag dell'editor HTML

Un altro miglioramento nell'editor HTML è la funzionalità Smart Tags. Gli smart tag semplificano l'esecuzione di attività di sviluppo comuni o ripetitive in base al controllo. Questa funzionalità era già disponibile in Progettazione HTML, ma non nell'editor HTML.

Aprire Site.Master e individuare l'elemento asp:Menu . Posizionare il cursore sul tag iniziale e notare che il piccolo glifo visualizzato nella parte inferiore dell'elemento - fare clic su di esso per aprire il menu attività intelligenti. Si noti che si ha accesso rapido ad alcune attività correlate al controllo Menu.

Attività intelligenti per il controllo Menu

Attività 5 - Rientro intelligente

Una delle procedure consigliate in HTML consiste nel rientro degli elementi annidati per mantenere il codice leggibile. In Visual Studio 2012 si noterà che l'editor rientra automaticamente gli elementi durante la scrittura del codice.

Nota

Nella versione precedente di Visual Studio, il rientro intelligente era disponibile nell'editor XML, ma non nell'editor HTML.

Assicurarsi che la configurazione del rientro nell'editor HTML sia impostata su Rientro intelligente. A tale scopo, selezionare strumenti | Opzione di menu Opzioni e quindi selezionare l'editor di testo | HTML | Pagina Schede nel riquadro sinistro della schermata. Selezionare l'opzione Rientro intelligente.

Impostazioni dell'editor HTML
Nella pagina Default.aspx rimuovere tutto il contenuto sotto l'elemento audio.
Posizionare il cursore alla fine dell'elemento audio di apertura e premere INVIO.

Si noti che la nuova posizione del cursore ha un livello di rientro aggiuntivo.

Rientro intelligente nell'editor HTML
Ripristinare il tag audio con il contenuto rimosso o chiudere Default.aspx senza salvare le modifiche.

Attività 6 - Estrarre nel controllo utente

Gli strumenti di refactoring inclusi in Visual Studio, ad esempio l'estrazione di una parte di codice in una funzione, sono funzionalità eccezionali che facilitano il miglioramento e il refactoring del codice esistente. La controparte per le pagine ASP.NET sarebbe l'estrazione di codice HTML in un controllo utente. L'esecuzione manuale comporta diversi passaggi, ad esempio la creazione di un nuovo controllo utente, lo spostamento della sezione del codice nel controllo utente, la registrazione di un prefisso di tag per il controllo utente e, infine, la creazione di un'istanza del controllo utente nelle pagine. Ora, il nuovo strumento Extract to User Control esegue automaticamente tutti questi passaggi.

In questa attività si userà la nuova operazione contestuale Extract to User Control per generare un nuovo controllo utente dal codice selezionato.

Nella pagina Default.aspx selezionare gli elementi H2 e audio.
Fare clic con il pulsante destro del mouse e selezionare Estrai nel controllo utente.

Opzione di menu Estrai in Controllo utente
Digitare un nome per il nuovo controllo utente. Ad esempio, Jukebox.ascx e quindi fare clic su OK.

Salvataggio del controllo utente estratto
Si noti che il codice selezionato è stato estratto in un controllo utente e che la posizione originale del codice selezionato è stata sostituita con un'istanza del nuovo controllo utente.

Pagina aggiornata automaticamente per l'uso del nuovo controllo utente
Premere F5 per eseguire la pagina e verificare che il controllo funzioni.

Esercizio 3: Novità dell'editor JavaScript

La scrittura o la modifica di codice JavaScript non è un'attività semplice, soprattutto quando l'applicazione inizia a crescere di dimensioni e ci si trova a gestire file lunghi e centinaia di funzioni. Gli sviluppatori di script devono in genere eseguire alcune operazioni aggiuntive per mantenere la leggibilità del codice e spostarsi tra file. Con l'inclusione di librerie JavaScript come jQuery, lo spostamento tramite script è diventato un problema a causa della lunghezza del codice.

Visual Studio ha rinnovato l'editor JavaScript con la promessa di rendere accessibile e organizzata la modalità di codice. Molte funzionalità di Visual Studio già esistenti negli editor C# o VB sono ora implementate nell'editor JavaScript: Vai a definizione, rientro automatico, documentazione e convalida durante la scrittura. Con l'elenco di IntelliSense rinnovato si avrà a portata di mano il catalogo delle funzioni JavaScript.

In questo esercizio verranno illustrate alcune delle nuove funzionalità e i miglioramenti dell'editor JavaScript. Si esplorano i file di esempio e si individuano ognuna delle nuove caratteristiche che renderanno più efficiente la programmazione JavaScript all'interno di Visual Studio 2012.

Attività 1 - Nuove funzionalità dell'editor JavaScript

Questa attività presenta alcune delle nuove funzionalità dell'editor JavaScript, incentrate sull'organizzazione del codice e sull'esperienza utente migliore.

Se non è già aperto, avviare Visual Studio e aprire la soluzione WhatsNewASPNET.sln che si trova nella cartella Source\WhatsNewASPNET di questo lab.
Premere F5 per eseguire l'applicazione, quindi fare clic sul collegamento JavaScript nella barra di spostamento. Aggiornare la pagina più volte e controllare il modo in cui il contatore viene incrementato.

Contatore pagina
Chiudere il browser e tornare a Visual Studio.
Aprire la pagina JavaScript.aspx e individuare il <blocco di script> (illustrato di seguito).

Il codice seguente usa l'archiviazione locale HTML5 per archiviare una variabile pageLoadCount che archivia il numero di volte in cui la pagina è stata visitata dall'utente corrente. L'archiviazione locale è un database chiave-valore lato client introdotto con lo standard HTML5. I dati vengono salvati nel computer locale all'interno del browser dell'utente.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
Nota

Verificare che DOCTYPE sia impostato su XHTML5 prima di procedere con i passaggi successivi.
Modificare il codice e notare che IntelliSense per JavaScript include funzionalità HTML5, ad esempio l'archiviazione locale e i relativi metodi interni.

Funzionalità JavaScript HTML5 in JavaScript
Fare clic su una parentesi aperta ({) dal codice di scripting e notare che le parentesi quadre sono evidenziate.

Le parentesi quadre sono evidenziate
Rimuovere il commento dalla funzione testAutoAlign() (selezionare le tre righe ed è possibile usare CTRL + K; CTRL + U) e individuare il cursore all'interno del codice della funzione. Premere INVIO per accodare una seconda riga. Si noti che il codice è ora allineato e rientrato automaticamente.

Il codice JavaScript è allineato automaticamente

Attività 2 - Convalida di JavaScript

In questa attività si scoprirà la nuova convalida JavaScript per lo standard ECMAScript5. Questa funzionalità consente di scrivere codice JavaScript conforme, impedendo al contempo i problemi di scripting prima della distribuzione del sito.

Nota

Visual Studio 2010 ha implementato la conformità ECMAStript3, mentre Visual Studio 2012 fornisce la conformità ECMAScript5.

Aprire ECMA5script5.js nella cartella Script\progetto personalizzato . La convalida verrà ora testata per lo standard ECMAScript5.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
È possibile controllare la direzione " usare strict " nella prima riga del file, che abilita la modalità strict ECMAScript5. Questa modalità è costituita da un subset del linguaggio che chiarisce le ambiguità dell'edizione precedente e aggiunge alcune nuove funzionalità, ad esempio getter e setter, supporto della libreria per JSON e reflection più completa sulle proprietà degli oggetti.
Aprire l'elenco errori se non è già aperto (menu Visualizza | Elenco errori). Si noti che la dichiarazione di funzione è sottolineata. Ciò è dovuto al fatto che nelle funzioni standard ECMA5 non è possibile annidare all'interno delle strutture del linguaggio. Nell'elenco degli errori riportato di seguito verranno visualizzati i dettagli dell'avviso.

Messaggio di errore di convalida JavaScript
Impostare come commento la direzione "usare strict" e notare che gli errori scompaiono, ma gli avvisi rimangono.
Nell'ultima riga del file scrivere qualsiasi stringa come "test" (includere le virgolette per indicare che è come stringa). Scrivere un punto accanto alla stringa per visualizzare l'elenco IntelliSense e selezionare l'opzione trim .

Nello standard ECMAScript5, i valori stringa e le variabili hanno anche metodi stringa definiti, ad esempio trim, maiuscolo, ricerca e sostituzione.

Elenco di IntelliSense in JavaScript

Attività 3 - Documentazione XML per JavaScript

In questa attività verranno esaminate le funzionalità di Visual Studio per la documentazione XML in JavaScript. Verrà ora visualizzato l'elenco JavaScript IntelliSense che mostra la documentazione XML di ogni funzione. Inoltre, si scoprirà la funzionalità di spostamento in JavaScript.

Aprire XMLDoc.js file che si trova nella cartella Script/progetto personalizzato . Questo file contiene la documentazione XML per ognuna delle funzioni JavaScript.

Documentazione XML JavaScript integrata in IntelliSense
Sotto aggiungi funzione nel file XMLDoc.js creare una nuova funzione denominata test.
Nella funzione di test chiamare la funzione di moltiplicazione che riceve due parametri. Si noti che la casella della descrizione comando mostra la documentazione relativa alla funzione di moltiplicazione .
```
function test() {
  multiply(
}
```
Documentazione XML per le funzioni JavaScript
Completare l'istruzione di chiamata di funzione e digitare un punto per aprire l'elenco IntelliSense sul valore restituito. Si noti che Visual Studio rileva il valore restituito nella documentazione, considerando il valore come numero.

Documentazione XML per i tipi restituiti
Inserire ora una chiamata per aggiungere una funzione. Si noti che l'editor JavaScript supporta ora gli overload delle funzioni. Quando si scrive un nome di funzione, sarà possibile selezionare uno degli overload disponibili specificati nella documentazione.

Documentazione XML per gli overload
Aprire GotoDefinition.js file e individuare la chiamata di funzione $().html(). Individuare il cursore in html.
Premere F12 e passare alla definizione. Si noti che è ora possibile accedere e esplorare il codice JavaScript senza usare lo strumento Trova .
Individuare il cursore sull'istruzione jQuery prima del blocco di firma nella parte inferiore del file di codice. Premere F12. Si passerà al file di libreria jQuery. Si noti che è anche possibile spostarsi tra i file jQuery usando F12.

Passaggio alle definizioni di jQuery

Nota

Assicurarsi che GotoDefinition.js non contenga errori di sintassi prima di salvare il file.

Esercizio 4: Creazione di bundle e minimizzazione

Quante volte i siti Web includono più file JavaScript o CSS? Si tratta di uno scenario molto comune in cui la creazione di bundle e la minificazione possono contribuire a ridurre le dimensioni del file e rendere il sito più veloce. La nuova funzionalità di creazione di bundle in ASP.NET 4.5 include un set di file JS o CSS in un singolo elemento e ne riduce le dimensioni minimizzando il contenuto ( ovvero rimuovendo spazi vuoti non necessari, rimuovendo i commenti, riducendo gli identificatori ).

La creazione di bundle e la minificazione in ASP.NET 4.5 viene eseguita in fase di esecuzione, in modo che il processo possa identificare l'agente utente (ad esempio Internet Explorer, Mozilla e così via) e quindi migliorare la compressione puntando al browser utente (ad esempio, rimuovendo elementi specifici di Mozilla quando la richiesta proviene da Internet Explorer).

In questo esercizio si apprenderà come abilitare e usare i diversi tipi di aggregazione e minimizzazione in ASP.NET 4.5.

Attività 1 - Installazione del pacchetto Bundling e Minification da NuGet

Se non è già aperto, avviare Visual Studio e aprire la soluzione WhatsNewASPNET.sln che si trova nella cartella Source\WhatsNewASPNET di questo lab.
Aprire la console di Gestione pacchetti NuGet. A tale scopo, usare il menu Visualizza | altre finestre | Gestione pacchetti Console.

Apertura della console di Gestione pacchetti
Nella console di Gestione pacchetti digitare Install-Package Microsoft.Web.Optimization e premere INVIO.

Attività 2 - Aggregazioni predefinite

Il modo più semplice per usare la creazione di bundle e la minimizzazione consiste nell'abilitare i bundle predefiniti. Questo metodo usa le convenzioni per fare riferimento alla versione in bundle e minimizzata per i file JS e CSS in una cartella.

In questa attività si apprenderà come abilitare e fare riferimento ai file JS e CSS raggruppati e minimizzati e visualizzare l'output risultante.

Se non è già aperto, avviare Visual Studio e aprire la soluzione WhatsNewASPNET.sln che si trova nella cartella Source\WhatsNewASPNET di questo lab.
Nella Esplora soluzioni espandere le cartelle Stili, Script\custom e Scripts\bundle.

Si noti che l'applicazione usa più file CSS e JS.

Più fogli di stile e file JavaScript nell'applicazione
Aprire il file Global.asax.cs .

Si noti che il nuovo spazio dei nomi Microsoft.Web.Optimization viene impostato come commento all'inizio del file. Rimuovere il commento dalla direttiva using per includere le funzionalità di aggregazione e minificazione.
```
using System;
using Microsoft.Web.Optimization;
```
Individuare il metodo Application_Start .

In questo metodo rimuovere il commento dalla chiamata EnableDefaultBundles, come illustrato nel frammento di codice seguente. In questo modo è possibile fare riferimento a una raccolta di file CSS in bundle in una cartella usando il percorso di tale cartella, oltre al suffisso "CSS" o "JS".
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Aprire il file Optimization.aspx e individuare il controllo contenuto per HeadContent.

Si noti che i file CSS e i file JS hanno un singolo tag a cui si fa riferimento.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
Nota

Questo codice è a scopo dimostrativo. Idealmente, si farà riferimento ai bundle nel file Site.Master. In questo codice di esempio si scopre che alcuni dei file in bundle vengono anche a cui viene fatto riferimento dal file Site.Master, rendendo ridondante l'ultimo riferimento.
Si noti che i collegamenti usano le convenzioni di aggregazione nell'attributo href per ottenere rispettivamente tutti i file CSS o JS dalla cartella Styles e Scripts\custom.

È possibile usare il percorso Scripts/custom/JS come illustrato di seguito per aggregare e minificare tutti i file JS all'interno di una cartella Scripts/custom . Si tratta del comportamento predefinito con i bundle predefiniti.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Aprire il file Styles\Site.css .

Si noti che il file CSS originale contiene codice rientrato, spazi vuoti e commenti che ingrandiscano il file. Il file JavaScript contiene anche spazi vuoti e commenti.

Uno dei file CSS originali nella cartella Scripts
Premere F5 per eseguire l'applicazione e passare alla pagina Ottimizzazione .
Fare clic sul collegamento Bundle CSS per scaricare e aprire il file.

Controllare il file in bundle minimizzato. Si noterà che tutti gli spazi vuoti, i commenti e i caratteri di rientro sono stati rimossi, generando un file più piccolo.

File CSS in bundle
Fare ora clic sul collegamento Bundle JS per aprire il file in bundle JavaScript. È possibile ignorare in modo sicuro l'avviso di Explorer. Si noti che anche i file JavaScript nella cartella personalizzata vengono raggruppati e minimizzati.

File JavaScript in bundle

L'abilitazione della compressione per i file CSS o JS era molto più complessa nella versione precedente ASP.NET. Ora, come si è visto, è sufficiente aggiungere una riga nel file Global.asax per abilitare la creazione di bundle e quindi fare riferimento ai file in bundle dal sito.

Attività 3 - Bundle statici

L'approccio al bundle statico consente di personalizzare il set di file da aggregare, il riferimento e il metodo di minificazione che verrà usato.

In questa attività verrà configurato un bundle statico per definire un set specifico di file da aggregare e minificare.

Chiudere il browser.
Aprire il file Global.asax.cs e individuare il metodo Application_Start .

Rimuovere il commento dal codice del bundle statico come illustrato nel codice seguente.

Si definisce un bundle statico a cui verrà fatto riferimento con il percorso virtuale "~/StaticBundle" e si usa JsMinify per la minimizzazione di tutti i file specificati con il metodo AddFile . Infine, si aggiunge il bundle statico a BundleTable e lo si abilita.

Si noti che i file non si trovano nella stessa posizione; questo è un altro vantaggio rispetto al bundle predefinito.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Aprire il file Optimization.aspx .

Si noti che il collegamento a Static JS Bundle usa il percorso dichiarato quando è stato configurato il bundle statico nel file Global.asax.cs: /StaticBundle.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Premere F5 per eseguire l'applicazione e quindi passare alla pagina Ottimizzazione .
Fare clic sul collegamento Static JS Bundle (Bundle JS statico) per aprire il file.

Si noti che il file JavaScript in bundle minimizzato è l'output per tutti i file JavaScript configurati nel file bundle statico nel percorso "/StaticBundle".

Bundle di file JavaScript statici
Chiudere il browser e tornare a Visual Studio.

Attività 4 - Bundle di cartelle dinamiche

In questa attività si apprenderà come configurare i bundle di cartelle dinamiche. La potenza del bundle dinamico è che è possibile includere JavaScript statico, nonché altri file nei linguaggi compilati in JavaScript e quindi richiedere un'elaborazione prima dell'esecuzione del bundle.

In questo esempio si apprenderà come usare la classe DynamicFolderBundle per creare un bundle dinamico per i file scritti in CofeeScript. CofeeScript è un linguaggio di programmazione che viene compilato in JavaScript e fornisce una sintassi più semplice per la scrittura di codice JavaScript, migliorando la brevità e la leggibilità di JavaScript.

Aprire il file Global.asax.cs e individuare il metodo Application_Start .

Rimuovere il commento dal codice del bundle dinamico come illustrato nel codice seguente.

Si definisce un bundle di cartelle dinamiche che userà il processore di minificazione personalizzato CoffeeMinify che verrà applicato solo ai file con estensione ".coffee" (file CoffeeScript). Si noti che è possibile usare un modello di ricerca per selezionare i file da aggregare all'interno di una cartella, ad esempio "*.coffee".

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}

Aprire la console di Gestione pacchetti NuGet. A tale scopo, usare il menu Visualizza | altre finestre | Gestione pacchetti Console.
Nella console Gestione pacchetti digitare Install-Package CoffeeSharp e premere INVIO.
Fare clic sul pulsante Mostra tutti i file nella finestra Esplora soluzioni

Visualizzazione di tutti i file
Fare clic con il pulsante destro del mouse sul file CoffeeMinify.cs nel Esplora soluzioni e selezionare Includi nel progetto

Includere il file CoffeeMinify.cs nel progetto
Aprire il file CoffeeMinify.cs .

Questa classe eredita da JsMinify per minificare l'output JavaScript risultante dalla compilazione del codice CoffeeScript. Chiama innanzitutto il compilatore CoffeeScript per generare il codice JavaScript e quindi lo invia al metodo JsMinify.Process per minificare il codice risultante.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
Aprire i file Script1.coffee e Script2.coffee dalla cartella Scripts/bundle.

Questi file includono il codice CoffeeScript da compilare durante l'esecuzione del bundle con la classe CoffeeMinify.

Ai fini della semplicità, i file CoffeeScript forniti sono inclusi solo il codice di esempio CoffeeScript. I commenti vengono esclusi dal processo JsMinify.

File CoffeeScript

Nota

CofeeScript offre una sintassi più semplice per la scrittura di codice JavaScript, migliorando la brevità e la leggibilità di JavaScript, oltre ad aggiungere altre funzionalità come la comprensione delle matrici e la corrispondenza dei criteri.

Aprire il file Optimization.aspx e individuare i collegamenti del bundle.

Si noti che il collegamento a Dynamic JS Bundle fa riferimento alla cartella Scripts/bundle usando il suffisso /Coffee configurato per il bundle di cartelle dinamiche.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Premere F5 per eseguire l'applicazione e quindi passare alla pagina Ottimizzazione .
Fare clic sul collegamento Dynamic JS Bundle (Bundle JS dinamico) per aprire il file generato.

Si noti che il contenuto incluso in questo bundle contiene solo file con estensione coffee . È anche possibile notare che il codice CoffeeScript è stato compilato in JavaScript e che le righe commentate sono state rimosse.

Bundle di file JS dinamici

Nota

Inoltre, è possibile distribuire questa applicazione nei siti Web di Windows Azure dopo l'Appendice B: Pubblicazione di un'applicazione ASP.NET MVC 4 tramite Distribuzione Web.

Riepilogo

Questo lab consente di comprendere le novità di ASP.NET e sviluppo Web in Visual Studio 2012 e come sfruttare la varietà di miglioramenti in Visual Studio 2012.

Completando questo lab pratico, si è appreso come usare le nuove funzionalità e i miglioramenti in Visual Studio 2012 Editor per CSS, JavaScript e HTML. Inoltre, si è appreso come Visual Studio 2012 implementa la creazione di bundle e la minimizzazione predefinite.

Appendice A: Installazione di Visual Studio Express 2012 per Web

È possibile installare Microsoft Visual Studio Express 2012 per Il Web o un'altra versione "Express" usando il Installazione guidata piattaforma Web Microsoft. Le istruzioni seguenti illustrano i passaggi necessari per installare Visual Studio Express 2012 per Il Web usando Installazione guidata piattaforma Web Microsoft.

Passare a [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). In alternativa, se è già stato installato Il programma di installazione della piattaforma Web, è possibile aprirlo e cercare il prodotto "Visual Studio Express 2012 for Web con Windows Azure SDK".
Fare clic su Installa ora. Se non si dispone del programma di installazione della piattaforma Web, si verrà reindirizzati per scaricarlo e installarlo per primo.
Dopo aver aperto Il programma di installazione della piattaforma Web, fare clic su Installa per avviare l'installazione.

Installare Visual Studio Express
Leggere tutte le licenze e le condizioni dei prodotti e fare clic su Accetto per continuare.

Accettazione delle condizioni di licenza
Attendere il completamento del processo di download e installazione.

Stato dell'installazione
Al termine dell'installazione, fare clic su Fine.

Installazione completata
Fare clic su Esci per chiudere Programma di installazione piattaforma Web.
Per aprire Visual Studio Express for Web, passare alla schermata Start e iniziare a scrivere "VS Express", quindi fare clic sul riquadro VS Express for Web.

Riquadro di VS Express per Il Web

Appendice B: Pubblicazione di un'applicazione MVC 4 ASP.NET tramite distribuzione Web

Questa appendice illustra come creare un nuovo sito Web dal portale di gestione di Windows Azure e pubblicare l'applicazione ottenuta seguendo il lab, sfruttando la funzionalità di pubblicazione Distribuzione Web fornita da Windows Azure.

Attività 1 - Creazione di un nuovo sito Web dal portale di Windows Azure

Passare al portale di gestione di Windows Azure e accedere usando le credenziali Microsoft associate alla sottoscrizione.

Nota

Con Windows Azure è possibile ospitare gratuitamente 10 siti Web ASP.NET e quindi ridimensionare man mano che il traffico cresce. È possibile iscriversi qui.

Accedere al portale di gestione di Windows Azure
Fare clic su Nuovo sulla barra dei comandi.

Creazione di un nuovo sito Web
Fare clic su Calcolo | sito Web. Selezionare quindi l'opzione Creazione rapida. Specificare un URL disponibile per il nuovo sito Web e fare clic su Crea sito Web.

Nota

Un sito Web di Windows Azure è l'host di un'applicazione Web in esecuzione nel cloud che è possibile controllare e gestire. L'opzione Creazione rapida consente di distribuire un'applicazione Web completata nel sito Web di Windows Azure dall'esterno del portale. Non include i passaggi per la configurazione di un database.

Creazione di un nuovo sito Web con creazione rapida
Attendere la creazione del nuovo sito Web.
Dopo aver creato il sito Web, fare clic sul collegamento nella colonna URL . Verificare che il nuovo sito Web funzioni.

Esplorazione del nuovo sito Web

Sito Web in esecuzione
Tornare al portale e fare clic sul nome del sito Web nella colonna Nome per visualizzare le pagine di gestione.

Apertura delle pagine di gestione del sito Web
Nella pagina Dashboard fare clic sul collegamento Download publish profile (Scarica profilo di pubblicazione).

Nota

Il profilo di pubblicazione contiene tutte le informazioni necessarie per pubblicare un'applicazione Web in un sito Web di Windows Azure per ogni metodo di pubblicazione abilitato. Il profilo di pubblicazione contiene gli URL, le credenziali utente e le stringhe di database necessari per connettersi ed eseguire l'autenticazione su ognuno degli endpoint per cui è abilitato un metodo di pubblicazione. Microsoft WebMatrix 2, Microsoft Visual Studio Express per il Web e Microsoft Visual Studio 2012 supportano la lettura dei profili di pubblicazione per automatizzare la configurazione di questi programmi per la pubblicazione di applicazioni Web nei siti Web di Windows Azure.

Download del profilo di pubblicazione del sito Web
Scaricare il file del profilo di pubblicazione in un percorso noto. Più avanti in questo esercizio si vedrà come usare questo file per pubblicare un'applicazione Web in siti Web di Windows Azure da Visual Studio.

Salvataggio del file del profilo di pubblicazione

Attività 2 - Configurazione del server di database

Se l'applicazione usa i database di SQL Server, sarà necessario creare un server database SQL. Se si vuole distribuire una semplice applicazione che non usa SQL Server, è possibile ignorare questa attività.

È necessario un server database SQL per archiviare il database dell'applicazione. È possibile visualizzare i server database SQL dalla sottoscrizione nel portale di gestione di Windows Azure nel dashboard del server dei database | | SQL. Se non è stato creato un server, è possibile crearne uno usando il pulsante Aggiungi sulla barra dei comandi. Prendere nota del nome del server e dell'URL, del nome di accesso amministratore e della password, perché verranno usati nelle attività successive. Non creare ancora il database, perché verrà creato in una fase successiva.

Dashboard del server database SQL
Nell'attività successiva verrà testata la connessione al database da Visual Studio, per questo motivo è necessario includere l'indirizzo IP locale nell'elenco degli indirizzi IP consentiti del server. A tale scopo, fare clic su Configura, selezionare l'indirizzo IP da Indirizzo IP client corrente e incollarlo nelle caselle di testo Indirizzo IP iniziale e Indirizzo IP finale. Immettere un nome per la regola e fare clic sul pulsante .

Aggiunta dell'indirizzo IP client
Dopo aver aggiunto l'indirizzo IP client all'elenco indirizzi IP consentiti, fare clic su Salva per confermare le modifiche.

Conferma modifiche

Attività 3- Pubblicazione di un'applicazione ASP.NET MVC 4 tramite distribuzione Web

Tornare alla soluzione ASP.NET MVC 4. Nella Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto del sito Web e scegliere Pubblica.

Pubblicazione del sito Web
Importare il profilo di pubblicazione salvato nella prima attività.

Importazione del profilo di pubblicazione
Fare clic su Convalida connessione. Al termine della convalida, fare clic su Avanti.

Nota

La convalida viene completata dopo aver visualizzato un segno di spunta verde accanto al pulsante Convalida connessione.

Convalida della connessione
Nella pagina Impostazioni, nella sezione Database, fare clic sul pulsante accanto alla casella di testo della connessione al database, ad esempio DefaultConnection.

Configurazione distribuzione Web
Configurare la connessione al database come indicato di seguito:
- Nel nome del server digitare l'URL del server database SQL usando il prefisso tcp: .
- In Nome utente digitare il nome di accesso dell'amministratore del server.
- In Password digitare la password di accesso dell'amministratore del server.
- Digitare un nuovo nome di database, ad esempio MVC4SampleDB.
  
  Configurazione di stringa di connessione di destinazione
Quindi fare clic su OK. Quando viene richiesto di creare il database, fare clic su Sì.

Creazione del database
Il stringa di connessione che verrà usato per connettersi a database SQL in Windows Azure viene visualizzato nella casella di testo Connessione predefinita. Fare clic su Avanti.

Stringa di connessione che punta a database SQL
Nella pagina Anteprima fare clic su Pubblica.

Pubblicazione dell'applicazione Web
Al termine del processo di pubblicazione, il browser predefinito aprirà il sito Web pubblicato.

Applicazione pubblicata in Windows Azure