Praktische Übungseinheiten: One ASP.NET: Integrieren von ASP.NET Web Forms, MVC und Web-API

2023-07-13

Herunterladen des Trainingskits für Webcamps

ASP.NET ist ein Framework zum Erstellen von Websites, Apps und Diensten mit spezialisierten Technologien wie MVC, Web-API und anderen. Mit der Erweiterung ASP.NET seit ihrer Gründung und der zum Ausdruck gebrachten Notwendigkeit, diese Technologien zu integrieren, gab es in jüngster Zeit Bestrebungen, auf eine ASP.NET hinzuarbeiten.

Visual Studio 2013 führt ein neues einheitliches Projektsystem ein, mit dem Sie eine Anwendung erstellen und alle ASP.NET Technologien in einem Projekt verwenden können. Dieses Feature beseitigt die Notwendigkeit, zu Beginn eines Projekts eine Technologie zu wählen und daran zu bleiben, und fördert stattdessen die Verwendung mehrerer ASP.NET Frameworks innerhalb eines Projekts.

Alle Beispielcode und Codeausschnitte sind im Web Camps Training Kit enthalten, das unter https://aka.ms/webcamps-training-kitverfügbar ist.

Überblick

Ziele

In diesem praktischen Lab lernen Sie Folgendes:

Erstellen einer Website basierend auf dem Projekttyp One ASP.NET
Verwenden verschiedener ASP.NET Frameworks wie MVC und Web-API im selben Projekt
Identifizieren der Standard Komponenten einer ASP.NET Anwendung
Nutzen Sie das framework ASP.NET Gerüstbau , um automatisch Controller und Ansichten zu erstellen, um CRUD-Vorgänge basierend auf Ihren Modellklassen auszuführen.
Verfügbarmachen derselben Informationsmenge in maschinen- und für Menschen lesbaren Formaten mithilfe des richtigen Tools für jeden Auftrag

Voraussetzungen

Folgendes ist erforderlich, um dieses praktische Lab abzuschließen:

Visual Studio Express 2013 für Web oder höher
Visual Studio 2013 Update 1

Einrichten

Um die Übungen in diesem praktischen Lab auszuführen, müssen Sie zuerst Ihre Umgebung einrichten.

Öffnen Sie Windows Explorer, und navigieren Sie zum Ordner Quelle des Labs.
Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie Als Administrator ausführen aus, um den Setupprozess zu starten, mit dem Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für dieses Lab installiert werden.
Wenn das Dialogfeld Benutzerkontensteuerung angezeigt wird, bestätigen Sie, dass die Aktion fortgesetzt werden soll.

Hinweis

Stellen Sie sicher, dass Sie alle Abhängigkeiten für dieses Lab überprüft haben, bevor Sie das Setup ausführen.

Verwenden der Codeausschnitte

Im gesamten Labdokument werden Sie angewiesen, Codeblöcke einzufügen. Zur Vereinfachung wird der größte Teil dieses Codes als Visual Studio Code-Codeausschnitte bereitgestellt, auf die Sie von Visual Studio 2013 aus zugreifen können, um zu vermeiden, dass er manuell hinzugefügt werden muss.

Hinweis

Jede Übung wird von einer Startlösung begleitet, die sich im Ordner Begin der Übung befindet, mit der Sie jede Übung unabhängig von den anderen verfolgen können. Beachten Sie, dass die Codeausschnitte, die während einer Übung hinzugefügt werden, in diesen Startlösungen fehlen und möglicherweise erst funktionieren, wenn Sie die Übung abgeschlossen haben. Im Quellcode für eine Übung finden Sie auch einen Ordner End , der eine Visual Studio-Projektmappe mit dem Code enthält, der sich aus dem Ausführen der Schritte in der entsprechenden Übung ergibt. Sie können diese Lösungen als Leitfaden verwenden, wenn Sie zusätzliche Hilfe benötigen, während Sie dieses praktische Lab durchlaufen.

Übungen

Dieses praktische Lab umfasst die folgenden Übungen:

Erstellen eines neuen Web Forms-Projekts
Erstellen eines MVC-Controllers mithilfe des Gerüstbaus
Erstellen eines Web-API-Controllers mithilfe des Gerüstbaus

Geschätzte Zeit für die Durchführung dieses Labs: 60 Minuten

Hinweis

