Condividi tramite

Novità di ASP.NET MVC 4

  • Articolo

Per squadra di campi Web

Scarica Kit di formazione per i campi Web

ASP.NET MVC 4 è un framework per la creazione di applicazioni Web scalabili basate su standard che usano modelli di progettazione ben definiti e la potenza dei ASP.NET e del framework .NET. Questa nuova versione del framework è incentrata sulla facilità di sviluppo di applicazioni Web per dispositivi mobili.

Per iniziare, quando si crea un nuovo progetto ASP.NET MVC 4 è ora disponibile un modello di progetto di applicazione per dispositivi mobili che è possibile usare per compilare un'app autonoma specificamente per i dispositivi mobili. Inoltre, ASP.NET MVC 4 si integra con jQuery Mobile tramite un pacchetto NuGet jQuery.Mobile.MVC. jQuery Mobile è un framework basato su HTML5 per lo sviluppo di app Web compatibili con tutte le piattaforme di dispositivi mobili più diffuse, tra cui Windows Phone, iPhone, Android e così via. Tuttavia, se è necessaria la specializzazione, ASP.NET MVC 4 consente anche di gestire visualizzazioni diverse per dispositivi diversi e fornire ottimizzazioni specifiche del dispositivo.

In questo lab pratico si inizierà con il modello di progetto "Applicazione Internet" MVC 4 ASP.NET per creare un'applicazione Raccolta foto. Si migliorerà progressivamente l'app usando jQuery Mobile e ASP.NET nuove funzionalità di MVC 4 per renderla compatibile con diversi dispositivi mobili e web browser desktop. Verranno inoltre fornite informazioni sulle nuove ricette di codice per la generazione di codice e sul modo in cui ASP.NET MVC 4 semplifica la scrittura di metodi di azione asincroni supportando i tipi restituiti Task<ActionResult> .

Nota

Tutti i frammenti e il codice di esempio sono inclusi nel Web Camp Training Kit, disponibile in Microsoft-Web/WebCampTrainingKit Releases.All sample code and snippets are included in the Web Camps Training Kit, available at Microsoft-Web/WebCampTrainingKit Releases. Il progetto specifico per questo lab è disponibile in Novità di Web Form in ASP.NET 4.5.

Obiettivi

In questo lab pratico si apprenderà come:

  • Sfruttare i miglioramenti apportati ai modelli di progetto MVC ASP.NET, incluso il nuovo modello di progetto dell'applicazione per dispositivi mobili
  • Usare l'attributo viewport HTML5 e le query sui supporti CSS per migliorare la visualizzazione nei dispositivi mobili
  • Usare jQuery Mobile per miglioramenti progressivi e per la creazione di un'interfaccia utente Web ottimizzata per il tocco
  • Creare visualizzazioni specifiche per dispositivi mobili
  • Usare il componente view-switcher per alternare le visualizzazioni per dispositivi mobili e desktop nell'applicazione
  • Creare controller asincroni usando il supporto delle attività

Prerequisiti

Per completare questo lab, è necessario disporre degli elementi seguenti:

Attrezzaggio

In tutto il documento del lab verrà richiesto di inserire blocchi di codice. Per praticità, la maggior parte di questo codice viene fornita come frammenti di codice di Visual Studio, che è possibile usare da Visual Studio per evitare di dover aggiungerlo manualmente.

Per installare i frammenti di codice:

  1. Aprire una finestra di Esplora risorse e passare alla cartella Source\Setup del lab.
  2. Fare doppio clic sul file Setup.cmd in questa cartella per installare i frammenti di codice di Visual Studio.

Se non si ha familiarità con i frammenti di codice di Visual Studio e si vuole imparare a usarli, è possibile fare riferimento all'appendice di questo documento "Appendice A: Uso di frammenti di codice".

Esercizi

Questo lab pratico include gli esercizi seguenti:

  1. Nuovi modelli di progetto ASP.NET MVC 4
  2. Creazione dell'applicazione Web raccolta foto
  3. Aggiunta del supporto per i dispositivi mobili
  4. Uso di controller asincroni

Nota

Ogni esercizio è accompagnato da una cartella End contenente la soluzione risultante da ottenere dopo aver completato gli esercizi. È possibile usare questa soluzione come guida se sono necessarie altre informazioni sull'utilizzo degli esercizi.

Tempo stimato per il completamento del lab: 60 minuti.

Esercizio 1: Nuovi modelli di progetto MVC 4 ASP.NET

In questo esercizio verranno esaminati i miglioramenti nei modelli di progetto ASP.NET MVC 4. Oltre al modello applicazione Internet, già presente in MVC 3, questa versione include ora un modello separato per le applicazioni per dispositivi mobili. Prima di tutto, verranno esaminate alcune funzionalità rilevanti di ognuno dei modelli. Si lavorerà quindi per eseguire correttamente il rendering della pagina nelle diverse piattaforme usando l'approccio corretto.

Attività 1 - Esplorazione del modello di applicazione Internet

  1. Aprire Visual Studio.

  2. Selezionare il file | Nuovo | Comando di menu Progetto . Nella finestra di dialogo Nuovo progetto selezionare Visual C# | Modello Web nell'albero del riquadro sinistro e scegliere ASP.NET'applicazione Web MVC 4. Assegnare al progetto il nome PhotoGallery, selezionare un percorso (o lasciare l'impostazione predefinita) e fare clic su OK.

    Nota

    Successivamente si personalizza la soluzione PhotoGallery ASP.NET MVC 4 che si sta creando.

    Creazione di un nuovo progetto

    Creazione di un nuovo progetto

  3. Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare il modello di progetto Applicazione Internet e fare clic su OK. Assicurarsi di aver selezionato Razor come motore di visualizzazione.

    Creazione di una nuova applicazione Internet MVC 4 ASP.NET

    Creazione di una nuova applicazione Internet MVC 4 ASP.NET

    Nota

    La sintassi Razor è stata introdotta in ASP.NET MVC 3. L'obiettivo è ridurre al minimo il numero di caratteri e sequenze di tasti necessari in un file, abilitando un flusso di lavoro di codifica veloce e fluido. Razor sfrutta le competenze esistenti del linguaggio C# /VB (o altre) e offre una sintassi di markup del modello che consente un flusso di lavoro di costruzione HTML impressionante.

  4. Premere F5 per eseguire la soluzione e visualizzare i modelli rinnovati. È possibile consultare le funzionalità seguenti:

    Modelli moderni

    I modelli sono stati rinnovati, fornendo stili più moderni.

    modelli ASP.NET MVC 4 con aspetto

    modelli ASP.NET MVC 4 con aspetto

    Pagina Nuovo contatto

    Pagina Nuovo contatto

    Rendering adattivo

    Controllare il ridimensionamento della finestra del browser e notare come il layout di pagina si adatti dinamicamente alle nuove dimensioni della finestra. Questi modelli usano la tecnica di rendering adattiva per eseguire correttamente il rendering in piattaforme desktop e per dispositivi mobili senza alcuna personalizzazione.

    ASP.NET modello di progetto MVC 4 in dimensioni del browser diverse

    ASP.NET modello di progetto MVC 4 in dimensioni del browser diverse

    Interfaccia utente più completa con JavaScript

    Un altro miglioramento ai modelli di progetto predefiniti è l'uso di JavaScript per offrire un JavaScript più interattivo. I collegamenti Login e Register usati nel modello esemplificano come usare le convalide jQuery per convalidare i campi di input dal lato client.

    Convalida di jQuery

    Convalida di jQuery

    Nota

    Si notino le due sezioni di accesso, nella prima sezione è possibile accedere usando un account registrato dal sito e nella seconda sezione è possibile accedere usando un altro servizio di autenticazione come google (disabilitato per impostazione predefinita).

  5. Chiudere il browser per arrestare il debugger e tornare a Visual Studio.

  6. Aprire il file AuthConfig.cs che si trova nella cartella App_Start .

  7. Rimuovere il commento dall'ultima riga per registrare il client Google per l'autenticazione OAuth .

    public static class AuthConfig
{
    public static void RegisterAuth()
    {
        // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
        // you must update this site. For more information visit https://go.microsoft.com/fwlink/?LinkID=252166

        //OAuthWebSecurity.RegisterMicrosoftClient(
        //    clientId: "",
        //    clientSecret: "");

        //OAuthWebSecurity.RegisterTwitterClient(
        //    consumerKey: "",
        //    consumerSecret: "");

        //OAuthWebSecurity.RegisterFacebookClient(
        //    appId: "",
        //    appSecret: "");

        OAuthWebSecurity.RegisterGoogleClient();
    }
}

    Nota

    Si noti che è possibile abilitare facilmente l'autenticazione usando qualsiasi servizio OpenID o OAuth come Facebook, Twitter, Microsoft e così via.

  8. Premere F5 per eseguire la soluzione e passare alla pagina di accesso.

  9. Selezionare Servizio Google per accedere.

    Selezione del servizio di accesso

    Selezione del servizio di accesso

  10. Accedere con il proprio account Google.

  11. Consenti al sito (localhost) di recuperare informazioni dall'account Google.

  12. Infine, dovrai registrarti nel sito per associare l'account Google.

