Lab pratico: One ASP.NET: integrazione di Web Forms ASP.NET, MVC e API Web

by Web Camps Team

Scaricare il Kit di formazione per i campi Web

ASP.NET è un framework per la creazione di siti Web, app e servizi che usano tecnologie specializzate, ad esempio MVC, API Web e altri. Con l'espansione ASP.NET si è visto sin dalla sua creazione e l'esigenza di avere integrato queste tecnologie, ci sono stati recenti sforzi per lavorare verso una ASP.NET.

Visual Studio 2013 introduce un nuovo sistema di progetto unificato che consente di compilare un'applicazione e di usare tutte le tecnologie ASP.NET in un unico progetto. Questa funzionalità elimina la necessità di scegliere una tecnologia all'inizio di un progetto e attenersi a tale tecnologia e incoraggia invece l'uso di più framework ASP.NET all'interno di un progetto.

Tutti i frammenti e il codice di esempio sono inclusi nel Web Camps Training Kit, disponibile all'indirizzo https://aka.ms/webcamps-training-kit.

Panoramica

Obiettivi

In questo lab pratico si apprenderà come:

• Creare un sito Web basato sul tipo di progetto One ASP.NET
• Usare framework di ASP.NET diversi, ad esempio MVC e API Web nello stesso progetto
• Identificare i componenti principali di un'applicazione ASP.NET
• Sfruttare il framework di scaffolding ASP.NET per creare automaticamente controller e viste per eseguire operazioni CRUD basate sulle classi del modello
• Esporre lo stesso set di informazioni in formati leggibili e computer usando lo strumento appropriato per ogni processo

Prerequisiti

Per completare questo lab pratico, è necessario quanto segue:

• Visual Studio Express 2013 per Web o versione successiva
• Visual Studio 2013 Update 1

Installazione

Per eseguire gli esercizi in questo lab pratico, è prima necessario configurare l'ambiente.

1. Aprire Esplora risorse e passare alla cartella Origine del lab.
2. Fare clic con il pulsante destro del mouse su Setup.cmd e scegliere Esegui come amministratore per avviare il processo di installazione che configurerà l'ambiente e installerà i frammenti di codice di Visual Studio per questo lab.
3. Se viene visualizzata la finestra di dialogo Controllo account utente, confermare l'azione da continuare.

Uso dei frammenti di codice

Nel 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, a cui è possibile accedere dall'interno di Visual Studio 2013 per evitare di dover aggiungerlo manualmente.

Esercizi

Questo lab pratico include gli esercizi seguenti:

1. Creazione di un nuovo progetto Web Forms
2. Creazione di un controller MVC tramite lo scaffolding
3. Creazione di un controller API Web tramite lo scaffolding

Tempo stimato per il completamento del lab: 60 minuti

Esercizio 1: Creazione di un nuovo progetto Web Forms

In questo esercizio verrà creato un nuovo sito di Web Forms in Visual Studio 2013 usando l'esperienza one ASP.NET unified project, che consentirà di integrare facilmente Web Forms, MVC e i componenti API Web nella stessa applicazione. Si esaminerà quindi la soluzione generata e si identificherà le relative parti e infine verrà visualizzato il sito Web in azione.

Attività 1: creazione di un nuovo sito usando l'esperienza di un'unica ASP.NET

In questa attività si inizierà a creare un nuovo sito Web in Visual Studio in base al tipo di progetto One ASP.NET . Una ASP.NET unifica tutte le tecnologie ASP.NET e offre la possibilità di combinarle e abbinarle in base alle esigenze. Si riconosceranno quindi i diversi componenti di Web Forms, MVC e API Web affiancati all'interno dell'applicazione.

1. Aprire Visual Studio Express 2013 per Web e selezionare File | Nuovo progetto... per avviare una nuova soluzione.

   

   Creazione di un nuovo progetto

2. Nella finestra di dialogo Nuovo progetto selezionare ASP.NET'applicazione Web in Visual C# | Scheda Web e assicurarsi che sia selezionato .NET Framework 4.5 . Assegnare al progetto il nome MyHybridSite, scegliere un percorso e fare clic su OK.

   

   Creazione di un nuovo progetto applicazione Web ASP.NET

