Creare API RESTful con API Web ASP.NET

Articolo
07/13/2023

Lab pratico: usare l'API Web in ASP.NET 4.x per creare una semplice API REST per un'applicazione contact manager. Si creerà anche un client per usare l'API.

Negli ultimi anni, è diventato chiaro che HTTP non è solo per servire pagine HTML. È anche una piattaforma potente per la creazione di API Web, usando alcuni verbi (GET, POST e così via) e alcuni semplici concetti, ad esempio URI e intestazioni. API Web ASP.NET è un set di componenti che semplificano la programmazione HTTP. Poiché si basa sul runtime MVC ASP.NET, l'API Web gestisce automaticamente i dettagli di trasporto di basso livello di HTTP. Allo stesso tempo, l'API Web espone naturalmente il modello di programmazione HTTP. In effetti, un obiettivo dell'API Web è quello di non astrarre la realtà di HTTP. Di conseguenza, l'API Web è flessibile e facile da estendere. Lo stile dell'architettura REST ha dimostrato di essere un modo efficace per sfruttare HTTP, anche se non è certamente l'unico approccio valido a HTTP. Il responsabile contatti espone restful per l'inserzione, aggiungendo e rimuovendo i contatti, tra gli altri.

Questo lab richiede una conoscenza di base di HTTP, REST e presuppone la conoscenza di base di HTML, JavaScript e jQuery.

Nota

Il sito Web ASP.NET include un'area dedicata al framework di API Web ASP.NET all'indirizzo https://asp.net/web-api. Questo sito continuerà a fornire informazioni, esempi e notizie in ritardo correlati all'API Web, quindi controllare spesso se si vuole approfondire l'arte della creazione di API Web personalizzate disponibili per qualsiasi dispositivo o framework di sviluppo.

API Web ASP.NET, simile a ASP.NET MVC 4, offre una grande flessibilità in termini di separazione del livello di servizio dai controller che consentono di usare diversi framework di inserimento delle dipendenze disponibili abbastanza facilmente.

Tutti i frammenti e il codice di esempio sono inclusi nel Web Camp Training Kit, disponibile all'indirizzo https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Obiettivi

In questo lab pratico si apprenderà come:

Implementare un'API Web RESTful
Chiamare l'API da un client HTML

Prerequisiti

Per completare questo lab pratico, è necessario quanto segue:

Microsoft Visual Studio Express 2012 per Web o superiore (vedere Appendice B per istruzioni su come installarlo).

Attrezzaggio

Installazione di frammenti di codice

Per praticità, gran parte del codice che si gestirà con questo lab è disponibile come frammenti di codice di Visual Studio. Per installare i frammenti di codice, eseguire il file .\Source\Setup\CodeSnippets.vsi .

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 l'esercizio seguente:

Esercizio 1: Creare un'API Web di sola lettura
Esercizio 2: Creare un'API Web di lettura/scrittura
Esercizio 3: Usare l'API Web da un client HTML

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: Creare un'API Web di sola lettura

In questo esercizio verranno implementati i metodi GET di sola lettura per il responsabile dei contatti.

Attività 1 - Creazione del progetto API

In questa attività si useranno i nuovi modelli di progetto Web ASP.NET per creare un'applicazione Web API Web.

Eseguire Visual Studio 2012 Express for Web. A tale scopo, passare a Start e digitare VS Express for Web e quindi premere INVIO.
Scegliere Nuovo progetto dal menu File. Selezionare Visual C# | Tipo di progetto Web dalla visualizzazione albero dei tipi di progetto, quindi selezionare il tipo di progetto applicazione Web MVC 4 ASP.NET. Impostare il nome del progetto su ContactManager e il nome della soluzione su Begin, quindi fare clic su OK.

Creazione di un nuovo progetto di applicazione Web MVC 4.0 ASP.NET
Nella finestra di dialogo ASP.NET tipo di progetto MVC 4 selezionare il tipo di progetto API Web. Fare clic su OK.

Specifica del tipo di progetto API Web