Wenn Sie Visual Studio zum ersten Mal starten, müssen Sie eine der vordefinierten Einstellungssammlungen auswählen. Jede vordefinierte Sammlung ist so konzipiert, dass sie einem bestimmten Entwicklungsstil entspricht, und bestimmt Fensterlayouts, Editorverhalten, IntelliSense-Codeausschnitte und Dialogfeldoptionen. Die Prozeduren in diesem Lab beschreiben die Aktionen, die zum Ausführen einer bestimmten Aufgabe in Visual Studio bei Verwendung der Sammlung Allgemeine Entwicklungseinstellungen erforderlich sind. Wenn Sie eine andere Einstellungssammlung für Ihre Entwicklungsumgebung auswählen, gibt es möglicherweise Unterschiede in den Schritten, die Sie berücksichtigen sollten.

Übung 1: Erstellen eines neuen Web Forms-Projekts

In dieser Übung erstellen Sie eine neue Web Forms-Website in Visual Studio 2013 mithilfe der einheitlichen Projektumgebung One ASP.NET, die Ihnen die einfache Integration Web Forms-, MVC- und Web-API-Komponenten in derselben Anwendung ermöglicht. Anschließend untersuchen Sie die generierte Lösung und identifizieren ihre Teile, und schließlich sehen Sie die Website in Aktion.

Aufgabe 1: Erstellen einer neuen Website mithilfe der ASP.NET-Benutzeroberfläche

In dieser Aufgabe beginnen Sie mit dem Erstellen einer neuen Website in Visual Studio, die auf dem Projekttyp One ASP.NET basiert. Eine ASP.NET vereint alle ASP.NET Technologien und gibt Ihnen die Möglichkeit, diese nach Belieben zu mischen und abzugleichen. Sie erkennen dann die verschiedenen Komponenten von Web Forms, MVC und Web-API, die nebeneinander in Ihrer Anwendung vorhanden sind.

Öffnen Sie Visual Studio Express 2013 für Web, und wählen Sie Datei | Neues Projekt... , um eine neue Lösung zu starten.

Erstellen eines neuen Projekts
Wählen Sie im Dialogfeld Neues Projekt die Option ASP.NET Webanwendung unter Visual C# | Webregisterkarte, und stellen Sie sicher, dass .NET Framework 4.5 ausgewählt ist. Nennen Sie das Projekt MyHybridSite, wählen Sie einen Standort aus, und klicken Sie auf OK.

Erstellen eines neuen ASP.NET Webanwendungsprojekts
Wählen Sie im Dialogfeld Neues ASP.NET Projekt die Web Forms Vorlage aus, und wählen Sie die Optionen MVC und Web-API aus. Stellen Sie außerdem sicher, dass die Authentifizierungsoption auf Einzelne Benutzerkonten festgelegt ist. Klicken Sie zum Fortsetzen des Vorgangs auf OK .

Erstellen eines neuen Projekts mit der Web Forms-Vorlage, einschließlich Web-API und MVC-Komponenten
Sie können nun die Struktur der generierten Lösung untersuchen.

Untersuchen der generierten Lösung
1. Konto: Dieser Ordner enthält die Webformularseiten zum Registrieren, Anmelden und Verwalten der Benutzerkonten der Anwendung. Dieser Ordner wird hinzugefügt, wenn die Authentifizierungsoption Einzelne Benutzerkonten während der Konfiguration der Web Forms Projektvorlage ausgewählt ist.
2. Modelle: Dieser Ordner enthält die Klassen, die Ihre Anwendungsdaten darstellen.
3. Controller und Ansichten: Diese Ordner sind für die komponenten ASP.NET MVC und ASP.NET-Web-API erforderlich. In den nächsten Übungen erkunden Sie die MVC- und Web-API-Technologien.
4. Die Dateien Default.aspx, Contact.aspx und About.aspx sind vordefinierte Webformularseiten, die Sie als Ausgangspunkte verwenden können, um die für Ihre Anwendung spezifischen Seiten zu erstellen. Die Programmierlogik dieser Dateien befindet sich in einer separaten Datei, die als "CodeBehind-Datei" bezeichnet wird, die eine Erweiterung ".aspx.vb" oder ".aspx.cs" aufweist (abhängig von der verwendeten Sprache). Die CodeBehind-Logik wird auf dem Server ausgeführt und erzeugt dynamisch die HTML-Ausgabe für Ihre Seite.
5. Die Seiten Site.Master und Site.Mobile.Master definieren das Erscheinungsbild und das Standardverhalten aller Seiten in der Anwendung.
Doppelklicken Sie auf die Datei Default.aspx , um den Inhalt der Seite zu erkunden.