3. Nella finestra di dialogo Nuovo progetto ASP.NET selezionare il modello di Web Forms e selezionare le opzioni MVC e API Web. Assicurarsi inoltre che l'opzione Autenticazione sia impostata su Account utente singoli. Per continuare scegliere OK .

   

   Creazione di un nuovo progetto con il modello di Web Forms, inclusi i componenti API Web e MVC

4. È ora possibile esplorare la struttura della soluzione generata.

   

   Esplorazione della soluzione generata

   1. Account: Questa cartella contiene le pagine del Modulo Web da registrare, accedere e gestire gli account utente dell'applicazione. Questa cartella viene aggiunta quando viene selezionata l'opzione di autenticazione Account utente singolo durante la configurazione del modello di progetto Web Forms.
   2. Modelli: Questa cartella conterrà le classi che rappresentano i dati dell'applicazione.
   3. Controller e visualizzazioni: queste cartelle sono necessarie per i componenti ASP.NET MVC e API Web ASP.NET. Nelle esercitazioni successive verranno esaminate le tecnologie MVC e API Web.
   4. I file Default.aspx, Contact.aspx e About.aspx sono pagine predefinite del modulo Web che è possibile usare come punti di partenza per compilare le pagine specifiche dell'applicazione. La logica di programmazione di tali file risiede in un file separato denominato "code-behind", che ha un'estensione ".aspx.vb" o ".aspx.cs" (a seconda del linguaggio usato). La logica code-behind viene eseguita nel server e produce dinamicamente l'output HTML per la pagina.
   5. Le pagine Site.Master e Site.Mobile.Master definiscono l'aspetto e il comportamento standard di tutte le pagine nell'applicazione.

5. Fare doppio clic sul file Default.aspx per esplorare il contenuto della pagina.

   

   Esplorazione della pagina Default.aspx

   Nota

   La direttiva Page nella parte superiore del file definisce gli attributi della pagina Web Forms. Ad esempio, l'attributo MasterPageFile specifica il percorso della pagina master, in questo caso la pagina Site.Master e l'attributo Inherits definisce la classe code-behind per la pagina da ereditare. Questa classe si trova nel file determinato dall'attributo CodeBehind .

   Il controllo asp:Content contiene il contenuto effettivo della pagina (testo, markup e controlli) ed è mappato a un controllo asp:ContentPlaceHolder nella pagina master. In questo caso, il rendering del contenuto della pagina verrà eseguito all'interno del controllo MainContent definito nella pagina Site.Master .

6. Espandere la cartella App_Start e notare il file WebApiConfig.cs . Visual Studio include il file nella soluzione generata perché è stata inclusa l'API Web durante la configurazione del progetto con il modello One ASP.NET.

7. Aprire il file WebApiConfig.cs . Nella classe WebApiConfig è disponibile la configurazione associata all'API Web, che esegue il mapping delle route HTTP ai controller API Web.

   public static void Register(HttpConfiguration config)
   {
       // Web API configuration and services
   
       // Web API routes
       config.MapHttpAttributeRoutes();
   
       config.Routes.MapHttpRoute(
               name: "DefaultApi",
               routeTemplate: "api/{controller}/{id}",
               defaults: new { id = RouteParameter.Optional }
           );
   }
   

8. Aprire il file RouteConfig.cs . All'interno del metodo RegisterRoutes è disponibile la configurazione associata a MVC, che esegue il mapping delle route HTTP ai controller MVC.

   public static void RegisterRoutes(RouteCollection routes)
   {
       var settings = new FriendlyUrlSettings();
       settings.AutoRedirectMode = RedirectMode.Permanent;
       routes.EnableFriendlyUrls(settings);
   
       routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
   
       routes.MapRoute(
               name: "Default",
               url: "{controller}/{action}/{id}",
               defaults: new { action = "Index", id = UrlParameter.Optional }
           );
   }
   

Attività 2: esecuzione della soluzione

In questa attività si eseguirà la soluzione generata, si esamineranno l'app e alcune delle relative funzionalità, ad esempio la riscrittura degli URL e l'autenticazione predefinita.

