Erstellen von RESTful-APIs mit ASP.NET-Web-API

Artikel
11/21/2024

Praktische Übung: Verwenden Sie web-API in ASP.NET 4.x, um eine einfache REST-API für eine Contact Manager-Anwendung zu erstellen. Sie erstellen auch einen Client, um die API zu nutzen.

In den letzten Jahren ist klar geworden, dass HTTP nicht nur für die Bereitstellung von HTML-Seiten dient. Es ist auch eine leistungsstarke Plattform zum Erstellen von Web-APIs, wobei eine Handvoll Verben (GET, POST usw.) sowie einige einfache Konzepte wie URIs und Header verwendet werden. ASP.NET-Web-API ist eine Reihe von Komponenten, die die HTTP-Programmierung vereinfachen. Da sie auf der ASP.NET MVC-Laufzeit basiert, verarbeitet die Web-API automatisch die Transportdetails auf niedriger Ebene von HTTP. Gleichzeitig macht die Web-API das HTTP-Programmiermodell natürlich verfügbar. Tatsächlich ist ein Ziel der Web-API, die Realität von HTTP nicht abstrahieren. Die Web-API ist daher flexibel und einfach zu erweitern. Der REST-Architekturstil hat sich als effektive Methode zum Nutzen von HTTP erwiesen - obwohl es sicherlich nicht der einzige gültige Ansatz für HTTP ist. Der Kontakt-Manager macht das RESTful zum Auflisten, Hinzufügen und Entfernen von Kontakten unter anderem verfügbar.

Dieses Labor erfordert ein grundlegendes Verständnis von HTTP, REST und geht davon aus, dass Sie über grundlegende Arbeitskenntnisse in HTML, JavaScript und jQuery verfügen.

Hinweis

Die ASP.NET-Website verfügt über einen Bereich für das ASP.NET-Web-API Framework unter https://asp.net/web-api. Diese Website bietet weiterhin aktuelle Informationen, Beispiele und Neuigkeiten im Zusammenhang mit der Web-API. Überprüfen Sie sie daher häufig, wenn Sie sich genauer mit der Kunst befassen möchten, benutzerdefinierte Web-APIs zu erstellen, die praktisch jedem Gerät oder Entwicklungsframework zur Verfügung stehen.

ASP.NET-Web-API, ähnlich wie ASP.NET MVC 4, bietet große Flexibilität hinsichtlich der Trennung der Dienstschicht von den Controllern, sodass Sie mehrere der verfügbaren Abhängigkeitsinjektionsframeworks relativ einfach verwenden können.

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, verfügbar unter https://github.com/Microsoft-Web/WebCampTrainingKit/releases.

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

Implementieren einer RESTful-Web-API
Aufrufen der API von einem HTML-Client

Voraussetzungen

Für die Durchführung dieses praktischen Labors ist Folgendes erforderlich:

Microsoft Visual Studio Express 2012 für Web oder höher (lesen Sie Anhang B , um Anweisungen zur Installation zu erhalten).

Setup

Installieren von Codeausschnitten

Aus Gründen der Einfachheit ist ein Großteil des Codes, den Sie entlang dieser Übung verwalten, als Visual Studio-Codeausschnitte verfügbar. Führen Sie zum Installieren der Codeausschnitte die Datei ".\Source\Setup\CodeSnippets.vsi " aus.

Wenn Sie mit den Visual Studio Code Snippets nicht vertraut sind und erfahren möchten, wie sie verwendet werden können, finden Sie in diesem Dokument den Anhang "Anhang A: Verwenden von Codeausschnitten".

Übungen

Diese praktische Übung umfasst die folgende Übung:

Übung 1: Erstellen einer schreibgeschützten Web-API
Übung 2: Erstellen einer Lese-/Schreib-Web-API
Übung 3: Verwenden der Web-API von einem HTML-Client

Hinweis

Jede Übung wird von einem Endordner begleitet, der die resultierende Lösung enthält, die Sie nach Abschluss der Übungen erhalten sollten. Sie können diese Lösung als Leitfaden verwenden, wenn Sie zusätzliche Hilfe beim Durcharbeiten der Übungen benötigen.

Geschätzte Zeit zum Abschließen dieser Übung: 60 Minuten.

Übung 1: Erstellen einer schreibgeschützten Web-API

In dieser Übung implementieren Sie die schreibgeschützten GET-Methoden für den Kontakt-Manager.

Aufgabe 1 – Erstellen des API-Projekts

In dieser Aufgabe verwenden Sie die neuen ASP.NET Webprojektvorlagen zum Erstellen einer Web-API-Webanwendung.