Erkunden der Seite "Default.aspx"

Hinweis

Die Page-Anweisung am Anfang der Datei definiert die Attribute der Web Forms Seite. Das MasterPageFile-Attribut gibt beispielsweise den Pfad zur master Seite an, in diesem Fall die Seite Site.Master, und das Inherits-Attribut definiert die CodeBehind-Klasse für die zu erbende Seite. Diese Klasse befindet sich in der Datei, die durch das CodeBehind-Attribut bestimmt wird.

Das asp:Content-Steuerelement enthält den tatsächlichen Inhalt der Seite (Text, Markup und Steuerelemente) und ist einem asp:ContentPlaceHolder-Steuerelement auf der master Seite zugeordnet. In diesem Fall wird der Seiteninhalt innerhalb des MainContent-Steuerelements gerendert, das auf der Seite Site.Master definiert ist.
Erweitern Sie den Ordner App_Start , und beachten Sie die Datei WebApiConfig.cs . Visual Studio hat diese Datei in die generierte Projektmappe eingeschlossen, da Sie die Web-API beim Konfigurieren Ihres Projekts mit der Vorlage One ASP.NET eingeschlossen haben.

Öffnen Sie die Datei WebApiConfig.cs . In der WebApiConfig-Klasse finden Sie die Konfiguration, die der Web-API zugeordnet ist, die HTTP-Routen Web-API-Controllern zuordnet.

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

Öffnen Sie die Datei RouteConfig.cs . In der RegisterRoutes-Methode finden Sie die MVC zugeordnete Konfiguration, die HTTP-Routen MVC-Controllern ordnet.

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

Aufgabe 2: Ausführen der Projektmappe

In dieser Aufgabe führen Sie die generierte Lösung aus, erkunden die App und einige ihrer Features, z. B. url-Umschreiben und integrierte Authentifizierung.

Um die Projektmappe auszuführen, drücken Sie F5 , oder klicken Sie auf die Schaltfläche Start auf der Symbolleiste. Die Startseite der Anwendung sollte im Browser geöffnet werden.
Vergewissern Sie sich, dass die Web Forms Seiten aufgerufen werden. Fügen Sie dazu /contact.aspx an die URL in der Adressleiste an, und drücken Sie die EINGABETASTE.

Besser lesbare URLs

Hinweis

Wie Sie sehen können, ändert sich die URL in /contact. Ab ASP.NET 4 wurden Web Forms URL-Routingfunktionen hinzugefügt, sodass Sie URLs wie http://www.mysite.com/products/software anstelle von http://www.mysite.com/products.aspx?category=softwareschreiben können. Weitere Informationen finden Sie unter URL-Routing.
Sie untersuchen nun den in die Anwendung integrierten Authentifizierungsfluss. Klicken Sie dazu in der oberen rechten Ecke der Seite auf Registrieren .

Registrieren eines neuen Benutzers
Geben Sie auf der Seite Registrieren einen Benutzernamen und ein Kennwort ein, und klicken Sie dann auf Registrieren.

Seite "Registrieren"
Die Anwendung registriert das neue Konto, und der Benutzer wird authentifiziert.

Benutzerauthentifizierung
Zurück zu Visual Studio, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden.

Übung 2: Erstellen eines MVC-Controllers mithilfe des Gerüstbaus

In dieser Übung nutzen Sie das von Visual Studio bereitgestellte ASP.NET Scaffolding-Framework, um einen ASP.NET MVC 5-Controller mit Aktionen und Razor-Ansichten zu erstellen, um CRUD-Vorgänge auszuführen, ohne eine einzige Codezeile zu schreiben. Der Gerüstbauprozess verwendet Entity Framework Code First, um den Datenkontext und das Datenbankschema in der SQL-Datenbank zu generieren.

Informationen zu Entity Framework Code First

Entity Framework (EF) ist ein objekt relationaler Mapper (ORM), mit dem Sie Datenzugriffsanwendungen erstellen können, indem Sie mit einem konzeptionellen Anwendungsmodell programmieren, anstatt direkt mit einem relationalen Speicherschema zu programmieren.