1. Per eseguire la soluzione, premere F5 o fare clic sul pulsante Start che si trova sulla barra degli strumenti. La home page dell'applicazione deve essere aperta nel browser.

   

2. Verificare che le pagine Web Forms vengano richiamate. A tale scopo, aggiungere /contact.aspx all'URL nella barra degli indirizzi e premere INVIO.

   

   URL descrittivi

   Nota

   Come si può notare, l'URL viene modificato in /contact. A partire da ASP.NET 4, le funzionalità di routing degli URL sono state aggiunte a Web Forms, quindi è possibile scrivere URL come http://www.mysite.com/products/software anziché http://www.mysite.com/products.aspx?category=software. Per altre informazioni, vedere Routing URL.

3. Si esaminerà ora il flusso di autenticazione integrato nell'applicazione. A tale scopo, fare clic su Registra nell'angolo superiore destro della pagina.

   

   Registrazione di un nuovo utente

4. Nella pagina Registra immettere un nome utente e una password e quindi fare clic su Registra.

   

   Pagina Di registrazione

5. L'applicazione registra il nuovo account e l'utente viene autenticato.

   

   Utente autenticato

6. Indietro a Visual Studio e premere MAIUSC + F5 per arrestare il debug.

Esercizio 2: Creazione di un controller MVC tramite Scaffolding

In questo esercizio si sfrutta il framework di ASP.NET Scaffolding fornito da Visual Studio per creare un controller ASP.NET MVC 5 con azioni e viste Razor per eseguire operazioni CRUD, senza scrivere una singola riga di codice. Il processo di scaffolding userà Entity Framework Code First per generare il contesto dei dati e lo schema del database nel database SQL.

Informazioni su Entity Framework Code First

Entity Framework (EF) è un mapper relazionale a oggetti (ORM) che consente di creare applicazioni di accesso ai dati tramite la programmazione con un modello di applicazione concettuale anziché la programmazione direttamente usando uno schema di archiviazione relazionale.

Il flusso di lavoro di modellazione di Entity Framework Code First consente di usare le proprie classi di dominio per rappresentare il modello basato su EF durante l'esecuzione di query, rilevamento delle modifiche e funzioni di aggiornamento. Usando il flusso di lavoro di sviluppo Code First, non è necessario iniziare l'applicazione creando un database o specificando uno schema. È invece possibile scrivere classi .NET standard che definiscono gli oggetti modello di dominio più appropriati per l'applicazione e Entity Framework creerà il database.

Attività 1 - Creazione di un nuovo modello

Verrà ora definita una classe Person , che sarà il modello usato dal processo di scaffolding per creare il controller MVC e le visualizzazioni. Si inizierà creando una classe modello Person e le operazioni CRUD nel controller verranno create automaticamente usando le funzionalità di scaffolding.

1. Aprire Visual Studio Express 2013 per Web e la soluzione MyHybridSite.sln disponibile nella cartella Source/Ex2-MvcScaffolding/Begin. In alternativa, è possibile continuare con la soluzione ottenuta nell'esercizio precedente.

2. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Modelli del progetto MyHybridSite e scegliere Aggiungi | Classe....

   

   Aggiunta della classe Modello Person

3. Nella finestra di dialogo Aggiungi nuovo elemento assegnare al file Person.cs il nome e fare clic su Aggiungi.

   

   Creazione della classe Modello Person

4. Sostituire il contenuto del file Person.cs con il codice seguente. Premere CTRL + S per salvare le modifiche.

   (Frammento di codice - BringingTogetherOneAspNet - Ex2 - PersonClass)

   namespace MyHybridSite.Models
   {
       public class Person
       {
           public int Id { get; set; }
   
           public string Name { get; set; }
   
           public int Age { get; set; }
       }
   }
   

5. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto MyHybridSite e scegliere Compila oppure premere CTRL + MAIUSC + B per compilare il progetto.

Attività 2 - Creazione di un controller MVC

Dopo aver creato il modello Person , si userà ASP.NET scaffolding MVC con Entity Framework per creare le azioni e le visualizzazioni del controller CRUD per Person.