Führen Sie Visual Studio 2012 Express für Web aus, um dies zu starten , und geben Sie VS Express für Web ein, und drücken Sie dann die EINGABETASTE.
Wählen Sie im Menü "Datei" die Option "Neues Projekt" aus. Visual C# auswählen | Webprojekttyp aus der Projekttypstrukturansicht, und wählen Sie dann den ASP.NET MVC 4-Webanwendungsprojekttyp aus. Legen Sie den Namen des Projekts auf "ContactManager" und den Projektmappennamen auf "Anfang" fest, und klicken Sie dann auf "OK".

Erstellen eines neuen ASP.NET MVC 4.0-Webanwendungsprojekts
Wählen Sie im Dialogfeld ASP.NET MVC 4-Projekttyp den Web-API-Projekttyp aus. Klicken Sie auf OK.

Angeben des Web-API-Projekttyps

Aufgabe 2 – Erstellen der Contact Manager-API-Controller

In dieser Aufgabe erstellen Sie die Controllerklassen, in denen sich API-Methoden befinden.

Löschen Sie die Datei namens ValuesController.cs im Ordner "Controller" aus dem Projekt.
Klicken Sie mit der rechten Maustaste auf den Ordner "Controller" im Projekt, und wählen Sie "Hinzufügen" | aus. Controller aus dem Kontextmenü.

Hinzufügen eines neuen Controllers zum Projekt
Wählen Sie im daraufhin angezeigten Dialogfeld "Controller hinzufügen" im Menü "Vorlage" die Option "Leeren API-Controller " aus. Nennen Sie die Controllerklasse ContactController. Klicken Sie anschließend auf Hinzufügen.

Verwenden des Dialogfelds "Controller hinzufügen" zum Erstellen eines neuen Web-API-Controllers
Fügen Sie dem ContactController den folgenden Code hinzu.

(Codeausschnitt - Web API Lab – Ex01 – Api-Methode abrufen)
```
public string[] Get()
{
    return new string[]
    {
        "Hello",
        "World"
    };
}
```
Drücken Sie F5, um die Anwendung zu debuggen. Die Standardstartseite für ein Web-API-Projekt sollte angezeigt werden.

Die Standardstartseite einer ASP.NET-Web-API Anwendung
Drücken Sie im Internet Explorer-Fenster die F12-TASTE , um das Fenster "Entwicklertools " zu öffnen. Klicken Sie auf die Registerkarte "Netzwerk" und dann auf die Schaltfläche "Aufzeichnung starten", um mit dem Erfassen des Netzwerkdatenverkehrs im Fenster zu beginnen.

Öffnen der Netzwerkregisterkarte und Initiieren der Netzwerkerfassung
Fügen Sie die URL in der Adressleiste des Browsers mit /api/contact an, und drücken Sie die EINGABETASTE. Die Übertragungsdetails werden im Netzwerkaufnahmefenster angezeigt. Beachten Sie, dass der MIME-Typ der Antwort anwendung/json ist. Dies veranschaulicht, wie das Standardausgabeformat JSON ist.

Anzeigen der Ausgabe der Web-API-Anforderung in der Netzwerkansicht

Hinweis

Das Standardverhalten von Internet Explorer 10 an diesem Punkt wird gefragt, ob der Benutzer den Datenstrom speichern oder öffnen möchte, der sich aus dem Web-API-Aufruf ergibt. Die Ausgabe ist eine Textdatei, die das JSON-Ergebnis des Web-API-URL-Aufrufs enthält. Brechen Sie das Dialogfeld nicht ab, um den Inhalt der Antwort über das Entwicklertoolfenster anzeigen zu können.
Klicken Sie auf die Schaltfläche "Gehe zu detaillierter Ansicht ", um weitere Details zur Antwort dieses API-Aufrufs anzuzeigen.

Wechseln zur detaillierten Ansicht
Klicken Sie auf die Registerkarte " Antworttext ", um den tatsächlichen JSON-Antworttext anzuzeigen.

Anzeigen des JSON-Ausgabetexts im Netzwerkmonitor

Aufgabe 3 – Erstellen der Kontaktmodelle und Erweitern des Kontaktcontrollers

In dieser Aufgabe erstellen Sie die Controllerklassen, in denen sich API-Methoden befinden.

Klicken Sie mit der rechten Maustaste auf den Ordner "Modelle ", und wählen Sie im Kontextmenü "Hinzufügen | Klasse..." aus.

Hinzufügen eines neuen Modells zur Webanwendung
Benennen Sie im Dialogfeld "Neues Element hinzufügen" die neue Datei Contact.cs , und klicken Sie auf "Hinzufügen".

Erstellen der neuen Kontaktklassendatei
Fügen Sie der Contact-Klasse den folgenden hervorgehobenen Code hinzu.

(Codeausschnitt - Web API Lab - Ex01 - Contact Class)
```
public class Contact
{
    public int Id { get; set; }

    public string Name { get; set; }
}
```
Wählen Sie in der ContactController-Klasse die Wortzeichenfolge in der Methodendefinition der Get-Methode aus, und geben Sie das Wort "Kontakt" ein. Sobald das Wort eingegeben wurde, wird am Anfang des Worts "Kontakt" ein Indikator angezeigt. Halten Sie die STRG-TASTE gedrückt, und drücken Sie die Punkttaste (.) oder klicken Sie mit der Maus auf das Symbol, um das Hilfedialogfeld im Code-Editor zu öffnen, um die using-Direktive für den Models-Namespace automatisch auszufüllen.