Mit dem Entity Framework Code First-Modellierungsworkflow können Sie Ihre eigenen Domänenklassen verwenden, um das Modell darzustellen, auf das EF beim Ausführen von Abfrage-, Änderungsnachverfolgungs- und Aktualisierungsfunktionen angewiesen ist. Mithilfe des Code First-Entwicklungsworkflows müssen Sie Ihre Anwendung nicht starten, indem Sie eine Datenbank erstellen oder ein Schema angeben. Stattdessen können Sie .NET-Standardklassen schreiben, die die am besten geeigneten Domänenmodellobjekte für Ihre Anwendung definieren, und Entity Framework erstellt die Datenbank für Sie.

Hinweis

Weitere Informationen zu Entity Framework finden Sie hier.

Aufgabe 1: Erstellen eines neuen Modells

Sie definieren nun eine Person-Klasse , die das Modell ist, das vom Gerüstbauprozess zum Erstellen des MVC-Controllers und der Ansichten verwendet wird. Sie erstellen zunächst eine Person-Modellklasse , und die CRUD-Vorgänge im Controller werden automatisch mithilfe von Gerüstbaufeatures erstellt.

Öffnen Sie Visual Studio Express 2013 für Web und die Projektmappe MyHybridSite.sln im Ordner Source/Ex2-MvcScaffolding/Begin. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Models des Projekts MyHybridSite, und wählen Sie Hinzufügen | Klasse... aus.

Hinzufügen der Person-Modellklasse
Benennen Sie im Dialogfeld Neues Element hinzufügen die Datei Person.cs , und klicken Sie auf Hinzufügen.

Erstellen der Person-Modellklasse
Ersetzen Sie den Inhalt der Datei Person.cs durch den folgenden Code. Drücken Sie STRG+S , um die Änderungen zu speichern.

(Codeausschnitt – BringingTogetherOneAspNet – Ex2 – PersonClass)
```
namespace MyHybridSite.Models
{
    public class Person
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public int Age { get; set; }
    }
}
```
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt MyHybridSite, und wählen Sie Erstellen aus, oder drücken Sie STRG + UMSCHALT + B, um das Projekt zu erstellen.

Aufgabe 2 – Erstellen eines MVC-Controllers

Nachdem das Personenmodell erstellt wurde, verwenden Sie ASP.NET MVC-Gerüst mit Entity Framework, um die CRUD-Controlleraktionen und -ansichten für Person zu erstellen.

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller des Projekts MyHybridSite, und wählen Sie Hinzufügen | Neues Gerüstelement....

Erstellen eines neuen Gerüstcontrollers
Wählen Sie im Dialogfeld Gerüst hinzufügendie Option MVC 5 Controller mit Ansichten mithilfe von Entity Framework aus, und klicken Sie dann auf Hinzufügen.

Auswählen von MVC 5 Controller mit Ansichten und Entity Framework
Legen Sie MvcPersonController als Controllernamen fest, wählen Sie die Option Asynchrone Controlleraktionen verwenden aus, und wählen Sie Person (MyHybridSite.Models) als Model-Klasse aus.

Hinzufügen eines MVC-Controllers mit Gerüstbau
Klicken Sie unter Datenkontextklasse auf Neuer Datenkontext....

Erstellen eines neuen Datenkontexts
Nennen Sie im Dialogfeld Neuer Datenkontext den neuen Datenkontext PersonContext , und klicken Sie auf Hinzufügen.

Erstellen des neuen PersonContext-Typs
Klicken Sie auf Hinzufügen , um den neuen Controller für Person mit Gerüst zu erstellen. Visual Studio generiert dann die Controlleraktionen, den Personendatenkontext und die Razor-Ansichten.

Nach dem Erstellen des MVC-Controllers mit Gerüstbau

Öffnen Sie die Datei MvcPersonController.cs im Ordner Controller . Beachten Sie, dass die CRUD-Aktionsmethoden automatisch generiert wurden.

...

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

...

Hinweis

Durch Aktivieren des Kontrollkästchens Asynchrone Controlleraktionen verwenden in den Gerüstbauoptionen in den vorherigen Schritten generiert Visual Studio asynchrone Aktionsmethoden für alle Aktionen, die den Zugriff auf den Personendatenkontext umfassen. Es wird empfohlen, asynchrone Aktionsmethoden für lange, nicht CPU-gebundene Anforderungen zu verwenden, um zu vermeiden, dass der Webserver während der Verarbeitung der Anforderung die Arbeit ausführt.