1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Controller del progetto MyHybridSite e scegliere Aggiungi | Nuovo elemento Scaffolded....

   

   Creazione di un nuovo controller Scaffolded

2. Nella finestra di dialogo Aggiungi Scaffold selezionare Controller MVC 5 con viste, usando Entity Framework e quindi fare clic su Aggiungi.

   

   Selezione del controller MVC 5 con visualizzazioni e Entity Framework

3. Impostare MvcPersonController come nome controller, selezionare l'opzione Usa azioni controller asincrone e selezionare Person (MyHybridSite.Models) come classe Model.

   

   Aggiunta di un controller MVC con scaffolding

4. In Classe contesto dati fare clic su Nuovo contesto dati....

   

   Creazione di un nuovo contesto di dati

5. Nella finestra di dialogo Nuovo contesto dati assegnare un nome al nuovo contesto dati PersonContext e fare clic su Aggiungi.

   

   Creazione del nuovo tipo PersonContext

6. Fare clic su Aggiungi per creare il nuovo controller per Person con scaffolding. Visual Studio genererà quindi le azioni del controller, il contesto dei dati Person e le visualizzazioni Razor.

   

   Dopo aver creato il controller MVC con scaffolding

7. Aprire il file MvcPersonController.cs nella cartella Controller . Si noti che i metodi di azione CRUD sono stati generati automaticamente.

   ...
   
   // POST: /MvcPerson/Create
   // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
   // more details see https://go.microsoft.com/fwlink/?LinkId=317598.
   [HttpPost]
   [ValidateAntiForgeryToken]
   public async Task<ActionResult> Create([Bind(Include="Id,Name,Age")] Person person)
   {
        if (ModelState.IsValid)
        {
             db.People.Add(person);
             await db.SaveChangesAsync();
             return RedirectToAction("Index");
        }
   
        return View(person);
   }
   
   // GET: /MvcPerson/Edit/5
   public async Task<ActionResult> Edit(int? id)
   {
        if (id == null)
        {
             return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }
        Person person = await db.People.FindAsync(id);
        if (person == null)
        {
             return HttpNotFound();
        }
        return View(person);
   }
   
   ...
   

   Nota

   Selezionando la casella di controllo Usa azioni controller asincrone dalle opzioni di scaffolding nei passaggi precedenti, Visual Studio genera metodi di azione asincroni per tutte le azioni che comportano l'accesso al contesto dati Person. È consigliabile usare metodi di azione asincroni per le richieste associate a non CPU a esecuzione prolungata per evitare di bloccare l'esecuzione del lavoro del server Web durante l'elaborazione della richiesta.

Attività 3: esecuzione della soluzione

In questa attività si eseguirà di nuovo la soluzione per verificare che le visualizzazioni per Person funzionino come previsto. Si aggiungerà una nuova persona per verificare che venga salvata correttamente nel database.

1. Premere F5 per eseguire la soluzione.

2. Passare a /MvcPerson. Verrà visualizzata la visualizzazione scaffolded che mostra l'elenco di persone.

3. Fare clic su Crea nuovo per aggiungere una nuova persona.

   

   Passare alle visualizzazioni MVC con scaffolding

4. Nella visualizzazione Crea specificare un nome e un'età per la persona e fare clic su Crea.

   

   Aggiunta di una nuova persona

5. La nuova persona viene aggiunta all'elenco. Nell'elenco degli elementi fare clic su Dettagli per visualizzare la visualizzazione dei dettagli della persona. Quindi, nella visualizzazione Dettagli fare clic su Torna all'elenco per tornare alla visualizzazione elenco.

   

   Visualizzazione dei dettagli della persona

6. Fare clic sul collegamento Elimina per eliminare la persona. Nella visualizzazione Elimina fare clic su Elimina per confermare l'operazione.

   

   Eliminazione di una persona

7. Indietro a Visual Studio e premere MAIUSC + F5 per arrestare il debug.

Esercizio 3: Creazione di un controller API Web tramite Scaffolding

Il framework API Web fa parte dello stack di ASP.NET e progettato per semplificare l'implementazione dei servizi HTTP, in genere l'invio e la ricezione di dati JSON o XML tramite un'API RESTful.