Associare il tuo account Google

Associazione del tuo account Google 13. Chiudere il browser per arrestare il debugger e tornare a Visual Studio. 14. Esplorare ora la soluzione per esaminare alcune altre nuove funzionalità introdotte da ASP.NET MVC 4 nel modello di progetto.

Modello di progetto applicazione Internet MVC 4 ASP.NET

Modello di progetto applicazione Internet MVC 4 ASP.NET

  • HTML 5 Markup

    Esplorare le visualizzazioni modello per scoprire il nuovo markup del tema.

    Nuovo modello, usando il markup Razor e HTML5 About.cshtml.

    Nuovo modello, usando il markup Razor e HTML5 (About.cshtml).

  • Librerie JavaScript aggiornate

    Il modello predefinito di ASP.NET MVC 4 include ora KnockoutJS, un framework MVVM JavaScript che consente di creare applicazioni Web avanzate e altamente reattive usando JavaScript e HTML. Come in MVC3, anche le librerie jQuery e jQuery dell'interfaccia utente sono incluse in ASP.NET MVC 4.

    Nota

    È possibile ottenere altre informazioni sulla libreria KnockOutJS in questo collegamento: [http://learn.knockoutjs.com/](http://learn.knockoutjs.com/). È anche possibile ottenere informazioni sull'interfaccia utente di jQuery e jQuery in [http://docs.jquery.com/](http://docs.jquery.com/).

Attività 2 - Esplorazione del modello di applicazione per dispositivi mobili

ASP.NET MVC 4 facilita lo sviluppo di siti Web per browser per dispositivi mobili e tablet. Questo modello ha la stessa struttura dell'applicazione del modello applicazione Internet (si noti che il codice del controller è praticamente identico), ma il suo stile è stato modificato per il rendering corretto nei dispositivi mobili basati sul tocco.

  1. Selezionare il file | Nuovo | Comando di menu Progetto . Nella finestra di dialogo Nuovo progetto selezionare Visual C# | Modello Web nell'albero del riquadro sinistro e scegliere l'applicazione Web MVC 4 ASP.NET. Assegnare al progetto il nome PhotoGallery.Mobile, selezionare un percorso (o lasciare l'impostazione predefinita), selezionare "Aggiungi alla soluzione" e fare clic su OK.

  2. Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare il modello di progetto Applicazione per dispositivi mobili e fare clic su OK. Assicurarsi di aver selezionato Razor come motore di visualizzazione.

    Creazione di una nuova applicazione per dispositivi mobili MVC 4 ASP.NET

    Creazione di una nuova applicazione per dispositivi mobili MVC 4 ASP.NET

  3. È ora possibile esplorare la soluzione ed esaminare alcune delle nuove funzionalità introdotte dal modello di soluzione ASP.NET MVC 4 per dispositivi mobili:

    • jQuery Mobile Library

      Il modello di progetto Applicazione per dispositivi mobili include la libreria jQuery Mobile, ovvero una libreria open source per la compatibilità del browser per dispositivi mobili. jQuery Mobile applica miglioramenti progressivi ai browser per dispositivi mobili che supportano CSS e JavaScript. Il miglioramento progressivo consente a tutti i browser di visualizzare il contenuto di base di una pagina Web, mentre consente solo ai browser più potenti di visualizzare il contenuto avanzato. I file JavaScript e CSS, inclusi nello stile jQuery Mobile, consentono ai browser per dispositivi mobili di adattare il contenuto nella schermata senza apportare alcuna modifica al markup della pagina.

      jQuery-mobile-library-included-in-the-template

      Libreria per dispositivi mobili jQuery inclusa nel modello

    • Markup basato su HTML5

      Mobile-application-template-using-HTML5-markup

      Modello di applicazione per dispositivi mobili con markup HTML5, (Login.cshtml e index.cshtml)

  4. Premere F5 per eseguire la soluzione.

  5. Aprire l'emulatore di Windows Phone 7.

  6. Nella schermata start del telefono aprire Internet Explorer. Controllare l'URL in cui è stata avviata l'applicazione desktop e passare a tale URL dal telefono ,ad esempio http://localhost:[PortNumber]/.

  7. A questo momento è possibile immettere la pagina di accesso o consultare la pagina informazioni. Si noti che lo stile del sito Web si basa sulla nuova app Metro per dispositivi mobili. Il modello di progetto ASP.NET MVC 4 viene visualizzato correttamente nei dispositivi mobili, assicurandosi che tutti gli elementi della pagina siano visibili e abilitati. Si noti che i collegamenti nell'intestazione sono sufficientemente grandi da fare clic o toccare.

    Pagine modello di progetto in un dispositivo mobile

    Pagine modello di progetto in un dispositivo mobile

  8. Il nuovo modello usa anche il meta tag Viewport. La maggior parte dei browser per dispositivi mobili definisce una larghezza per una finestra del browser virtuale o "viewport", maggiore della larghezza effettiva del dispositivo mobile. Ciò consente ai browser per dispositivi mobili di visualizzare l'intera pagina Web all'interno dello schermo virtuale. Il meta tag Viewport consente agli sviluppatori Web di impostare la larghezza, l'altezza e la scala dell'area del browser nei dispositivi mobili . Il modello ASP.NET MVC 4 per le applicazioni per dispositivi mobili imposta il riquadro di visualizzazione sulla larghezza del dispositivo ("width=device-width") nel modello di layout (Views\Shared_Layout.cshtml), in modo che tutte le pagine abbiano il relativo riquadro di visualizzazione impostato sulla larghezza dello schermo del dispositivo. Si noti che il tag meta Viewport non modificherà la visualizzazione predefinita del browser.

  9. Aprire _Layout.cshtml, che si trova nelle visualizzazioni | Cartella condivisa e impostare come commento il tag meta Viewport. Eseguire l'applicazione, se non è già stata aperta, ed eseguire le differenze.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
 @* <meta name="viewport" content="width=device-width" /> *@
...

Sito dopo aver commentato il meta tag viewport

Sito dopo aver commentato il meta tag viewport 10. In Visual Studio premere MAIUSC + F5 per arrestare il debug dell'applicazione. 11. Rimuovere il commento dal tag meta del riquadro di visualizzazione.

...
 <meta charset="utf-8" />
 <title>@ViewBag.Title</title> 
   <meta name="viewport" content="width=device-width" /> 
...

Attività 3 - Uso del rendering adattivo

In questa attività si apprenderà un altro metodo per eseguire correttamente il rendering di una pagina Web nei dispositivi mobili e nei Web browser senza alcuna personalizzazione. Il meta tag Viewport è già stato usato con uno scopo simile. Ora si incontrerà un altro metodo potente: rendering adattivo.

Il rendering adattivo è una tecnica che usa query multimediali CSS3 per personalizzare lo stile applicato a una pagina. Le query multimediali definiscono le condizioni all'interno di un foglio di stile, raggruppando gli stili CSS in una determinata condizione. Solo quando la condizione è true, lo stile viene applicato agli oggetti dichiarati.

La flessibilità offerta dalla tecnica di rendering adattivo consente qualsiasi personalizzazione per la visualizzazione del sito in dispositivi diversi. È possibile definire tutti gli stili desiderati in un singolo foglio di stile senza scrivere codice logico per scegliere lo stile. Pertanto, è un modo molto pulito di adattare gli stili di pagina, in quanto riduce la quantità di codice duplicato e logica a scopo di rendering. D'altra parte, il consumo di larghezza di banda aumenterebbe, in quanto le dimensioni dei file CSS potrebbero crescere marginalmente.

Usando la tecnica di rendering adattiva, il sito verrà visualizzato correttamente, indipendentemente dal browser. È tuttavia consigliabile considerare se il carico aggiuntivo della larghezza di banda è un problema.

Nota

Il formato di base di una query multimediale è: [Ambito: @media tutti | palmari | stampa | proiezione | schermo] ([property:value] e ... [property:value])

Esempi di query multimediali: >@media tutte e (larghezza massima: 1000px) e (larghezza minima: 700px): {} per tutte le risoluzioni comprese tra 700 px e 1000 px.

@media schermata e (larghezza minima: 400px) e (larghezza massima: 700px) { ... }: solo per gli schermi. La risoluzione deve essere compresa tra 400 e 700px.

@media palmare e (min-width: 20em), schermo e (min-width: 20em) { ... }: per palmari(dispositivi mobili) e schermi. La larghezza minima deve essere maggiore di 20em.

Per altre informazioni, vedere il sito W3C.

Si esaminerà ora il funzionamento del rendering adattivo, migliorando la leggibilità del modello di sito Web predefinito di ASP.NET MVC 4.

  1. Aprire la soluzione PhotoGallery.sln creata nell'attività 1 e selezionare il progetto PhotoGallery . Premere F5 per eseguire la soluzione.

  2. Ridimensionare la larghezza del browser, impostando le finestre su metà o su meno di un quarto delle dimensioni originali. Si noti che cosa accade con gli elementi nell'intestazione: alcuni elementi non verranno visualizzati nell'area visibile dell'intestazione.

  3. Aprire Site.css file da Esplora soluzioni di Visual Studio, disponibile nella cartella Progetto contenuto . Premere CTRL+F per aprire la ricerca integrata di Visual Studio e scrivere @media per individuare la query multimediale CSS.

    La condizione di query multimediale definita in questo modello funziona in questo modo: quando le dimensioni della finestra del browser sono inferiori a 850 px, le regole CSS applicate sono quelle definite all'interno di questo blocco multimediale.

    Individuazione della query multimediale

    Individuazione della query multimediale

  4. Sostituire il valore dell'attributo max-width impostato in 850 px con 10px per disabilitare il rendering adattivo e premere CTRL+S per salvare le modifiche. Tornare al browser e premere CTRL+F5 per aggiornare la pagina con le modifiche apportate. Si notino le differenze in entrambe le pagine durante la regolazione della larghezza della finestra.

    La pagina applica la classe <span=@media stile a sinistra e a destra, lo stile viene omesso" title="A sinistra, la pagina applica lo stile @media, a destra, lo stile viene omesso" />

    A sinistra, la pagina applica lo @media stile, a destra, lo stile viene omesso

    A questo punto, esaminiamo cosa accade nei dispositivi mobili:

    A sinistra, la pagina applica la classe <span=@media stile, a destra, lo stile viene omesso" title="A sinistra, la pagina applica lo stile @media, a destra, lo stile viene omesso" />

    A sinistra, la pagina applica lo @media stile, a destra, lo stile viene omesso

    Anche se si noterà che le modifiche quando viene eseguito il rendering della pagina in un Web browser non sono molto significative, quando si usa un dispositivo mobile le differenze diventano più evidenti. Sul lato sinistro dell'immagine è possibile notare che lo stile personalizzato ha migliorato la leggibilità.

    Il rendering adattivo può essere usato in molti altri scenari, semplificando l'applicazione di stili condizionali a un sito Web e risolvendo problemi di stile comuni con un approccio accurato.

    Il meta tag Viewport e le query sui supporti CSS non sono specifici di ASP.NET MVC 4, quindi è possibile sfruttare queste funzionalità in qualsiasi applicazione Web.

  5. In Visual Studio premere MAIUSC + F5 per arrestare il debug dell'applicazione.

In questo esercizio si lavorerà su un'applicazione Raccolta foto per visualizzare le foto. Si inizierà con il modello di progetto ASP.NET MVC 4, quindi si aggiungerà una funzionalità per recuperare le foto da un servizio e visualizzarle nella home page.

Nell'esercizio seguente si aggiornerà questa soluzione per migliorare la modalità di visualizzazione nei dispositivi mobili.

Attività 1 - Creazione di un servizio fotografico fittizio

In questa attività verrà creata una simulazione del servizio foto per recuperare il contenuto che verrà visualizzato nella raccolta. A tale scopo, si aggiungerà un nuovo controller che restituirà semplicemente un file JSON con i dati di ogni foto.

  1. Aprire Visual Studio se non è già aperto.

  2. Selezionare il file | Nuovo | Comando di menu Progetto . Nella finestra di dialogo Nuovo progetto selezionare Visual C# | Modello Web nell'albero del riquadro sinistro e scegliere ASP.NET'applicazione Web MVC 4. Assegnare al progetto il nome PhotoGallery, selezionare un percorso (o lasciare l'impostazione predefinita) e fare clic su OK. In alternativa, è possibile continuare a lavorare dalla soluzione dell'applicazione Internet MVC 4 esistente ASP.NET dall'esercizio 1 e ignorare il passaggio successivo.

  3. Nella finestra di dialogo Nuovo ASP.NET progetto MVC 4 selezionare il modello di progetto Applicazione Internet e fare clic su OK. Assicurarsi di avere selezionato Razor come motore di visualizzazione.

  4. Nella Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Data del progetto e scegliere Aggiungi | Elemento esistente. Passare alla cartella Source\Assets\App_Data di questo lab e aggiungere il file Photos.json .

  5. Creare un nuovo controller con il nome PhotoController. A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Controller , passare a Aggiungi e selezionare Controller. Completare il nome del controller, lasciare vuoto il modello di controller MVC e fare clic su Aggiungi.

    Aggiunta di PhotoController

    Aggiunta di PhotoController

  6. Sostituire il metodo Index con l'azione Raccolta seguente e restituire il contenuto dal file JSON aggiunto di recente al progetto.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex02 - Azione raccolta)

    public class PhotoController : Controller
{
   public ActionResult Gallery()
   {
      return this.File("~/App_Data/Photos.json", "application/json");
   }
}

  7. Premere F5 per eseguire la soluzione e quindi passare all'URL seguente per testare il servizio foto fittizio: http://localhost:[port]/photo/gallery (il valore [porta] dipende dalla porta corrente in cui è stata avviata l'applicazione. La richiesta a questo URL deve recuperare il contenuto del file Photos.json .

    Test del servizio foto fittizio

    Test del servizio foto fittizio

In un'implementazione reale è possibile usare API Web ASP.NET per implementare il servizio Raccolta foto. ASP.NET Web API è un framework che consente di creare facilmente servizi HTTP in grado di raggiungere un ampio numero di client, inclusi browser e dispositivi mobili. API Web ASP.NET è la piattaforma ideale per compilare applicazioni RESTful in .NET Framework.

Attività 2 - Visualizzazione della raccolta foto

In questa attività si aggiornerà la home page per visualizzare la raccolta foto usando il servizio fittizio creato nella prima attività di questo esercizio. Si aggiungeranno file di modello e si aggiorneranno le visualizzazioni della raccolta.

  1. In Visual Studio premere MAIUSC + F5 per arrestare il debug dell'applicazione.

  2. Creare la classe Photo nella cartella Models . A tale scopo, fare clic con il pulsante destro del mouse sulla cartella Modelli , scegliere Aggiungi e fare clic su Classe. Impostare quindi il nome su Photo.cs e fare clic su Aggiungi.

  3. Aggiungere i membri seguenti alla classe Photo .

    (Frammento di codice - ASP.NET lab MVC 4 - Ex02 - Modello fotografico)

    public class Photo
{
    public string Title { get; set; }

    public string FileName { get; set; }

    public string Description { get; set; }

    public DateTime UploadDate { get; set; }
}

  4. Aprire il file HomeController.cs dalla cartella Controller.

  5. Aggiungere i seguenti elementi utilizzando le istruzioni.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex02 - HomeController Usings)

    using System.Net.Http;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using PhotoGallery.Models;

  6. Aggiornare l'azione Index per usare HttpClient per recuperare i dati della raccolta e quindi usare JavaScriptSerializer per deserializzare i dati nel modello di visualizzazione.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex02 - Azione indice)

    public ActionResult Index()
{
    var client = new HttpClient();
    var response = client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme)).Result;
    var value = response.Content.ReadAsStringAsync().Result;

    var result = JsonConvert.DeserializeObject<List<Photo>>(value);

    return View(result);
}

  7. Aprire il file Index.cshtml che si trova nella cartella Views\Home e sostituire tutto il contenuto con il codice seguente.

    Questo codice scorre tutte le foto recuperate dal servizio e le visualizza in un elenco non ordinato.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex02 - Elenco foto)

    @model List<PhotoGallery.Models.Photo>