Aufgabe 3: Ausführen der Lösung

In dieser Aufgabe führen Sie die Lösung erneut aus, um zu überprüfen, ob die Ansichten für Person wie erwartet funktionieren. Sie fügen eine neue Person hinzu, um zu überprüfen, ob sie erfolgreich in der Datenbank gespeichert wurde.

Drücken Sie F5, um die Projektmappe auszuführen.
Navigieren Sie zu /MvcPerson. Die Gerüstansicht, die die Liste der Personen anzeigt, sollte angezeigt werden.
Klicken Sie auf Neu erstellen , um eine neue Person hinzuzufügen.

Navigieren zu den gerüsteten MVC-Ansichten
Geben Sie in der Ansicht Erstellen einen Namen und ein Alter für die Person an, und klicken Sie auf Erstellen.

Hinzufügen einer neuen Person
Die neue Person wird der Liste hinzugefügt. Klicken Sie in der Elementliste auf Details , um die Detailansicht der Person anzuzeigen. Klicken Sie dann in der Detailansicht auf Zurück zur Liste , um zur Listenansicht zurückzukehren.

Detailansicht der Person
Klicken Sie auf den Link Löschen , um die Person zu löschen. Klicken Sie in der Ansicht Löschen auf Löschen , um den Vorgang zu bestätigen.

Löschen einer Person
Zurück zu Visual Studio, und drücken Sie UMSCHALT+F5, um das Debuggen zu beenden.

Übung 3: Erstellen eines Web-API-Controllers mithilfe des Gerüstbaus

Das Web-API-Framework ist Teil des ASP.NET Stack und wurde entwickelt, um die Implementierung von HTTP-Diensten zu vereinfachen, d. h. das Senden und Empfangen von JSON- oder XML-formatierten Daten über eine RESTful-API.

In dieser Übung verwenden Sie erneut ASP.NET Gerüstbau, um einen Web-API-Controller zu generieren. Sie verwenden die gleichen Personen - und PersonContext-Klassen aus der vorherigen Übung, um dieselben Personendaten im JSON-Format bereitzustellen. Sie sehen, wie Sie dieselben Ressourcen in derselben ASP.NET Anwendung auf unterschiedliche Weise verfügbar machen können.

Aufgabe 1: Erstellen eines Web-API-Controllers

In dieser Aufgabe erstellen Sie einen neuen Web-API-Controller , der die Personendaten in einem maschinellen Verbrauchsformat wie JSON verfügbar macht.

Falls noch nicht geöffnet, öffnen Sie Visual Studio Express 2013 für Web, und öffnen Sie die Projektmappe MyHybridSite.sln im Ordner Source/Ex3-WebAPI/Begin. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.

Hinweis

Wenn Sie mit der Startlösung aus Übung 3 beginnen, drücken Sie STRG + UMSCHALT + B , um die Lösung zu erstellen.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Controller des Projekts MyHybridSite, und wählen Sie Hinzufügen | Neues Gerüstelement....

Erstellen eines neuen Gerüstcontrollers
Wählen Sie im Dialogfeld Gerüst hinzufügen die Option Web-API im linken Bereich und dann Web-API 2 Controller mit Aktionen aus, indem Sie Entity Framework im mittleren Bereich verwenden, und klicken Sie dann auf Hinzufügen.

Auswählen des Web-API 2-Controllers mit Aktionen und Entity Framework
Legen Sie ApiPersonController als Controllernamen fest, wählen Sie die Option Asynchrone Controlleraktionen verwenden aus, und wählen Sie Person (MyHybridSite.Models) und PersonContext (MyHybridSite.Models) als Modell - und Datenkontextklassen aus. Klicken Sie anschließend auf Hinzufügen.

Hinzufügen eines Web-API-Controllers mit Gerüst
Visual Studio generiert dann die ApiPersonController-Klasse mit den vier CRUD-Aktionen, um mit Ihren Daten zu arbeiten.