In questo esercizio si userà di nuovo ASP.NET Scaffolding per generare un controller API Web. Si useranno le stesse classi Person e PersonContext dell'esercizio precedente per fornire gli stessi dati di persona in formato JSON. Si noterà come esporre le stesse risorse in modi diversi all'interno della stessa applicazione ASP.NET.

Attività 1 - Creazione di un controller API Web

In questa attività verrà creato un nuovo controller API Web che espone i dati delle persone in un formato di consumo di computer come JSON.

1. Se non è già aperto, aprire Visual Studio Express 2013 per Web e aprire la soluzione MyHybridSite.sln disponibile nella cartella Source/Ex3-WebAPI/Begin. In alternativa, è possibile continuare con la soluzione ottenuta nell'esercizio precedente.

   Nota

   Se si inizia con la soluzione Begin da Esercizio 3, premere CTRL + MAIUSC + B per compilare la soluzione.

2. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella Controller del progetto MyHybridSite e scegliere Aggiungi | Nuovo elemento Scaffolded....

   

   Creazione di un nuovo controller scaffolded

3. Nella finestra di dialogo Aggiungi Scaffold selezionare API Web nel riquadro sinistro, quindi Web API 2 Controller con azioni, usando Entity Framework nel riquadro centrale e quindi fare clic su Aggiungi.

   

   Selezione dell'API Web 2 Controller con azioni e Entity Framework

4. Impostare ApiPersonController come nome controller, selezionare rispettivamente l'opzione Usa azioni controller asincrone e selezionare Person (MyHybridSite.Models) e PersonContext (MyHybridSite.Models) come classi di contestomodello e dati. Fare quindi clic su Aggiungi.

   

   Aggiunta di un controller API Web con scaffolding

5. Visual Studio genererà quindi la classe ApiPersonController con le quattro azioni CRUD da usare con i dati.

   

   Dopo aver creato il controller API Web con scaffolding

6. Aprire il file ApiPersonController.cs ed esaminare il metodo di azione GetPeople . Questo metodo esegue una query sul campo db del tipo PersonContext per ottenere i dati degli utenti.

   // GET api/ApiPerson
   public IQueryable<Person> GetPeople()
   {
       return db.People;
   }
   

7. Si noti ora il commento sopra la definizione del metodo. Fornisce l'URI che espone questa azione che verrà usata nell'attività successiva.

   // GET api/ApiPerson
   public IQueryable<Person> GetPeople()
   {
       return db.People;
   }
   

   Nota

   Per impostazione predefinita, l'API Web è configurata per rilevare le query nel percorso /api per evitare collisioni con i controller MVC. Se è necessario modificare questa impostazione, vedere Routing in API Web ASP.NET.

Attività 2: esecuzione della soluzione

In questa attività si useranno gli strumenti di sviluppo F12 di Internet Explorer per controllare la risposta completa dal controller API Web. Si vedrà come acquisire il traffico di rete per ottenere maggiori informazioni sui dati dell'applicazione.

1. Premere F5 per eseguire la soluzione.

   Nota

   Per seguire correttamente questa attività, l'applicazione deve avere dati. Se il database è vuoto, è possibile tornare all'attività 3 in Esercizio 2 e seguire la procedura per creare una nuova persona usando le visualizzazioni MVC.

2. Nel browser premere F12 per aprire il pannello Strumenti di sviluppo . Premere CTRL + 4 o fare clic sull'icona Rete e quindi fare clic sul pulsante freccia verde per iniziare a acquisire il traffico di rete.

   

   Avvio dell'acquisizione di rete API Web

3. Aggiungere api/ApiPerson all'URL nella barra degli indirizzi del browser. Si esamineranno ora i dettagli della risposta da ApiPersonController.

   

   Recupero dei dati delle persone tramite l'API Web

   Nota

   Al termine del download, verrà richiesto di eseguire un'azione con il file scaricato. Lasciare aperta la finestra di dialogo per poter watch il contenuto della risposta tramite la finestra Strumento sviluppatori.

4. Ora si esaminerà il corpo della risposta. A tale scopo, fare clic sulla scheda Dettagli e quindi su Corpo risposta. È possibile verificare che i dati scaricati siano un elenco di oggetti con le proprietà ID, Name e Age che corrispondono alla classe Person .

   

   Visualizzazione del corpo della risposta api Web