@{
    ViewBag.Title = "Photo Gallery";
}

<ul class="thumbnails">
    @foreach (var photo in Model)
    {
        <li class="item">
            <a href="@Url.Content("~/photos/" + photo.FileName)">
                <img alt="@photo.Description" src="@Url.Content("~/photos/" + photo.FileName)" class="thumbnail-border" width="180" />
            </a>
                <span class="image-overlay">@photo.Title</span>
        </li>
    }
</ul>

  8. Nella Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Contenuto del progetto e scegliere Aggiungi | Elemento esistente. Passare alla cartella Source\Assets\Content di questo lab e aggiungere il file Site.css . Sarà necessario confermare la sostituzione. Se si dispone del file Site.css aperto, sarà necessario confermare anche di ricaricare il file.

  9. Aprire Esplora file e copiare l'intera cartella Photos nella cartella Source\Assets di questo lab nella cartella radice del progetto in Esplora soluzioni.

  10. Eseguire l'applicazione. Dovrebbe essere visualizzata la home page che visualizza le foto nella raccolta.

    Raccolta foto

    Raccolta foto

  11. In Visual Studio premere MAIUSC + F5 per arrestare il debug dell'applicazione.

Esercizio 3: Aggiunta del supporto per i dispositivi mobili

Uno degli aggiornamenti principali di ASP.NET MVC 4 è il supporto per lo sviluppo di dispositivi mobili. In questo esercizio si esamineranno ASP.NET nuove funzionalità di MVC 4 per le applicazioni per dispositivi mobili estendendo la soluzione PhotoGallery creata nell'esercizio precedente.