Nach dem Erstellen des Web-API-Controllers mit Gerüstbau
Öffnen Sie die Datei ApiPersonController.cs , und überprüfen Sie die GetPeople-Aktionsmethode . Diese Methode fragt das Db-Feld vom Typ PersonContext ab, um die Personendaten abzurufen.
```
// GET api/ApiPerson
public IQueryable<Person> GetPeople()
{
    return db.People;
}
```
Beachten Sie nun den Kommentar über der Methodendefinition. Es stellt den URI bereit, der diese Aktion verfügbar macht, die Sie in der nächsten Aufgabe verwenden werden.
```
// GET api/ApiPerson
public IQueryable<Person> GetPeople()
{
    return db.People;
}
```
Hinweis

Standardmäßig ist die Web-API so konfiguriert, dass die Abfragen im Pfad /api abfangen, um Kollisionen mit MVC-Controllern zu vermeiden. Wenn Sie diese Einstellung ändern müssen, lesen Sie Routing in ASP.NET-Web-API.

Aufgabe 2: Ausführen der Projektmappe

In dieser Aufgabe verwenden Sie die Internet Explorer F12-Entwicklertools, um die vollständige Antwort vom Web-API-Controller zu überprüfen. Sie sehen, wie Sie Netzwerkdatenverkehr erfassen können, um mehr Einblick in Ihre Anwendungsdaten zu erhalten.

Hinweis

Stellen Sie sicher, dass internet Explorer auf der Schaltfläche Start auf der Visual Studio-Symbolleiste ausgewählt ist.

Internet Explorer Option

Die F12-Entwicklertools verfügen über eine breite Palette von Funktionen, die in diesem praktischen Lab nicht behandelt werden. Weitere Informationen dazu finden Sie unter Verwenden der F12-Entwicklertools.

Drücken Sie F5, um die Projektmappe auszuführen.

Hinweis

Um diese Aufgabe ordnungsgemäß ausführen zu können, muss Ihre Anwendung über Daten verfügen. Wenn Ihre Datenbank leer ist, können Sie zu Aufgabe 3 in Übung 2 zurückkehren und die Schritte zum Erstellen einer neuen Person mithilfe der MVC-Ansichten ausführen.
Drücken Sie im Browser F12 , um den Bereich Entwicklertools zu öffnen. Drücken Sie STRG + 4 , oder klicken Sie auf das Netzwerksymbol , und klicken Sie dann auf die grüne Pfeilschaltfläche, um netzwerkdatenverkehr zu erfassen.

Initiieren der Web-API-Netzwerkerfassung
Fügen Sie api/ApiPerson an die URL in der Adressleiste des Browsers an. Sie überprüfen nun die Details der Antwort vom ApiPersonController.

Abrufen von Personendaten über die Web-API

Hinweis

Sobald der Download abgeschlossen ist, werden Sie aufgefordert, eine Aktion mit der heruntergeladenen Datei auszuführen. Lassen Sie das Dialogfeld geöffnet, um den Antwortinhalt über das Entwicklertoolfenster watch zu können.
Nun untersuchen Sie den Textkörper der Antwort. Klicken Sie hierzu auf die Registerkarte Details , und klicken Sie dann auf Antworttext. Sie können überprüfen, ob es sich bei den heruntergeladenen Daten um eine Liste von Objekten mit den Eigenschaften ID, Name und Age handelt, die der Person-Klasse entsprechen.

Anzeigen des Web-API-Antworttexts

Aufgabe 3: Hinzufügen von Web-API-Hilfeseiten

Wenn Sie eine Web-API erstellen, ist es nützlich, eine Hilfeseite zu erstellen, damit andere Entwickler wissen, wie Sie Ihre API aufrufen. Sie könnten die Dokumentationsseiten manuell erstellen und aktualisieren, aber es ist besser, sie automatisch zu generieren, um Wartungsarbeiten zu vermeiden. In dieser Aufgabe verwenden Sie ein Nuget-Paket, um automatisch Web-API-Hilfeseiten für die Lösung zu generieren.

Wählen Sie im Menü Extras in Visual Studio die Option NuGet-Paket-Manager aus, und klicken Sie dann auf Paket-Manager-Konsole.
Führen Sie im Fenster Paket-Manager-Konsole den folgenden Befehl aus:
```
Install-Package Microsoft.AspNet.WebApi.HelpPage
```
Hinweis

Das Microsoft.AspNet.WebApi.HelpPage-Paket installiert die erforderlichen Assemblys und fügt MVC-Ansichten für die Hilfeseiten unter dem Ordner Areas/HelpPage hinzu.