Attività 3 : Aggiunta di pagine della Guida dell'API Web

Quando si crea un'API Web, è utile creare una pagina della Guida in modo che altri sviluppatori sappiano come chiamare l'API. È possibile creare e aggiornare manualmente le pagine della documentazione, ma è preferibile generarle automaticamente per evitare di dover eseguire il lavoro di manutenzione. In questa attività si userà un pacchetto Nuget per generare automaticamente le pagine della Guida dell'API Web alla soluzione.

1. Dal menu Strumenti in Visual Studio selezionare Gestione pacchetti NuGet e quindi fare clic su Console di Gestione pacchetti.

2. Nella finestra Console di Gestione pacchetti eseguire il comando seguente:

   Install-Package Microsoft.AspNet.WebApi.HelpPage
   

   Nota

   Il pacchetto Microsoft.AspNet.WebApi.HelpPage installa gli assembly necessari e aggiunge visualizzazioni MVC per le pagine della Guida nella cartella Aree/HelpPage .

   

   HelpPage Area

3. Per impostazione predefinita, le pagine della Guida hanno stringhe segnaposto per la documentazione. È possibile usare i commenti della documentazione XML per creare la documentazione. Per abilitare questa funzionalità, aprire il file HelpPageConfig.cs presente nella cartella Aree/HelpPage/App_Start e annullare ilcommento della riga seguente:

   config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));
   

4. In Esplora soluzioni fare clic con il pulsante destro del mouse sul progetto MyHybridSite, selezionare Proprietà e fare clic sulla scheda Compila.

   

   Scheda Compila

5. In Output selezionare file di documentazione XML. Nella casella di modifica digitare App_Data/XmlDocument.xml.

   

   Sezione output nella scheda Compilazione

6. Premere CTRL + S per salvare le modifiche.

7. Aprire il file ApiPersonController.cs dalla cartella Controller .

8. Immettere una nuova riga tra la firma del metodo GetPeople e il commento // GET api/ApiPerson e quindi digitare tre barre in avanti.

   Nota

   Visual Studio inserisce automaticamente gli elementi XML che definiscono la documentazione del metodo.

9. Aggiungere un testo di riepilogo e il valore restituito per il metodo GetPeople . Il messaggio sarà simile al seguente.

   // GET api/ApiPerson
   /// <summary>
   /// Documentation for 'GET' method
   /// </summary>
   /// <returns>Returns a list of people in the requested format</returns>
   public IQueryable<Person> GetPeople()
   {
       return db.People;
   }
   

10. Premere F5 per eseguire la soluzione.

11. Aggiungere /help all'URL nella barra degli indirizzi per passare alla pagina della Guida.

    

    Pagina della Guida API Web ASP.NET

    Nota

    Il contenuto principale della pagina è una tabella di API raggruppate da controller. Le voci della tabella vengono generate dinamicamente usando l'interfaccia IApiExplorer . Se si aggiunge o si aggiorna un controller API, la tabella verrà aggiornata automaticamente alla successiva compilazione dell'applicazione.

    La colonna API elenca il metodo HTTP e l'URI relativo. La colonna Description contiene informazioni estratte dalla documentazione del metodo.

12. Si noti che la descrizione aggiunta sopra la definizione del metodo viene visualizzata nella colonna di descrizione.

    

    Descrizione del metodo API

13. Fare clic su uno dei metodi API per passare a una pagina con informazioni più dettagliate, inclusi i corpi di risposta di esempio.

    

    Pagina informazioni dettagliate

Riepilogo

Completando questo lab pratico si è appreso come:

• Creare una nuova applicazione Web usando One ASP.NET Experience in Visual Studio 2013
• Integrare più tecnologie di ASP.NET in un singolo progetto
• Generare controller e visualizzazioni MVC dalle classi di modello usando ASP.NET Scaffolding
• Generare controller API Web, che usano funzionalità quali Programmazione asincrona e accesso ai dati tramite Entity Framework
• Generare automaticamente pagine della Guida dell'API Web per i controller