Attività 1 - Installazione di jQuery Mobile in un'applicazione ASP.NET MVC 4

  1. Aprire la soluzione Begin disponibile nella cartella Source/Ex3-MobileSupport/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.

    1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.

    2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.

    3. Compilare infine la soluzione facendo clic su Compila | soluzione.

      Nota

      Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.

  2. Aprire la console Gestione pacchetti facendo clic sull'opzione di menu Strumenti>NuGet Gestione pacchetti> Gestione pacchetti Console.

    Apertura della console di Gestione pacchetti NuGet

    Apertura della console di Gestione pacchetti NuGet

  3. Nella console Gestione pacchetti eseguire il comando seguente per installare il pacchetto jQuery.Mobile.MVC.

    jQuery Mobile è una libreria open source per la creazione di un'interfaccia utente Web ottimizzata per il tocco. Il pacchetto NuGet jQuery.Mobile.MVC include helper per l'uso di jQuery Mobile con un'applicazione MVC 4 ASP.NET.

    Nota

    Eseguendo il comando seguente, si scarica la libreria jQuery.Mobile.MVC da Nuget.

    Pomeriggio

    Install-Package jQuery.Mobile.MVC

    Questo comando installa jQuery Mobile e alcuni file helper, tra cui i seguenti:

    • Views/Shared/_Layout.Mobile.cshtml: è un layout basato su jQuery Mobile ottimizzato per uno schermo più piccolo. Quando il sito Web riceve una richiesta da un browser per dispositivi mobili, sostituirà il layout originale (_Layout.cshtml) con questo.

    • Componente del commutatore di visualizzazione: è costituito dalla visualizzazione parziale Views/Shared/_ViewSwitcher.cshtml e dal controller ViewSwitcherController.cs . Questo componente mostrerà un collegamento nei browser per dispositivi mobili per consentire agli utenti di passare alla versione desktop della pagina.
      Progetto Raccolta foto con supporto per dispositivi mobili

      Progetto Raccolta foto con supporto per dispositivi mobili

  4. Registrare i bundle per dispositivi mobili. A tale scopo, aprire il file Global.asax.cs e aggiungere la riga seguente.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex03 - Registrare bundle per dispositivi mobili)

    protected void Application_Start()
{
     AreaRegistration.RegisterAllAreas();

     WebApiConfig.Register(GlobalConfiguration.Configuration);
     FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
     RouteConfig.RegisterRoutes(RouteTable.Routes);
     BundleConfig.RegisterBundles(BundleTable.Bundles);
     BundleMobileConfig.RegisterBundles(BundleTable.Bundles);
     AuthConfig.RegisterAuth();
}

  5. Eseguire l'applicazione usando un Web browser desktop.

  6. Aprire l'emulatore di Windows Phone 7, disponibile nel menu Start | Tutti i programmi | Windows Phone SDK 7.1 | Emulatore di Windows Phone.

  7. Nella schermata start del telefono aprire Internet Explorer. Controllare l'URL in cui l'applicazione è stata avviata e passare a tale URL con il browser del telefono ( ad esempio http://localhost:[PortNumber]/).

    Si noterà che l'applicazione avrà un aspetto diverso nell'emulatore di Windows Phone, perché jQuery.Mobile.MVC ha creato nuovi asset nel progetto che mostrano le visualizzazioni ottimizzate per i dispositivi mobili.

    Si noti il messaggio nella parte superiore del telefono, che mostra il collegamento che passa alla visualizzazione Desktop. Inoltre, il layout _Layout.Mobile.cshtml creato dal pacchetto installato include un layout diverso nell'applicazione.

    Nota

    Finora non c'è alcun collegamento per tornare alla visualizzazione mobile. Verrà incluso nelle versioni successive.

    Visualizzazione mobile della home page della Raccolta foto

    Visualizzazione mobile della home page della Raccolta foto

  8. In Visual Studio premere MAIUSC + F5 per arrestare il debug dell'applicazione.

Attività 2 - Creazione di visualizzazioni per dispositivi mobili

In questa attività si creerà una versione mobile della visualizzazione indice con il contenuto adattato per un aspetto migliore nei dispositivi mobili.

  1. Copiare la vista Views\Home\Index.cshtml e incollarla per creare una copia, rinominare il nuovo file in Index.Mobile.cshtml.

  2. Aprire la nuova vista Index.Mobile.cshtml creata e sostituire il tag ul> esistente <con questo codice. In questo modo, si aggiornerà il <tag ul> con le annotazioni dei dati jQuery Mobile per usare i temi per dispositivi mobili di jQuery.

    <ul data-role="listview" data-inset="true" data-filter="true">

    Nota

    Si noti che:

    • L'attributo del ruolo dati impostato su listview eseguirà il rendering dell'elenco usando gli stili listview.

    • L'attributo data-inset impostato su true mostrerà l'elenco con bordo arrotondato e margine.

    • L'attributo filtro dati impostato su true genererà una casella di ricerca.

    Per altre informazioni sulle convenzioni jQuery Mobile, vedere la documentazione del progetto: [https://demos.jquerymobile.com/1.1.1/](https://demos.jquerymobile.com/1.1.1/)

  3. Premere CTRL+S per salvare le modifiche.

  4. Passare all'emulatore di Windows Phone e aggiornare il sito. Si noti il nuovo aspetto dell'elenco della raccolta, nonché la nuova casella di ricerca che si trova nella parte superiore. Digitare quindi una parola nella casella di ricerca (ad esempio , Tulips) per avviare una ricerca nella raccolta foto.

    Raccolta che usa lo stile listview con il filtro

    Raccolta che usa lo stile listview con il filtro

    Per riepilogare, è stata usata la ricetta View Mobilizer per creare una copia della visualizzazione Indice con il suffisso "mobile". Questo suffisso indica a ASP.NET MVC 4 che ogni richiesta generata da un dispositivo mobile userà questa copia dell'indice. Inoltre, è stata aggiornata la versione mobile della visualizzazione Indice per usare jQuery Mobile per migliorare l'aspetto del sito nei dispositivi mobili.

  5. Tornare a Visual Studio e aprire Site.Mobile.css nella cartella Contenuto .

  6. Correzione del posizionamento del titolo della foto per renderlo visualizzato sul lato destro dell'immagine. A tale scopo, aggiungere il codice seguente al file Site.Mobile.css .

    CSS

    .ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 0px !important;
}

li.item span.image-overlay
{
    position:relative;
    left:100px;
    top:-40px;
    height:0px;
    display:block;
}

  7. Premere CTRL+S per salvare le modifiche.

  8. Tornare all'emulatore di Windows Phone e aggiornare il sito. Si noti che il titolo della foto è posizionato correttamente ora.

    Titolo posizionato sul lato destro dell'immagine

    Titolo posizionato sul lato destro dell'immagine

Attività 3 - Temi per dispositivi mobili jQuery

Ogni layout e widget in jQuery Mobile è progettato intorno a un nuovo framework CSS orientato agli oggetti che consente di applicare un tema di progettazione visiva unificato completo a siti e applicazioni.

Il tema predefinito di jQuery Mobile include 5 campioni specificati (a, b, c, d, e) per riferimento rapido.

In questa attività si aggiornerà il layout per dispositivi mobili per usare un tema diverso da quello predefinito.

  1. Tornare a Visual Studio.

  2. Aprire il file _Layout.Mobile.cshtml che si trova in Views\Shared.

  3. Trovare l'elemento div con il ruolo dati impostato su "page" e aggiornare il tema dati in "e".

    <div data-role="page" data-theme="e">

  4. Premere CTRL+S per salvare le modifiche.

  5. Aggiornare il sito nell'emulatore di Windows Phone e notare la nuova combinazione di colori.

    Layout per dispositivi mobili con una combinazione di colori diversa

    Layout per dispositivi mobili con una combinazione di colori diversa

Attività 4 - Uso del componente View-Switcher e delle funzionalità di override del browser

Una convenzione per le pagine Web ottimizzate per dispositivi mobili consiste nell'aggiungere un collegamento il cui testo è simile a Visualizzazione desktop o Modalità sito completo che consente agli utenti di passare a una versione desktop della pagina. Il pacchetto jQuery.Mobile.MVC include un componente view-switcher di esempio usato per questo scopo nella visualizzazione _Layout.Mobile.cshtml.

Collegamento per passare alla visualizzazione desktop

Collegamento per passare alla visualizzazione desktop

Il commutatore di visualizzazione usa una nuova funzionalità denominata Override del browser. Questa funzionalità consente all'applicazione di considerare le richieste come se provenissero da un browser diverso (agente utente) rispetto a quello da cui provengono effettivamente.

In questa attività si esaminerà l'implementazione di esempio di un commutatore di visualizzazione aggiunto da jQuery.Mobile.MVC e le nuove funzionalità di override del browser in ASP.NET MVC 4.

  1. Tornare a Visual Studio.

  2. Aprire la vista _Layout.Mobile.cshtml che si trova nella cartella Views\Shared e osservare il componente view-switcher a cui viene fatto riferimento come visualizzazione parziale.

    Layout per dispositivi mobili con componente View-Switcher

    Layout per dispositivi mobili con componente View-Switcher

  3. Aprire la visualizzazione parziale _ViewSwitcher.cshtml .

    La visualizzazione parziale usa il nuovo metodo ViewContext.HttpContext.GetOverriddenBrowser() per determinare l'origine della richiesta Web e visualizzare il collegamento corrispondente per passare alle visualizzazioni Desktop o Mobile.

    Il metodo GetOverriddenBrowser restituisce un'istanza HttpBrowserCapabilitiesBase che corrisponde all'agente utente attualmente impostato per la richiesta (effettiva o sottoposta a override). È possibile usare questo valore per ottenere proprietà come IsMobileDevice.

    Visualizzazione parziale viewSwitcher

    Visualizzazione parziale viewSwitcher

  4. Aprire la classe ViewSwitcherController.cs che si trova nella cartella Controllers . Controllare che l'azione SwitchView venga chiamata dal collegamento nel componente ViewSwitcher e notare i nuovi metodi HttpContext.

    • Il metodo HttpContext.ClearOverriddenBrowser() rimuove qualsiasi agente utente sottoposto a override per la richiesta corrente.

    • Il metodo HttpContext.SetOverriddenBrowser() esegue l'override del valore effettivo dell'agente utente della richiesta usando l'agente utente specificato.
      ViewSwitcher Controller
      ViewSwitcher Controller

      L'override del browser è una funzionalità di base di ASP.NET MVC 4, disponibile anche se non si installa il pacchetto jQuery.Mobile.MVC. Tuttavia, questa funzionalità influisce solo sulla visualizzazione, il layout e la visualizzazione parziale e non influisce sulle funzionalità che dipendono dall'oggetto Request.Browser.

Attività 5 - Aggiunta del commutatore di visualizzazione nella visualizzazione desktop

In questa attività si aggiornerà il layout del desktop in modo da includere il commutatore di visualizzazione. Ciò consentirà agli utenti di dispositivi mobili di tornare alla visualizzazione per dispositivi mobili durante l'esplorazione della visualizzazione desktop.

  1. Aggiornare il sito nell'emulatore di Windows Phone.

  2. Fare clic sul collegamento Visualizzazione desktop nella parte superiore della raccolta. Si noti che nella visualizzazione desktop non è presente alcun commutatore di visualizzazione per consentire di tornare alla visualizzazione per dispositivi mobili.

  3. Tornare a Visual Studio e aprire la vista _Layout.cshtml .

  4. Trovare la sezione login e inserire una chiamata per eseguire il rendering della visualizzazione parziale _ViewSwitcher sotto la visualizzazione parziale _LogOnPartial . Premere QUINDI CTRL+S per salvare le modifiche.

    <div class="float-right">
    <section id="login">
        @Html.Partial("_LogOnPartial")

        @Html.Partial("_ViewSwitcher")
    </section>
    <nav>

  5. Premere CTRL+S per salvare le modifiche.

  6. Aggiornare la pagina nell'emulatore di Windows Phone e fare doppio clic sullo schermo per ingrandire. Si noti che la home page mostra ora il collegamento Visualizzazione dispositivi mobili che passa dalla visualizzazione mobile alla visualizzazione desktop.

    Visualizza commutatore di cui è stato eseguito il rendering nella visualizzazione desktop

    Visualizza commutatore di cui è stato eseguito il rendering nella visualizzazione desktop

  7. Passare di nuovo alla visualizzazione Mobile e passare alla pagina Informazioni (http://localhost[porta]/Home/Informazioni). Si noti che, anche se non è stata creata una visualizzazione About.Mobile.cshtml, la pagina Informazioni viene visualizzata usando il layout per dispositivi mobili (_Layout.Mobile.cshtml).

    Pagina About

    Pagina Informazioni

  8. Aprire infine il sito in un Web browser desktop. Si noti che nessuno degli aggiornamenti precedenti ha interessato la visualizzazione desktop.

    Visualizzazione desktop PhotoGallery

    Visualizzazione desktop PhotoGallery

Attività 6 - Creazione di nuove modalità di visualizzazione

La nuova funzionalità modalità di visualizzazione consente a un'applicazione di selezionare le visualizzazioni a seconda del browser che genera la richiesta. Ad esempio, se un browser desktop richiede la home page, l'applicazione restituirà il modello Views\Home\Index.cshtml . Quindi, se un browser per dispositivi mobili richiede la home page, l'applicazione restituirà il modello Views\Home\Index.mobile.cshtml .

In questa attività si creerà un layout personalizzato per i dispositivi iPhone e sarà necessario simulare le richieste dai dispositivi iPhone. A tale scopo, è possibile usare un emulatore/simulatore iPhone (ad esempio Il simulatore di dispositivi mobili elettrici) o un browser con componenti aggiuntivi che modificano l'agente utente. Per istruzioni su come impostare la stringa dell'agente utente in un browser Safari per emulare un iPhone, vedere How to let Safari pretend it's IE nel blog di David Alison.

Si noti che questa attività è facoltativa ed è possibile continuare in tutto il lab senza eseguirla.

  1. In Visual Studio premere MAIUSC + F5 per arrestare il debug dell'applicazione.

  2. Aprire Global.asax.cs e aggiungere l'istruzione using seguente.

    using System.Web.WebPages;

  3. Aggiungere il codice evidenziato seguente nel metodo Application_Start.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex03 - iPhone DisplayMode)

    protected void Application_Start()
{
    // ...

    DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
    {
        ContextCondition = context =>
            context.Request.UserAgent != null &&
            context.Request.UserAgent.IndexOf("iPhone", StringComparison.OrdinalIgnoreCase) >= 0
    });
}