HelpPage-Bereich
Standardmäßig verfügen die Hilfeseiten über Platzhalterzeichenfolgen für die Dokumentation. Sie können XML-Dokumentationskommentare verwenden, um die Dokumentation zu erstellen. Um dieses Feature zu aktivieren, öffnen Sie die Datei HelpPageConfig.cs im Ordner Areas/HelpPage/App_Start , und heben Sie die Auskommentierung der folgenden Zeile auf:
```
config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));
```
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt MyHybridSite, wählen Sie Eigenschaften aus, und klicken Sie auf die Registerkarte Erstellen.

Registerkarte „Build“
Wählen Sie unter Ausgabe die Option XML-Dokumentationsdatei aus. Geben Sie im Bearbeitungsfeld App_Data/XmlDocument.xmlein.

Abschnitt "Ausgabe" auf der Registerkarte "Build"
Drücken Sie STRG + S , um die Änderungen zu speichern.
Öffnen Sie die Datei ApiPersonController.cs aus dem Ordner Controller .
Geben Sie eine neue Zeile zwischen der GetPeople-Methodensignatur und dem Kommentar // GET api/ApiPerson ein, und geben Sie dann drei Schrägstriche ein.

Hinweis

Visual Studio fügt die XML-Elemente, die die Methodendokumentation definieren, automatisch ein.

Fügen Sie einen Zusammenfassungstext und den Rückgabewert für die GetPeople-Methode hinzu. Diese sollte wie folgt aussehen:

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

Drücken Sie F5, um die Projektmappe auszuführen.
Fügen Sie /help an die URL in der Adressleiste an, um zur Hilfeseite zu navigieren.

ASP.NET-Web-API Hilfeseite

Hinweis

Der Standard Inhalt der Seite ist eine Tabelle mit APIs, die nach Controller gruppiert ist. Die Tabelleneinträge werden mithilfe der IApiExplorer-Schnittstelle dynamisch generiert. Wenn Sie einen API-Controller hinzufügen oder aktualisieren, wird die Tabelle beim nächsten Erstellen der Anwendung automatisch aktualisiert.

In der API-Spalte werden die HTTP-Methode und der relative URI aufgelistet. Die Spalte Beschreibung enthält Informationen, die aus der Dokumentation der Methode extrahiert wurden.
Beachten Sie, dass die Beschreibung, die Sie über der Methodendefinition hinzugefügt haben, in der Spalte description angezeigt wird.

API-Methodenbeschreibung
Klicken Sie auf eine der API-Methoden, um zu einer Seite mit ausführlicheren Informationen zu navigieren, einschließlich Beispielantworttexten.

Detailinformationsseite

Zusammenfassung

Durch Die Durchführung dieses praktischen Labs haben Sie gelernt, wie Sie:

Erstellen einer neuen Webanwendung mithilfe der One ASP.NET Experience in Visual Studio 2013
Integrieren mehrerer ASP.NET Technologien in einem einzelnen Projekt
Generieren von MVC-Controllern und -Ansichten aus Ihren Modellklassen mithilfe von ASP.NET Scaffolding
Generieren von Web-API-Controllern, die Features wie asynchrone Programmierung und Datenzugriff über Entity Framework verwenden
Automatisches Generieren von Web-API-Hilfeseiten für Ihre Controller

Freigeben über

Praktische Übungseinheiten: One ASP.NET: Integrieren von ASP.NET Web Forms, MVC und Web-API

Überblick

Ziele

Voraussetzungen

Einrichten

Verwenden der Codeausschnitte

Übungen

Übung 1: Erstellen eines neuen Web Forms-Projekts

Aufgabe 1: Erstellen einer neuen Website mithilfe der ASP.NET-Benutzeroberfläche

Aufgabe 2: Ausführen der Projektmappe

Übung 2: Erstellen eines MVC-Controllers mithilfe des Gerüstbaus

Aufgabe 1: Erstellen eines neuen Modells

Aufgabe 2 – Erstellen eines MVC-Controllers

Aufgabe 3: Ausführen der Lösung

Übung 3: Erstellen eines Web-API-Controllers mithilfe des Gerüstbaus

Aufgabe 1: Erstellen eines Web-API-Controllers

Aufgabe 2: Ausführen der Projektmappe

Aufgabe 3: Hinzufügen von Web-API-Hilfeseiten

Zusammenfassung

Feedback

Zusätzliche Ressourcen