Attività 2 - Creazione dei controller API di Contact Manager

In questa attività si creeranno le classi controller in cui risiederanno i metodi API.

Eliminare il file denominato ValuesController.cs all'interno della cartella Controllers dal progetto.
Fare clic con il pulsante destro del mouse sulla cartella Controllers nel progetto e scegliere Aggiungi | Controller dal menu di scelta rapida.

Aggiunta di un nuovo controller al progetto
Nella finestra di dialogo Aggiungi controller visualizzata selezionare Controller API vuoto dal menu Modello. Denominare la classe controller ContactController. Fare quindi clic su Aggiungi.

Uso della finestra di dialogo Aggiungi controller per creare un nuovo controller API Web
Aggiungere il codice seguente a ContactController.

(Frammento di codice - Lab api Web - Ex01 - Metodo API Get
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Premere F5 per eseguire il debug dell'applicazione. Verrà visualizzata la home page predefinita per un progetto API Web.

Home page predefinita di un'applicazione API Web ASP.NET
Nella finestra di Internet Explorer premere F12 per aprire la finestra Strumenti di sviluppo. Fare clic sulla scheda Rete e quindi sul pulsante Avvia acquisizione per avviare l'acquisizione del traffico di rete nella finestra.

Apertura della scheda di rete e avvio dell'acquisizione di rete
Aggiungere l'URL nella barra degli indirizzi del browser con /api/contact e premere INVIO. I dettagli della trasmissione verranno visualizzati nella finestra di acquisizione di rete. Si noti che il tipo MIME della risposta è application/json. Questo dimostra come il formato di output predefinito è JSON.

Visualizzazione dell'output della richiesta API Web nella visualizzazione Rete

Nota

Il comportamento predefinito di Internet Explorer 10 a questo punto sarà chiedere se l'utente vuole salvare o aprire il flusso risultante dalla chiamata API Web. L'output sarà un file di testo contenente il risultato JSON della chiamata ALL'URL dell'API Web. Non annullare la finestra di dialogo per poter controllare il contenuto della risposta tramite la finestra Degli strumenti sviluppatori.
Fare clic sul pulsante Vai alla visualizzazione dettagliata per visualizzare altri dettagli sulla risposta di questa chiamata API.

Passare alla visualizzazione dettagliata
Fare clic sulla scheda Corpo della risposta per visualizzare il testo effettivo della risposta JSON.

Visualizzazione del testo dell'output JSON nel monitoraggio di rete

Attività 3 - Creazione dei modelli di contatto e aumento del controller di contatto

In questa attività si creeranno le classi controller in cui risiederanno i metodi API.

Fare clic con il pulsante destro del mouse sulla cartella Models e scegliere Aggiungi | Classe... dal menu di scelta rapida.

Aggiunta di un nuovo modello all'applicazione Web
Nella finestra di dialogo Aggiungi nuovo elemento assegnare al nuovo file il nome Contact.cs e fare clic su Aggiungi.

Creazione del nuovo file di classe Contact
Aggiungere il codice evidenziato seguente alla classe Contact .

(Frammento di codice - Lab api Web - Ex01 - Classe contact)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
Nella classe ContactController selezionare la stringa di parola nella definizione del metodo Get e digitare la parola Contact. Una volta digitata la parola, un indicatore verrà visualizzato all'inizio della parola Contatto. Tenere premuto CTRL e premere il tasto punto (.) oppure fare clic sull'icona usando il mouse per aprire la finestra di dialogo di assistenza nell'editor di codice, per compilare automaticamente la direttiva using per lo spazio dei nomi Models.

Uso dell'assistenza di IntelliSense per le dichiarazioni dello spazio dei nomi

Modificare il codice per il metodo Get in modo che restituisca una matrice di istanze del modello Contact.

(Frammento di codice - Lab api Web - Ex01 - Restituzione di un elenco di contatti)

public Contact[] Get()
{
    return new Contact[]
    {
        new Contact
        {
            Id = 1,
            Name = "Glenn Block"
        },
        new Contact
        {
            Id = 2,
            Name = "Dan Roth"
        }
    };
}

Premere F5 per eseguire il debug dell'applicazione Web nel browser. Per visualizzare le modifiche apportate all'output della risposta dell'API, seguire questa procedura.
1. Una volta aperto il browser, premere F12 se gli strumenti di sviluppo non sono ancora aperti.
2. Fare clic sulla scheda Rete .
3. Premere il pulsante Avvia acquisizione .
4. Aggiungere il suffisso URL /api/contact all'URL nella barra degli indirizzi e premere INVIO .
5. Premere il pulsante Vai alla visualizzazione dettagliata.
6. Selezionare la scheda Corpo risposta. Verrà visualizzata una stringa JSON che rappresenta il formato serializzato di una matrice di istanze di Contact.
  
  Output serializzato JSON di una chiamata complessa al metodo API Web

Attività 4 - Estrazione di funzionalità in un livello di servizio

Questa attività illustra come estrarre le funzionalità in un livello di servizio per semplificare agli sviluppatori la separazione delle funzionalità del servizio dal livello controller, consentendo così la riutilizzabilità dei servizi che effettivamente eseguono il lavoro.

Creare una nuova cartella nella radice della soluzione e denominarla Servizi. A tale scopo, fare clic con il pulsante destro del mouse sul progetto ContactManager, scegliere Aggiungi | nuova cartella, denominarlo Servizi.

Creazione della cartella Servizi
Fare clic con il pulsante destro del mouse sulla cartella Servizi e scegliere Aggiungi | Classe... dal menu di scelta rapida.

Aggiunta di una nuova classe alla cartella Services
Quando viene visualizzata la finestra di dialogo Aggiungi nuovo elemento , denominare la nuova classe ContactRepository e fare clic su Aggiungi.

Creazione di un file di classe per contenere il codice per il livello del servizio Contact Repository
Aggiungere una direttiva using al file ContactRepository.cs per includere lo spazio dei nomi models.
```
using ContactManager.Models;
```

Aggiungere il codice evidenziato seguente al file ContactRepository.cs per implementare il metodo GetAllContacts.

(Frammento di codice - Lab dell'API Web - Ex01 - Repository di contatti

public class ContactRepository
{
    public Contact[] GetAllContacts()
    {
        return new Contact[]
        {
            new Contact
            {
                Id = 1,
                Name = "Glenn Block"
            },
            new Contact
            {
                Id = 2,
                Name = "Dan Roth"
            }
        };
    }
}

Aprire il file ContactController.cs se non è già aperto.
Aggiungere l'istruzione using seguente alla sezione della dichiarazione dello spazio dei nomi del file.
```
using ContactManager.Services;
```
Aggiungere il codice evidenziato seguente alla classe ContactController.cs per aggiungere un campo privato per rappresentare l'istanza del repository, in modo che il resto dei membri della classe possa usare l'implementazione del servizio.

(Frammento di codice - Lab api Web - Ex01 - Controller di contatto)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Modificare il metodo Get in modo che usi il servizio repository contatti.

(Frammento di codice - Lab api Web - Ex01 - Restituzione di un elenco di contatti tramite il repository)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Inserire un punto di interruzione nella definizione del metodo Get di ContactController.

Aggiunta di punti di interruzione al controller di contatto

Aggiunta di punti di interruzione al controller di contatto 11. Premere F5 per eseguire l'applicazione. 12. Quando si apre il browser, premere F12 per aprire gli strumenti di sviluppo. 13. Fare clic sulla scheda Rete . 14. Fare clic sul pulsante Avvia acquisizione . 15. Aggiungere l'URL nella barra degli indirizzi con il suffisso /api/contact e premere INVIO per caricare il controller API. 16. Visual Studio 2012 deve interrompersi dopo l'inizio dell'esecuzione del metodo Get .

Interruzione all'interno del metodo Get

Interruzione all'interno del metodo Get 17. Premere F5 per continuare. 18. Tornare a Internet Explorer se non è già attivo. Prendere nota della finestra di acquisizione di rete.

Visualizzazione di rete in Internet Explorer che mostra i risultati della chiamata API Web

Visualizzazione di rete in Internet Explorer che mostra i risultati della chiamata API Web 19. Fare clic sul pulsante Vai alla visualizzazione dettagliata. 20. Fare clic sulla scheda Corpo risposta. Prendere nota dell'output JSON della chiamata API e come rappresenta i due contatti recuperati dal livello di servizio.

Visualizzazione dell'output JSON dall'API Web nella finestra degli strumenti di sviluppo

Visualizzazione dell'output JSON dall'API Web nella finestra degli strumenti di sviluppo

Esercizio 2: Creare un'API Web di lettura/scrittura

In questo esercizio verranno implementati i metodi POST e PUT per il responsabile contatti per abilitarlo con le funzionalità di modifica dei dati.

Attività 1 - Apertura del progetto API Web

In questa attività si preparerà a migliorare il progetto API Web creato nell'esercizio 1 in modo che possa accettare l'input dell'utente.

Eseguire Visual Studio 2012 Express for Web. A tale scopo, passare a Start e digitare VS Express for Web e quindi premere INVIO.
Aprire la soluzione Begin disponibile nella cartella Source/Ex02-ReadWriteWebAPI/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.
Aprire il file Services/ContactRepository.cs .

Attività 2- Aggiunta di funzionalità di persistenza dei dati all'implementazione del repository contatti

In questa attività si aumenta la classe ContactRepository del progetto API Web creato nell'esercizio 1 in modo che possa rendere persistente e accettare l'input dell'utente e le nuove istanze di Contatto.

Aggiungere la costante seguente alla classe ContactRepository per rappresentare il nome della chiave dell'elemento della cache del server Web più avanti in questo esercizio.
```
private const string CacheKey = "ContactStore";
```

Aggiungere un costruttore all'oggetto ContactRepository contenente il codice seguente.

(Frammento di codice - Lab api Web - Ex02 - Contattare il costruttore del repository

public ContactRepository()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        if (ctx.Cache[CacheKey] == null)
        {
            var contacts = new Contact[]
            {
                new Contact
                {
                    Id = 1, Name = "Glenn Block"
                },
                new Contact
                {
                    Id = 2, Name = "Dan Roth"
                }
            };

            ctx.Cache[CacheKey] = contacts;
        }
    }
}

Modificare il codice per il metodo GetAllContacts , come illustrato di seguito.

(Frammento di codice - Lab api Web - Ex02 - Ottenere tutti i contatti)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
        return (Contact[])ctx.Cache[CacheKey];
    }

    return new Contact[]
        {
            new Contact
            {
                Id = 0,
                Name = "Placeholder"
            }
        };
}
```
Nota

Questo esempio è a scopo dimostrativo e userà la cache del server Web come supporto di archiviazione, in modo che i valori saranno disponibili per più client contemporaneamente, anziché usare un meccanismo di archiviazione sessione o una durata di archiviazione richiesta. È possibile usare Entity Framework, l'archiviazione XML o qualsiasi altra varietà al posto della cache del server Web.

Implementare un nuovo metodo denominato SaveContact nella classe ContactRepository per eseguire il lavoro di salvataggio di un contatto. Il metodo SaveContact deve accettare un singolo parametro Contact e restituire un valore booleano che indica l'esito positivo o negativo.

(Frammento di codice - Lab api Web - Ex02 - Implementazione del metodo SaveContact)

public bool SaveContact(Contact contact)
{
    var ctx = HttpContext.Current;

    if (ctx != null)
    {
         try
         {
              var currentData = ((Contact[])ctx.Cache[CacheKey]).ToList();
              currentData.Add(contact);
              ctx.Cache[CacheKey] = currentData.ToArray();

              return true;
         }
         catch (Exception ex)
         {
              Console.WriteLine(ex.ToString());
              return false;
         }
    }

    return false;
}

Esercizio 3: Usare l'API Web da un client HTML

In questo esercizio si creerà un client HTML per chiamare l'API Web. Questo client faciliterà lo scambio di dati con l'API Web usando JavaScript e visualizzerà i risultati in un Web browser usando markup HTML.

Attività 1 - Modifica della visualizzazione indice per fornire un'interfaccia utente grafica per la visualizzazione dei contatti

In questa attività si modificherà la visualizzazione indice predefinita dell'applicazione Web per supportare il requisito di visualizzare l'elenco dei contatti esistenti in un browser HTML.

Aprire Visual Studio 2012 Express for Web se non è già aperto.
Aprire la soluzione Begin disponibile nella cartella Source/Ex03-ConsumeWebAPI/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.
Aprire il file Index.cshtml nella cartella Views/Home .
Sostituire il codice HTML all'interno dell'elemento div con il corpo id in modo che abbia un aspetto simile al codice seguente.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Aggiungere il codice Javascript seguente nella parte inferiore del file per eseguire la richiesta HTTP all'API Web.

@section scripts{
<script type="text/javascript">
$(function()
{
        $.getJSON('/api/contact', function(contactsJsonPayload)
        {
            $(contactsJsonPayload).each(function(i, item)
            {
                $('#contacts').append('<li>' + item.Name + '</li>');
            });
        });
});
</script>
}

Aprire il file ContactController.cs se non è già aperto.
Posizionare un punto di interruzione nel metodo Get della classe ContactController .

Posizionamento di un punto di interruzione nel metodo Get del controller API
Premere F5 per eseguire il progetto. Il browser caricherà il documento HTML.

Nota

Assicurarsi di passare all'URL radice dell'applicazione.
Una volta caricata la pagina e l'esecuzione di JavaScript, il punto di interruzione verrà raggiunto e l'esecuzione del codice verrà sospesa nel controller.

Debug nella chiamata API Web con Visual Studio 2012 Express for Web
Rimuovere il punto di interruzione e premere F5 o il pulsante Continua della barra degli strumenti di debug per continuare a caricare la visualizzazione nel browser. Una volta completata la chiamata all'API Web, i contatti restituiti dalla chiamata API Web vengono visualizzati come voci di elenco nel browser.

Risultati della chiamata API visualizzata nel browser come elementi elenco
Terminare il debug

Attività 2 - Modifica della visualizzazione indice per fornire un'interfaccia utente grafica per la creazione di contatti

In questa attività si continuerà a modificare la visualizzazione Indice dell'applicazione MVC. Verrà aggiunto un modulo alla pagina HTML che acquisirà l'input dell'utente e lo invierà all'API Web per creare un nuovo contatto e verrà creato un nuovo metodo di controller API Web per raccogliere la data dall'interfaccia utente grafica.

Aprire il file ContactController.cs .

Aggiungere un nuovo metodo alla classe controller denominata Post , come illustrato nel codice seguente.

(Frammento di codice - Lab dell'API Web - Ex03 - Metodo Post)

public HttpResponseMessage Post(Contact contact)
{
    this.contactRepository.SaveContact(contact);

    var response = Request.CreateResponse<Contact>(System.Net.HttpStatusCode.Created, contact);

    return response;
}

Aprire il file Index.cshtml in Visual Studio, se non è già aperto.

Aggiungere il codice HTML seguente al file subito dopo l'elenco non ordinato aggiunto nell'attività precedente.

<form id="saveContactForm" method="post">
<h3>Create a new Contact</h3>
<p>
    <label for="contactId">Contact Id:</label>
    <input type="text" name="Id" />
</p>
<p>
    <label for="contactName">Contact Name:</label>
    <input type="text" name="Name" />
</p>
<input type="button" id="saveContact" value="Save" />
</form>

All'interno dell'elemento script nella parte inferiore del documento aggiungere il codice evidenziato seguente per gestire gli eventi button-click, che pubblicheranno i dati nell'API Web usando una chiamata HTTP POST.

<script type="text/javascript">
... 
$('#saveContact').click(function()
         {
              $.post("api/contact",
                    $("#saveContactForm").serialize(),
                    function(value)
                    {
                         $('#contacts').append('<li>' + value.Name + '</li>');
                    },
                    "json"
              );
         });
</script>

In ContactController.cs posizionare un punto di interruzione nel metodo Post .
Premere F5 per eseguire l'applicazione nel browser.
Una volta caricata la pagina nel browser, digitare un nuovo nome di contatto e un NUOVO ID e fare clic sul pulsante Salva .

Documento HTML client caricato nel browser
Quando la finestra del debugger si interrompe nel metodo Post , esaminare le proprietà del parametro contact . I valori devono corrispondere ai dati immessi nel modulo.

Oggetto Contact inviato all'API Web dal client
Eseguire il metodo nel debugger fino a quando non viene creata la variabile di risposta . Dopo l'ispezione nella finestra Variabili locali nel debugger, si noterà che tutte le proprietà sono state impostate.

Risposta seguente: creazione nel debugger

Risposta che segue la creazione nel debugger 11. Se si preme F5 o si fa clic su Continua nel debugger, la richiesta verrà completata. Quando si torna al browser, il nuovo contatto è stato aggiunto all'elenco dei contatti archiviati dall'implementazione contactRepository .

Il browser riflette la corretta creazione della nuova istanza del contatto

Il browser riflette la corretta creazione della nuova istanza del contatto

Nota

È anche possibile distribuire questa applicazione nell'Appendice C seguente di Azure: Pubblicazione di un'applicazione ASP.NET MVC 4 tramite Distribuzione Web.

Riepilogo

Questo lab ha introdotto il nuovo framework API Web ASP.NET e l'implementazione delle API Web RESTful usando il framework. Da qui è possibile creare un nuovo repository che facilita la persistenza dei dati usando un numero qualsiasi di meccanismi e collegare tale servizio anziché quello semplice fornito come esempio in questo lab. L'API Web supporta diverse funzionalità aggiuntive, ad esempio l'abilitazione della comunicazione da client non HTML scritti in qualsiasi linguaggio che supporta HTTP e JSON o XML. È anche possibile ospitare un'API Web all'esterno di una tipica applicazione Web, nonché la possibilità di creare formati di serializzazione personalizzati.

Il sito Web ASP.NET ha un'area dedicata al framework di API Web ASP.NET in [https://asp.net/web-api](https://asp.net/web-api). Questo sito continuerà a fornire informazioni, esempi e notizie in ritardo correlati all'API Web, quindi controllare spesso se si vuole approfondire l'arte della creazione di API Web personalizzate disponibili per qualsiasi dispositivo o framework di sviluppo.

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#)

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

Iniziare a digitare il nome del frammento

Premere TAB per selezionare il frammento di codice evidenziato

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)

Fare clic con il pulsante destro del mouse su dove inserire il frammento di codice.
Selezionare Inserisci frammento di codice seguito da Frammenti di codice personali.
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

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.

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 Azure SDK".
Fare clic su Installa ora. Se non si dispone del programma di installazione della piattaforma Web, si verrà reindirizzati per scaricarlo e installarlo per primo.
Dopo aver aperto Il programma di installazione della piattaforma Web, fare clic su Installa per avviare l'installazione.

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

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

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

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

Riquadro di VS Express per Il Web

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

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

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

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

Nota

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

Accedere al portale
Fare clic su Nuovo sulla barra dei comandi.

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

Nota

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 in Azure dall'esterno del portale. Non include i passaggi per la configurazione di un database.

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

Esplorazione del nuovo sito Web

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

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

Nota

Il profilo di pubblicazione contiene tutte le informazioni necessarie per pubblicare un'applicazione Web in 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 in Azure.

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

Salvataggio del file del profilo di pubblicazione

Attività 2 - Configurazione del server di database

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

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

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

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

Conferma modifiche

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

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

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

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

Nota

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

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

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

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

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

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

Applicazione pubblicata in Azure