È stato registrato un nuovo oggetto DefaultDisplayMode denominato "iPhone", all'interno dell'elenco statico DisplayModeProvider.Instance.Modes , che verrà confrontato con ogni richiesta in ingresso. Se la richiesta in ingresso contiene la stringa "iPhone", ASP.NET MVC troverà le visualizzazioni il cui nome contiene il suffisso "iPhone". Il parametro 0 indica come specifica è la nuova modalità; Ad esempio, questa visualizzazione è più specifica della regola generale ".mobile" che corrisponde alle richieste dai dispositivi mobili.

Dopo l'esecuzione di questo codice, quando un browser iPhone genera una richiesta, l'applicazione userà il layout Views\Shared\_Layout.iPhone.cshtml che verrà creato nei passaggi successivi.

Nota

Questo modo di testare la richiesta per iPhone è stato semplificato a scopo dimostrativo e potrebbe non funzionare come previsto per ogni stringa dell'agente utente iPhone (ad esempio il test fa distinzione tra maiuscole e minuscole).

  1. Creare una copia del file _Layout.Mobile.cshtml nella cartella Views\Shared e rinominare la copia in "_Layout.iPhone.cshtml".
  2. Aprire _Layout.iPhone.cshtml creato nel passaggio precedente.
  3. Trovare l'elemento div con l'attributo data-role impostato su page e modificare l'attributo data-theme in "a".