Verwenden der IntelliSense-Unterstützung für Namespacedeklarationen

Ändern Sie den Code für die Get-Methode , sodass es ein Array von Kontaktmodellinstanzen zurückgibt.

(Codeausschnitt - Web API Lab - Ex01 - Zurückgeben einer Liste von Kontakten)

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

Drücken Sie F5 , um die Webanwendung im Browser zu debuggen. Führen Sie die folgenden Schritte aus, um die an der Antwortausgabe der API vorgenommenen Änderungen anzuzeigen.
1. Sobald der Browser geöffnet wird, drücken Sie F12 , wenn die Entwicklertools noch nicht geöffnet sind.
2. Klicken Sie auf die Registerkarte "Netzwerk ".
3. Drücken Sie die Schaltfläche "Aufzeichnung starten" .
4. Fügen Sie das URL-Suffix /api/contact zur URL in der Adressleiste hinzu, und drücken Sie die EINGABETASTE .
5. Drücken Sie die Schaltfläche "Gehe zu detaillierter Ansicht ".
6. Wählen Sie die Registerkarte " Antworttext" aus . Es sollte eine JSON-Zeichenfolge angezeigt werden, die die serialisierte Form eines Arrays von Kontaktinstanzen darstellt.
  
  Serialisierte JSON-Ausgabe eines komplexen Web-API-Methodenaufrufs

Aufgabe 4 – Extrahieren der Funktionalität in eine Dienstebene

Diese Aufgabe veranschaulicht, wie Funktionen in eine Dienstebene extrahiert werden, damit Entwickler ihre Dienstfunktionen von der Controllerebene trennen können, wodurch die Wiederverwendbarkeit der Dienste ermöglicht wird, die tatsächlich die Arbeit erledigen.

Erstellen Sie einen neuen Ordner im Lösungsstamm, und nennen Sie ihn "Dienste". Klicken Sie dazu mit der rechten Maustaste auf das ContactManager-Projekt, wählen Sie "Neuen Ordner hinzufügen | " aus, nennen Sie es "Dienste".

Ordner "Dienste erstellen"
Klicken Sie mit der rechten Maustaste auf den Ordner "Dienste ", und wählen Sie im Kontextmenü "Hinzufügen | Klasse" aus.

Hinzufügen einer neuen Klasse zum Ordner "Dienste"
Wenn das Dialogfeld "Neues Element hinzufügen" angezeigt wird, benennen Sie die neue Klasse "ContactRepository ", und klicken Sie auf " Hinzufügen".

Erstellen einer Klassendatei, die den Code für die Kontakt-Repository-Dienstebene enthält
Fügen Sie der ContactRepository.cs-Datei eine Using-Direktive hinzu, um den Modellnamespace einzuschließen.
```
using ContactManager.Models;
```

Fügen Sie der ContactRepository.cs Datei den folgenden hervorgehobenen Code hinzu, um die GetAllContacts-Methode zu implementieren.

(Codeausschnitt - Web API Lab - Ex01 - Contact Repository)

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

Öffnen Sie die ContactController.cs Datei, wenn sie noch nicht geöffnet ist.
Fügen Sie dem Namespacedeklarationsbereich der Datei die folgende using-Anweisung hinzu.
```
using ContactManager.Services;
```
Fügen Sie der ContactController.cs Klasse den folgenden hervorgehobenen Code hinzu, um ein privates Feld hinzuzufügen, um die Instanz des Repositorys darzustellen, damit die restlichen Klassenmember die Dienstimplementierung verwenden können.

(Codeausschnitt - Web API Lab - Ex01 - Contact Controller)
```
public class ContactController : ApiController
{
    private ContactRepository contactRepository;

    public ContactController()
    {
        this.contactRepository = new ContactRepository();
    } 
    ...
}
```
Ändern Sie die Get-Methode so, dass sie den Kontakt-Repositorydienst verwendet.

(Codeausschnitt - Web API Lab - Ex01 - Zurückgeben einer Liste von Kontakten über das Repository)
```
public Contact[] Get()
{
    return contactRepository.GetAllContacts();
}
```
Platzieren Sie einen Haltepunkt in der Get-Methodendefinition von ContactController.

Hinzufügen von Haltepunkten zum Kontaktcontroller