<body> 
    <div data-role="page" data-theme="a">
        @Html.Partial("_ViewSwitcher")
...

Ora sono disponibili 3 layout nell'applicazione ASP.NET MVC 4:

  1. _Layout.cshtml: layout predefinito usato per i browser desktop.

  2. _Layout.mobile.cshtml: layout predefinito usato per i dispositivi mobili.

  3. _Layout.iPhone.cshtml: layout specifico per i dispositivi iPhone, usando una combinazione di colori diversa per differenziarsi da _Layout.mobile.cshtml.

  4. Premere F5 per eseguire l'applicazione ed esplorare il sito nell'emulatore di Windows Phone.

  5. Aprire un simulatore iPhone (vedi Appendice C per istruzioni su come installare e configurare un simulatore iPhone) e passare anche al sito. Si noti che ogni telefono usa il modello specifico.

    Uso di-different-views-for-each-mobile-device2

    Uso di visualizzazioni diverse per ogni dispositivo mobile

Esercizio 4: Uso di controller asincroni

Microsoft .NET Framework 4.5 introduce nuove funzionalità del linguaggio in C# e Visual Basic per fornire una nuova base per l'asincronia nella programmazione .NET. Questa nuova base rende la programmazione asincrona simile a - e circa - semplice come la programmazione sincrona. È ora possibile scrivere metodi di azione asincroni in ASP.NET MVC 4 usando la classe AsyncController . È possibile usare metodi di azione asincroni per le richieste non associate alla CPU a esecuzione prolungata. In questo modo si evita di bloccare l'esecuzione del lavoro del server Web durante l'elaborazione della richiesta. La classe AsyncController viene in genere usata per le chiamate al servizio Web a esecuzione prolungata.

Questo esercizio illustra le nozioni di base dell'operazione asincrona in ASP.NET MVC 4. Per un'analisi più approfondita, vedere l'articolo seguente: [https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx](https://msdn.microsoft.com/library/ee728598%28v=vs.100%29.aspx)

Attività 1 - Implementazione di un controller asincrono

  1. Aprire la soluzione Begin disponibile nella cartella Source/Ex4-Async/Begin/ . In caso contrario, è possibile continuare a usare la soluzione End ottenuta completando l'esercizio precedente.

    1. Se è stata aperta la soluzione Begin fornita, è necessario scaricare alcuni pacchetti NuGet mancanti prima di continuare. A tale scopo, fare clic sul menu Progetto e selezionare Gestisci pacchetti NuGet.

    2. Nella finestra di dialogo Gestisci pacchetti NuGet fare clic su Ripristina per scaricare i pacchetti mancanti.

    3. Compilare infine la soluzione facendo clic su Compila | soluzione.

      Nota

      Uno dei vantaggi dell'uso di NuGet è che non è necessario spedire tutte le librerie nel progetto, riducendo le dimensioni del progetto. Con NuGet Power Tools, specificando le versioni del pacchetto nel file Packages.config, sarà possibile scaricare tutte le librerie necessarie la prima volta che si esegue il progetto. Questo è il motivo per cui è necessario eseguire questi passaggi dopo aver aperto una soluzione esistente da questo lab.

  2. Aprire la classe HomeController.cs dalla cartella Controllers .

  3. Aggiungere l'istruzione using seguente.

    using System.Threading.Tasks;

  4. Aggiornare la classe HomeController per ereditare da AsyncController. I controller che derivano da AsyncController abilitano ASP.NET per elaborare le richieste asincrone e possono comunque gestire metodi di azione sincroni.

    public class HomeController : AsyncController
{

  5. Aggiungere la parola chiave asincrona al metodo Index e renderla restituita il tipo Task<ActionResult>.

    public async Task<ActionResult> Index()
{
    ...

    Nota

    La parola chiave async è una delle nuove parole chiave fornite da .NET Framework 4.5. Indica al compilatore che questo metodo contiene codice asincrono. Un oggetto Task rappresenta un'operazione asincrona che può essere completata in un determinato momento in futuro.

  6. Sostituire il client. Chiamare GetAsync() con la versione asincrona completa usando la parola chiave await, come illustrato di seguito.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex04 - GetAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    ...

    Nota

    Nella versione precedente è stata usata la proprietà Result dell'oggetto Task per bloccare il thread fino a quando non viene restituito il risultato (versione di sincronizzazione).

    L'aggiunta della parola chiave await indica al compilatore di attendere in modo asincrono l'attività restituita dalla chiamata al metodo. Ciò significa che il resto del codice verrà eseguito come callback solo dopo il completamento del metodo atteso. Un'altra cosa da notare è che non è necessario modificare il blocco try-catch per fare questo lavoro: le eccezioni che si verificano in background o in primo piano verranno ancora rilevate senza alcun lavoro aggiuntivo usando un gestore fornito dal framework.

  7. Modificare il codice per continuare con l'implementazione asincrona sostituendo le righe con il nuovo codice, come illustrato di seguito

    (Frammento di codice - ASP.NET lab MVC 4 - Ex04 - ReadAsStringAsync)

    public async Task<ActionResult> Index()
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme));
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  8. Eseguire l'applicazione. Non si noteranno modifiche importanti, ma il codice non bloccherà un thread dal pool di thread rendendo un utilizzo migliore delle risorse server e migliorando le prestazioni.

    Nota

    Per altre informazioni sulle nuove funzionalità di programmazione asincrona, vedere il lab "Programmazione asincrona in .NET 4.5 con C# e Visual Basic" incluso in Visual Studio Training Kit.

Attività 2 - Gestione dei timeout con i token di annullamento

I metodi di azione asincroni che restituiscono istanze di Task possono supportare anche i timeout. In questa attività si aggiornerà il codice del metodo Index per gestire uno scenario di timeout usando un token di annullamento.

  1. Tornare a Visual Studio e premere MAIUSC + F5 per arrestare il debug.

  2. Aggiungere l'istruzione using seguente al file HomeController.cs .

    using System.Threading;

  3. Aggiornare l'azione Index per ricevere un argomento CancellationToken .

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    ...

  4. Aggiornare la chiamata GetAsync per passare il token di annullamento.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex04 - SendAsync con CancellationToken)

    public async Task<ActionResult> Index(CancellationToken cancellationToken)
{
    var client = new HttpClient();
    var response = await client.GetAsync(Url.Action("gallery", "photo", null, Request.Url.Scheme), cancellationToken);
    var value = await response.Content.ReadAsStringAsync();
    var result = await JsonConvert.DeserializeObjectAsync<List<Photo>>(value);

    return View(result);
}

  5. Decorare il metodo Index con un attributo AsyncTimeout impostato su 500 millisecondi e un attributo HandleError configurato per gestire TaskCanceledException reindirizzando a una visualizzazione TimedOut.

    (Frammento di codice - ASP.NET lab MVC 4 - Ex04 - Attributi)

    [AsyncTimeout(500)]