Hinzufügen von Haltepunkten zum Kontaktcontroller 11. Drücken Sie F5 , um die Anwendung auszuführen. 12. Wenn der Browser geöffnet wird, drücken Sie F12 , um die Entwicklertools zu öffnen. 13. Klicken Sie auf die Registerkarte "Netzwerk ". 14. Klicken Sie auf die Schaltfläche "Aufzeichnung starten" . 15. Fügen Sie die URL in der Adressleiste mit dem Suffix "/api/contact " an, und drücken Sie die EINGABETASTE , um den API-Controller zu laden. 16. Visual Studio 2012 sollte unterbrochen werden, sobald die Get-Methode mit der Ausführung beginnt.

Unterbrechen innerhalb der Get-Methode

Unterbrechung innerhalb der Get-Methode 17. Drücken Sie F5 , um fortzufahren. 18. Wechseln Sie zurück zu Internet Explorer, wenn sie noch nicht im Fokus ist. Beachten Sie das Netzwerkaufnahmefenster.

Netzwerkansicht in Internet Explorer mit Ergebnissen des Web-API-Aufrufs

Netzwerkansicht in Internet Explorer mit Ergebnissen des Web-API-Aufrufs 19. Klicken Sie auf die Schaltfläche "Gehe zu detaillierter Ansicht ". 20. Klicken Sie auf die Registerkarte "Antworttext ". Beachten Sie die JSON-Ausgabe des API-Aufrufs und wie sie die beiden Kontakte darstellt, die von der Dienstebene abgerufen wurden.

Anzeigen der JSON-Ausgabe aus der Web-API im Entwicklertoolsfenster

Anzeigen der JSON-Ausgabe aus der Web-API im Entwicklertoolsfenster

Übung 2: Erstellen einer Lese-/Schreib-Web-API

In dieser Übung implementieren Sie POST- und PUT-Methoden für den Kontakt-Manager, um sie mit Datenbearbeitungsfeatures zu aktivieren.

Aufgabe 1 – Öffnen des Web-API-Projekts

In dieser Aufgabe bereiten Sie sich darauf vor, das in Übung 1 erstellte Web-API-Projekt zu verbessern, sodass benutzereingaben akzeptiert werden können.

Führen Sie Visual Studio 2012 Express für Web aus, um dies zu starten , und geben Sie VS Express für Web ein, und drücken Sie dann die EINGABETASTE.
Öffnen Sie die Begin-Lösung unter Source/Ex02-ReadWriteWebAPI/Begin/ Folder. Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.
1. Wenn Sie die bereitgestellte Begin-Lösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü "Projekt", und wählen Sie "NuGet-Pakete verwalten" aus.
2. Klicken Sie im Dialogfeld "NuGet-Pakete verwalten" auf " Wiederherstellen ", um fehlende Pakete herunterzuladen.
3. Erstellen Sie schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.
  
  Hinweis
  
  Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie alle erforderlichen Bibliotheken beim ersten Ausführen des Projekts herunterladen, indem Sie die Paketversionen in der Datei "Packages.config" angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus dieser Übung geöffnet haben.
Öffnen Sie die Datei "Dienste/ContactRepository.cs ".

Aufgabe 2 : Hinzufügen von Datenpersistenzfeatures zur Implementierung des Kontakt-Repositorys

In dieser Aufgabe erweitern Sie die ContactRepository-Klasse des web-API-Projekts, das in Übung 1 erstellt wurde, damit sie benutzereingaben und neue Kontaktinstanzen beibehalten und akzeptieren kann.

Fügen Sie der ContactRepository-Klasse die folgende Konstante hinzu, um den Namen des Webservercacheelementschlüsselnamens weiter unten in dieser Übung darzustellen.
```
private const string CacheKey = "ContactStore";
```

Fügen Sie dem ContactRepository einen Konstruktor hinzu, der den folgenden Code enthält.

(Codeausschnitt - Web API Lab - Ex02 - Contact Repository Constructor)

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;
        }
    }
}

Ändern Sie den Code für die GetAllContacts-Methode , wie unten dargestellt.