[HandleError(ExceptionType = typeof(TimeoutException), View = "TimedOut")]
public async Task<ActionResult> Index(CancellationToken cancellationToken)
{

  6. Aprire la classe PhotoController e aggiornare il metodo Gallery per ritardare l'esecuzione di 1000 millisecondi (1 secondo) per simulare un'attività a esecuzione prolungata.

    public ActionResult Gallery()
{
    System.Threading.Thread.Sleep(1000);

    return this.File("~/App_Data/Photos.json", "application/json");
}

  7. Aprire il file Web.config e abilitare gli errori personalizzati aggiungendo l'elemento seguente.

    <system.web>
  <customErrors mode="On"></customErrors>
  ...

  8. Creare una nuova visualizzazione in Views\Shared denominata TimedOut e usare il layout predefinito. Nella Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Views\Shared e scegliere Aggiungi | Visualizza.

    Uso di visualizzazioni diverse per ogni dispositivo mobile

    Uso di visualizzazioni diverse per ogni dispositivo mobile

  9. Aggiornare il contenuto della visualizzazione TimedOut come illustrato di seguito.

    @{
    ViewBag.Title = "TimedOut";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Timed Out!</h2>

  10. Eseguire l'applicazione e passare all'URL radice. Dopo aver aggiunto un thread.sleep di 1000 millisecondi, si otterrà un errore di timeout, generato dall'attributo AsyncTimeout e intercettabile dall'attributo HandleError .

    Eccezione di timeout gestita

    Eccezione di timeout gestita

Nota

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

Riepilogo

In questo lab pratico sono state osservate alcune delle nuove funzionalità residenti in ASP.NET MVC 4. Sono stati illustrati i concetti seguenti:

  • Sfruttare i miglioramenti apportati ai modelli di progetto MVC ASP.NET, incluso il nuovo modello di progetto dell'applicazione per dispositivi mobili
  • Usare l'attributo viewport HTML5 e le query sui supporti CSS per migliorare la visualizzazione nei dispositivi mobili
  • Usare jQuery Mobile per miglioramenti progressivi e per la creazione di un'interfaccia utente Web ottimizzata per il tocco
  • Creare visualizzazioni specifiche per dispositivi mobili
  • Usare il componente view-switcher per alternare le visualizzazioni per dispositivi mobili e desktop nell'applicazione
  • Creare controller asincroni usando il supporto delle attività

Appendice A: Uso di frammenti di codice

Con i frammenti di codice è disponibile tutto il codice necessario a portata di mano. Il documento del lab indica esattamente quando è possibile usarli, come illustrato nella figura seguente.

Uso dei frammenti di codice di Visual Studio per inserire codice nel progetto

Uso dei frammenti di codice di Visual Studio per inserire codice nel progetto

Per aggiungere un frammento di codice usando la tastiera (solo C#)

  1. Posizionare il cursore in cui si desidera inserire il codice.
  2. Iniziare a digitare il nome del frammento (senza spazi o trattini).
  3. Guardare come IntelliSense visualizza i nomi dei frammenti di codice corrispondenti.
  4. Selezionare il frammento corretto (o continuare a digitare fino a quando non viene selezionato il nome dell'intero frammento).
  5. Premere il tasto TAB due volte per inserire il frammento di codice nella posizione del cursore.

Iniziare a digitare il nome del frammento

Iniziare a digitare il nome del frammento

Premere TAB per selezionare il frammento di codice evidenziato

Premere TAB per selezionare il frammento di codice evidenziato

Premere di nuovo TAB e il frammento di codice verrà espanso

Premere di nuovo TAB e il frammento di codice verrà espanso

Per aggiungere un frammento di codice usando il mouse (C#, Visual Basic e XML)

  1. Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice.
  2. Selezionare Inserisci frammento di codice seguito da Frammenti di codice personali.
  3. Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso.

Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice e selezionare Inserisci frammento

Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice e selezionare Inserisci frammento

Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso

Selezionare il frammento di codice pertinente dall'elenco facendo clic su di esso

Appendice B: 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.

  1. 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".

  2. 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.

  3. Dopo aver aperto Il programma di installazione della piattaforma Web, fare clic su Installa per avviare l'installazione.

    Installare Visual Studio Express

    Installare Visual Studio Express

  4. Leggere tutte le licenze e le condizioni dei prodotti e fare clic su Accetto per continuare.

    Accettazione delle condizioni di licenza

    Accettazione delle condizioni di licenza

  5. Attendere il completamento del processo di download e installazione.

    Stato di installazione

    Stato dell'installazione

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

    Installazione completata

    Installazione completata

  7. Fare clic su Esci per chiudere Programma di installazione piattaforma Web.

  8. 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

    Riquadro di VS Express per Il Web

Appendice C: Installazione del simulatore WebMatrix 2 e iPhone

Per eseguire il sito in un dispositivo iPhone simulato, è possibile usare l'estensione WebMatrix "Electric Mobile Simulator for the iPhone". È anche possibile configurare la stessa estensione per eseguire il simulatore da Visual Studio 2012.

Attività 1 - Installazione di WebMatrix 2

  1. 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 "WebMatrix 2".

  2. 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.

  3. Dopo aver aperto Il programma di installazione della piattaforma Web, fare clic su Installa per avviare l'installazione.

    Installare WebMatrix 2

    Installare WebMatrix 2

  4. Leggere tutte le licenze e le condizioni dei prodotti e fare clic su Accetto per continuare.

    Accettazione delle condizioni di licenza

    Accettazione delle condizioni di licenza

  5. Attendere il completamento del processo di download e installazione.

    Stato installazione

    Stato dell'installazione

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

    Installazione completata

    Installazione completata

  7. Fare clic su Esci per chiudere Programma di installazione piattaforma Web.

Attività 2 - Installazione dell'estensione del simulatore iPhone

  1. Eseguire WebMatrix e aprire qualsiasi sito Web esistente o crearne uno nuovo.

  2. Fare clic sul pulsante Esegui sulla barra multifunzione Home e selezionare Aggiungi nuovo.

    Aggiunta di una nuova estensione WebMatrix

    Aggiunta di una nuova estensione WebMatrix

  3. Selezionare iPhone Simulatore e fare clic su Installa.

    Esplorazione delle estensioni WebMatrix

    Esplorazione delle estensioni WebMatrix

  4. Nei dettagli del pacchetto fare clic su Installa per continuare con l'installazione dell'estensione.

    Estensione simulatore iPhone

    Estensione simulatore iPhone

  5. Leggere e accettare il contratto di licenza dell'estensione.

    Contratto di licenza dell'estensione WebMatrix

    Contratto di licenza dell'estensione WebMatrix

  6. A questo punto, è possibile eseguire il sito Web da WebMatrix usando l'opzione simulatore iPhone.

    Eseguire con iPhone

    Eseguire con iPhone

Attività 3 - Configurazione di Visual Studio 2012 per l'esecuzione del simulatore iPhone

  1. Aprire Visual Studio 2012 e aprire qualsiasi sito Web o creare un nuovo progetto.

  2. Fare clic sulla freccia giù dal pulsante Esegui e selezionare Sfoglia con.

    Sfoglia con

    Sfoglia con

  3. Nella finestra di dialogo "Sfoglia con" fare clic su Aggiungi.

  4. Nella finestra di dialogo "Aggiungi programma" usare i valori seguenti:

    • Programma: C:\Users*{CurrentUser}*\AppData\Local\Microsoft\WebMatrix\Extensions\20\iPhoneSimulator\ElectricMobileSimSim\ElectricMobileSim.exe (aggiornare il percorso di conseguenza)

    • Argomenti: "1"

    • Nome descrittivo: simulatore iPhone

      Aggiungi programma

      Aggiungere il programma con cui esplorare

  5. Fare clic su OK e chiudere le finestre di dialogo.

  6. Ora è possibile eseguire le applicazioni Web nel simulatore iPhone da Visual Studio 2012.

    Sfoglia con simulatore iPhone

    Sfoglia con simulatore iPhone

Appendice D: 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

  1. 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 a Windows portale di Azure

    Accedere al portale di gestione di Windows Azure

  2. Fare clic su Nuovo sulla barra dei comandi.

    Creazione di un nuovo sito Web

    Creazione di un nuovo sito Web

  3. 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

    Creazione di un nuovo sito Web con creazione rapida

  4. Attendere la creazione del nuovo sito Web.

  5. 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

    Esplorazione del nuovo sito Web

    Sito Web in esecuzione

    Sito Web in esecuzione

  6. 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 dei siti Web

    Apertura delle pagine di gestione del sito Web

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

    Download del profilo di pubblicazione del sito Web

  8. 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

    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à.

  1. È 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

    Dashboard del server database SQL

  2. 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 Start IP Address and End IP Address (Indirizzo IP iniziale e Indirizzo IP finale) e fare clic sul add-client-ip-address-ok-buttonpulsante .

    Aggiunta dell'indirizzo IP client

    Aggiunta dell'indirizzo IP client

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

    Conferma modifiche

    Conferma modifiche

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

  1. 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 dell'applicazione

    Pubblicazione del sito Web

  2. Importare il profilo di pubblicazione salvato nella prima attività.

    Importazione del profilo di pubblicazione

    Importazione del profilo di pubblicazione

  3. 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

    Convalida della connessione

  4. 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

    Configurazione distribuzione Web

  5. 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

      Configurazione di stringa di connessione di destinazione

  6. Quindi fare clic su OK. Quando viene richiesto di creare il database, fare clic su Sì.

    Creazione del database

    Creazione del database

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

    Stringa di connessione che punta a database SQL

  8. Nella pagina Anteprima fare clic su Pubblica.

    Pubblicazione dell'applicazione Web

    Pubblicazione dell'applicazione Web

  9. Al termine del processo di pubblicazione, il browser predefinito aprirà il sito Web pubblicato.

    Applicazione pubblicata in Windows Azure

    Applicazione pubblicata in Windows Azure