(Codeausschnitt - Web API Lab - Ex02 – Abrufen aller Kontakte)
```
public Contact[] GetAllContacts()
{
    var ctx = HttpContext.Current;

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

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

Dieses Beispiel dient zu Demonstrationszwecken und verwendet den Cache des Webservers als Speichermedium, sodass die Werte für mehrere Clients gleichzeitig verfügbar sind, anstatt einen Sitzungsspeichermechanismus oder eine Anforderungsspeicherzeit zu verwenden. Man könnte Entity Framework, XML-Speicher oder eine andere Variante anstelle des Webservercaches verwenden.

Implementieren Sie eine neue Methode namens SaveContact in die ContactRepository-Klasse , um die Arbeit zum Speichern eines Kontakts auszuführen. Die SaveContact-Methode sollte einen einzelnen Contact-Parameter verwenden und einen booleschen Wert zurückgeben, der den Erfolg oder Fehler angibt.

(Codeausschnitt - Web API Lab - Ex02 – Implementieren der SaveContact-Methode)

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;
}

Übung 3: Verwenden der Web-API von einem HTML-Client

In dieser Übung erstellen Sie einen HTML-Client zum Aufrufen der Web-API. Dieser Client erleichtert den Datenaustausch mit der Web-API mit JavaScript und zeigt die Ergebnisse in einem Webbrowser mit HTML-Markup an.

Aufgabe 1 : Ändern der Indexansicht zum Bereitstellen einer GUI zum Anzeigen von Kontakten

In dieser Aufgabe ändern Sie die Standardindexansicht der Webanwendung, um die Anforderung zum Anzeigen der Liste vorhandener Kontakte in einem HTML-Browser zu unterstützen.

Öffnen Sie Visual Studio 2012 Express für Web , wenn sie noch nicht geöffnet ist.
Öffnen Sie die Begin-Lösung im Ordner Source/Ex03-ConsumingWebAPI/Begin/ . Andernfalls verwenden Sie möglicherweise die, die Sie durch Ausführen der vorherigen Übung erhalten haben.
1. Wenn Sie die bereitgestellte Begin-Lösung geöffnet haben, müssen Sie einige fehlende NuGet-Pakete herunterladen, bevor Sie fortfahren. Klicken Sie hierzu auf das Menü "Projekt", und wählen Sie "NuGet-Pakete verwalten" aus.
2. Klicken Sie im Dialogfeld "NuGet-Pakete verwalten" auf " Wiederherstellen ", um fehlende Pakete herunterzuladen.
3. Erstellen Sie schließlich die Lösung, indem Sie auf "Buildlösung erstellen | " klicken.
  
  Hinweis
  
  Einer der Vorteile der Verwendung von NuGet besteht darin, dass Sie nicht alle Bibliotheken in Ihrem Projekt versenden müssen, wodurch die Projektgröße reduziert wird. Mit NuGet Power Tools können Sie alle erforderlichen Bibliotheken beim ersten Ausführen des Projekts herunterladen, indem Sie die Paketversionen in der Datei "Packages.config" angeben. Aus diesem Grund müssen Sie diese Schritte ausführen, nachdem Sie eine vorhandene Lösung aus dieser Übung geöffnet haben.
Öffnen Sie die Datei Index.cshtml , die sich im Ordner "Views/Home " befindet.
Ersetzen Sie den HTML-Code innerhalb des div-Elements durch den ID-Textkörper, sodass er wie der folgende Code aussieht.
```
<div id="body">
    <ul id="contacts"></ul>
</div>
```

Fügen Sie unten in der Datei den folgenden Javascript-Code hinzu, um die HTTP-Anforderung an die Web-API auszuführen.

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

Öffnen Sie die ContactController.cs Datei, wenn sie noch nicht geöffnet ist.
Platzieren Sie einen Haltepunkt in der Get-Methode der ContactController-Klasse .

Platzieren eines Haltepunkts auf der Get-Methode des API-Controllers
Drücken Sie F5, um das Projekt auszuführen. Der Browser lädt das HTML-Dokument.

Hinweis

Stellen Sie sicher, dass Sie zur Stamm-URL Ihrer Anwendung navigieren.
Sobald die Seite geladen und javaScript ausgeführt wird, wird der Haltepunkt erreicht, und die Codeausführung wird im Controller angehalten.

Debuggen im Web-API-Aufruf mit Visual Studio 2012 Express für Web
Entfernen Sie den Haltepunkt, und drücken Sie F5 oder die Schaltfläche "Weiter ", um das Laden der Ansicht im Browser fortzusetzen. Nach Abschluss des Web-API-Aufrufs sollten die vom Web-API-Aufruf zurückgegebenen Kontakte als Listenelemente im Browser angezeigt werden.

Ergebnisse des API-Aufrufs, der im Browser als Listenelemente angezeigt wird
Beenden des Debuggens.

Aufgabe 2 : Ändern der Indexansicht zum Bereitstellen einer GUI zum Erstellen von Kontakten

In dieser Aufgabe ändern Sie weiterhin die Indexansicht der MVC-Anwendung. Ein Formular wird der HTML-Seite hinzugefügt, die Benutzereingaben erfasst und an die Web-API sendet, um einen neuen Kontakt zu erstellen, und eine neue Web-API-Controllermethode wird erstellt, um Datum aus der GUI zu erfassen.

Öffnen Sie die ContactController.cs Datei.

Fügen Sie der Controllerklasse eine neue Methode mit dem Namen Post hinzu, wie im folgenden Code gezeigt.

(Codeausschnitt - Web API Lab - Ex03 - Post-Methode)

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

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

    return response;
}

Öffnen Sie die Datei Index.cshtml in Visual Studio, wenn sie noch nicht geöffnet ist.

Fügen Sie den folgenden HTML-Code direkt nach der ungeordneten Liste, die Sie in der vorherigen Aufgabe hinzugefügt haben, der Datei hinzu.

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

Fügen Sie im Skriptelement unten im Dokument den folgenden hervorgehobenen Code zum Behandeln von Schaltflächenklickereignissen hinzu, der die Daten mithilfe eines HTTP POST-Aufrufs an die Web-API sendet.

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

Platzieren Sie in ContactController.cs einen Haltepunkt auf der Post-Methode.
Drücken Sie F5 , um die Anwendung im Browser auszuführen.
Nachdem die Seite im Browser geladen wurde, geben Sie einen neuen Kontaktnamen und die ID ein, und klicken Sie auf die Schaltfläche "Speichern ".

Das im Browser geladene CLIENT-HTML-Dokument
Wenn das Debuggerfenster in der Post-Methode umgebrochen wird, sehen Sie sich die Eigenschaften des Kontaktparameters an. Die Werte sollten mit den Daten übereinstimmen, die Sie im Formular eingegeben haben.

Das Contact-Objekt, das vom Client an die Web-API gesendet wird
Durchlaufen Sie die Methode im Debugger, bis die Antwortvariable erstellt wurde. Beim Überprüfen im Fenster "Lokal" im Debugger sehen Sie, dass alle Eigenschaften festgelegt wurden.

Die Antwort nach der Erstellung im Debugger

Die Antwort nach der Erstellung im Debugger 11. Wenn Sie F5 drücken oder im Debugger auf "Weiter" klicken, wird die Anforderung abgeschlossen. Sobald Sie zum Browser zurückkehren, wurde der neue Kontakt zur Liste der Kontakte hinzugefügt, die von der ContactRepository-Implementierung gespeichert wurden.

Der Browser spiegelt die erfolgreiche Erstellung der neuen Kontaktinstanz wider.

Der Browser spiegelt die erfolgreiche Erstellung der neuen Kontaktinstanz wider.

Hinweis

Darüber hinaus können Sie diese Anwendung in Azure im folgenden Anhang C bereitstellen: Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy.

Zusammenfassung

In dieser Übung haben Sie das neue ASP.NET-Web-API Framework und die Implementierung von RESTful-Web-APIs mithilfe des Frameworks eingeführt. Von hier aus können Sie ein neues Repository erstellen, das die Datenpersistenz mit einer beliebigen Anzahl von Mechanismen erleichtert und diese dienste über das einfache, wie in diesem Labor bereitgestellte. Die Web-API unterstützt eine Reihe zusätzlicher Features, z. B. das Aktivieren der Kommunikation von Nicht-HTML-Clients, die in jeder Sprache geschrieben wurden, die HTTP und JSON oder XML unterstützt. Die Möglichkeit, eine Web-API außerhalb einer typischen Webanwendung zu hosten, ist ebenfalls möglich und die Möglichkeit, eigene Serialisierungsformate zu erstellen.

Die ASP.NET-Website verfügt über einen Bereich, der dem ASP.NET-Web-API Framework unter [https://asp.net/web-api](https://asp.net/web-api) zugeordnet ist. Diese Website bietet weiterhin aktuelle Informationen, Beispiele und Neuigkeiten im Zusammenhang mit der Web-API. Überprüfen Sie sie daher häufig, wenn Sie sich genauer mit der Kunst befassen möchten, benutzerdefinierte Web-APIs zu erstellen, die praktisch jedem Gerät oder Entwicklungsframework zur Verfügung stehen.

Anhang A: Verwenden von Codeausschnitten

Mit Codeausschnitten verfügen Sie über den gesamten Code, den Sie benötigen, jederzeit. Das Lab-Dokument teilt Ihnen genau mit, wann Sie sie verwenden können, wie in der folgenden Abbildung dargestellt.

Verwenden von Visual Studio-Codeausschnitten zum Einfügen von Code in Ihr Projekt

Verwenden von Visual Studio-Codeausschnitten zum Einfügen von Code in Ihr Projekt

So fügen Sie einen Codeausschnitt mithilfe der Tastatur hinzu (nur C#)

Platzieren Sie den Cursor an der Stelle, an der Sie den Code einfügen möchten.
Beginnen Sie mit der Eingabe des Codeausschnittnamens (ohne Leerzeichen oder Bindestriche).
Sehen Sie sich an, wie IntelliSense übereinstimmende Codeausschnittnamen anzeigt.
Wählen Sie den richtigen Codeausschnitt aus (oder halten Sie die Eingabe, bis der Name des gesamten Codeausschnitts ausgewählt ist).
Drücken Sie zweimal die TAB-TASTE, um den Codeausschnitt an der Cursorposition einzufügen.

Beginnen Sie mit der Eingabe des Codeausschnittnamens.

Drücken Sie die TAB-TASTE, um den hervorgehobenen Codeausschnitt auszuwählen.

Drücken Sie erneut die TAB-TASTE, und der Codeausschnitt wird erweitert.

So fügen Sie einen Codeausschnitt mit der Maus hinzu (C#, Visual Basic und XML)

Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten.
Wählen Sie "Codeausschnitt einfügen" gefolgt von "Codeausschnitte" aus.
Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Klicken Sie mit der rechten Maustaste auf die Stelle, an der Sie den Codeausschnitt einfügen möchten, und wählen Sie "Codeausschnitt einfügen" aus.

Wählen Sie den relevanten Codeausschnitt aus der Liste aus, indem Sie darauf klicken.

Anhang B: Installieren von Visual Studio Express 2012 für Web

Sie können Microsoft Visual Studio Express 2012 für Web oder eine andere "Express"-Version mit dem Microsoft-Webplattform Installer installieren. Die folgenden Anweisungen führen Sie durch die Schritte, die zum Installieren von Visual Studio Express 2012 für Web mit Microsoft-Webplattform Installer erforderlich sind.

Wechseln Sie zu [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Wenn Sie das Webplattform-Installationsprogramm bereits installiert haben, können Sie es öffnen und nach dem Produkt "Visual Studio Express 2012 for Web with Azure SDK" suchen.
Klicken Sie auf "Jetzt installieren". Wenn Sie nicht über das Webplattform-Installationsprogramm verfügen, werden Sie umgeleitet, um es zuerst herunterzuladen und zu installieren.
Klicken Sie nach dem Öffnen des Webplattform-Installers auf "Installieren ", um das Setup zu starten.

Installieren von Visual Studio Express
Lesen Sie alle Lizenzen und Bedingungen der Produkte, und klicken Sie auf "Ich stimme zu", um den Vorgang fortzusetzen.

Akzeptieren der Lizenzbedingungen
Warten Sie, bis der Download- und Installationsprozess abgeschlossen ist.

Installationsfortschritt
Wenn die Installation abgeschlossen ist, klicken Sie auf "Fertig stellen".

Installation abgeschlossen
Klicken Sie auf "Beenden ", um den Webplattform-Installer zu schließen.
Um Visual Studio Express für Web zu öffnen, wechseln Sie zum Startbildschirm, und beginnen Sie mit dem Schreiben von "VS Express", und klicken Sie dann auf die VS Express für Webkachel.

VS Express für Webkachel

Anhang C: Veröffentlichen einer ASP.NET MVC 4-Anwendung mit Web Deploy

In diesem Anhang wird gezeigt, wie Sie eine neue Website aus dem Azure-Portal erstellen und die Anwendung veröffentlichen, die Sie erhalten haben, indem Sie die von Azure bereitgestellte Web Deploy-Veröffentlichungsfunktion nutzen.

Aufgabe 1 – Erstellen einer neuen Website über das Azure-Portal

Wechseln Sie zum Azure-Verwaltungsportal , und melden Sie sich mit den Microsoft-Anmeldeinformationen an, die Ihrem Abonnement zugeordnet sind.

Hinweis

Mit Azure können Sie 10 ASP.NET Websites kostenlos hosten und dann skalieren, wenn Ihr Datenverkehr wächst. Sie können sich hier registrieren.

Anmelden beim Portal
Klicken Sie auf der Befehlsleiste auf "Neu ".

Erstellen einer neuen Website
Klicken Sie auf "Computewebsite | ". Wählen Sie dann die Option "Schnellerstellung " aus. Geben Sie eine verfügbare URL für die neue Website an, und klicken Sie auf " Website erstellen".

Hinweis

Azure ist der Host für eine Webanwendung, die in der Cloud ausgeführt wird, die Sie steuern und verwalten können. Mit der Option "Schnellerstellung" können Sie eine fertige Webanwendung von außerhalb des Portals in Azure bereitstellen. Sie enthält keine Schritte zum Einrichten einer Datenbank.

Erstellen einer neuen Website mithilfe der Schnellerstellung
Warten Sie, bis die neue Website erstellt wird.
Nachdem die Website erstellt wurde, klicken Sie auf den Link unter der URL-Spalte . Überprüfen Sie, ob die neue Website funktioniert.

Navigieren zur neuen Website

Website wird ausgeführt
Wechseln Sie zurück zum Portal, und klicken Sie auf den Namen der Website unter der Spalte "Name ", um die Verwaltungsseiten anzuzeigen.

Öffnen der Websiteverwaltungsseiten
Klicken Sie auf der Seite "Dashboard " im Abschnitt "Schnellblick " auf den Link "Veröffentlichungsprofil herunterladen".

Hinweis

Das Veröffentlichungsprofil enthält alle Informationen, die zum Veröffentlichen einer Webanwendung in einer Azure für jede aktivierte Publikationsmethode erforderlich sind. Das Veröffentlichungsprofil enthält die URLs, Benutzeranmeldeinformationen und Datenbankzeichenfolgen, die erforderlich sind, um eine Verbindung mit jedem der Endpunkte herzustellen und zu authentifizieren, für die eine Publikationsmethode aktiviert ist. Microsoft WebMatrix 2, Microsoft Visual Studio Express für Web und Microsoft Visual Studio 2012 unterstützen das Lesen von Veröffentlichungsprofilen, um die Konfiguration dieser Programme zum Veröffentlichen von Webanwendungen in Azure zu automatisieren.

Herunterladen des Veröffentlichungsprofils der Website
Laden Sie die Veröffentlichungsprofildatei an einen bekannten Speicherort herunter. Weiter in dieser Übung erfahren Sie, wie Sie diese Datei verwenden, um eine Webanwendung aus Visual Studio in Azure zu veröffentlichen.

Speichern der Veröffentlichungsprofildatei

Aufgabe 2 : Konfigurieren des Datenbankservers

Wenn Ihre Anwendung SQL Server-Datenbanken verwendet, müssen Sie einen SQL-Datenbank Server erstellen. Wenn Sie eine einfache Anwendung bereitstellen möchten, die sql Server nicht verwendet, überspringen Sie diese Aufgabe möglicherweise.

Sie benötigen einen SQL-Datenbank Server zum Speichern der Anwendungsdatenbank. Sie können die SQL-Datenbank Server aus Ihrem Abonnement im Azure-Verwaltungsportal im Dashboard von Sql Databases | Servers anzeigen | . Wenn Sie keinen Server erstellt haben, können Sie einen mit der Schaltfläche "Hinzufügen " auf der Befehlsleiste erstellen. Notieren Sie sich den Servernamen und die URL, den Administratoranmeldungsnamen und das Kennwort, wie Sie sie in den nächsten Aufgaben verwenden werden. Erstellen Sie die Datenbank noch nicht, da sie in einer späteren Phase erstellt wird.

SQL-Datenbank Serverdashboard
In der nächsten Aufgabe testen Sie die Datenbankverbindung von Visual Studio, aus diesem Grund müssen Sie Ihre lokale IP-Adresse in die Liste der zulässigen IP-Adressen des Servers aufnehmen. Klicken Sie dazu auf "Konfigurieren", wählen Sie die IP-Adresse aus der aktuellen Client-IP-Adresse aus, fügen Sie sie in die Textfelder "START-IP-Adresse " und "IP-Adresse beenden" ein, und klicken Sie auf die Schaltfläche.

Hinzufügen der Client-IP-Adresse
Nachdem die Client-IP-Adresse der Liste zulässiger IP-Adressen hinzugefügt wurde, klicken Sie auf " Speichern ", um die Änderungen zu bestätigen.

Änderungen bestätigen

Aufgabe 3 – Veröffentlichen einer ASP.NET MVC 4-Anwendung mithilfe von Web Deploy

Wechseln Sie zurück zur ASP.NET MVC 4-Lösung. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Websiteprojekt, und wählen Sie "Veröffentlichen" aus.

Veröffentlichen der Website
Importieren Sie das Veröffentlichungsprofil, das Sie in der ersten Aufgabe gespeichert haben.

Importieren des Veröffentlichungsprofils
Klicken Sie auf " Verbindung überprüfen". Klicken Sie nach Abschluss der Überprüfung auf Weiter.

Hinweis

Die Überprüfung ist abgeschlossen, sobald neben der Schaltfläche "Verbindung überprüfen" ein grünes Häkchen angezeigt wird.

Überprüfen der Verbindung
Klicken Sie auf der Seite "Einstellungen " im Abschnitt "Datenbanken " auf die Schaltfläche neben dem Textfeld ihrer Datenbankverbindung (d. h. DefaultConnection).

Webbereitstellungskonfiguration
Konfigurieren Sie die Datenbankverbindung wie folgt:
- Geben Sie im Servernamen ihre SQL-Datenbank Server-URL mit dem Präfix tcp: ein.
- Geben Sie unter " Benutzername" den Anmeldenamen des Serveradministrators ein.
- Geben Sie im Kennwort das Anmeldekennwort ihres Serveradministrators ein.
- Geben Sie einen neuen Datenbanknamen ein, z. B. MVC4SampleDB.
  
  Konfigurieren von Ziel-Verbindungszeichenfolge
Klicken Sie dann auf OK. Wenn Sie aufgefordert werden, die Datenbank zu erstellen, klicken Sie auf "Ja".

Erstellen der Datenbank
Die Verbindungszeichenfolge, die Sie zum Herstellen einer Verbindung mit SQL-Datenbank in Windows Azure verwenden, wird im Textfeld "Standardverbindung" angezeigt. Klicken Sie dann auf Weiter.

Verbindungszeichenfolge, die auf SQL-Datenbank zeigt
Klicken Sie auf der Seite "Vorschau " auf "Veröffentlichen".

Veröffentlichen der Webanwendung
Sobald der Veröffentlichungsprozess abgeschlossen ist, öffnet Ihr Standardbrowser die veröffentlichte Website.

Anwendung, die in Azure veröffentlicht wurde