Praxis-Seminar: One ASP.NET: Integration von ASP.NET-Webformularen, MVC und Web-API

von Web Camps Team

Download Web Camps Training Kit

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 seiner Gründung und der ausdrücklichen Notwendigkeit, diese Technologien integriert zu haben, gab es kürzlich Anstrengungen bei der Arbeit an one ASP.NET.

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, eine Technologie am Anfang eines Projekts zu wählen und daran zu bleiben, und empfiehlt stattdessen die Verwendung mehrerer ASP.NET Frameworks innerhalb eines Projekts.

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

Übersicht

Ziele

In dieser praktischen Übung erfahren Sie, wie Sie:

• Erstellen einer Website basierend auf dem Projekttyp "One ASP.NET "
• Verwenden unterschiedlicher ASP.NET Frameworks wie MVC und Web-API im selben Projekt
• Identifizieren der Hauptkomponenten einer ASP.NET Anwendung
• Nutzen Sie das ASP.NET Scaffolding Framework zum automatischen Erstellen von Controllern und Ansichten zum Ausführen von CRUD-Vorgängen basierend auf Ihren Modellklassen
• Machen Sie den gleichen Satz von Informationen in maschinen- und lesbaren Formaten verfügbar, indem Sie das richtige Tool für jeden Auftrag verwenden.

Voraussetzungen

Für die Durchführung dieser praktischen Laborübungen ist Folgendes erforderlich:

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

Konfiguration

Um die Übungen in diesem praktischen Labor ausführen zu können, müssen Sie zuerst Ihre Umgebung einrichten.

1. Öffnen Sie den Windows-Explorer, und navigieren Sie zum Quellordner des Labors.
2. Klicken Sie mit der rechten Maustaste auf Setup.cmd , und wählen Sie "Als Administrator ausführen " aus, um den Setupvorgang zu starten, der Ihre Umgebung konfiguriert und die Visual Studio-Codeausschnitte für diese Übung installiert.
3. Wenn das Dialogfeld "Benutzerkontensteuerung" angezeigt wird, bestätigen Sie, dass die Aktion fortgesetzt werden soll.

Verwendung von Code-Snippets

Im gesamten Lab-Dokument werden Sie angewiesen, Codeblöcke einzufügen. Aus Gründen der Einfachheit wird der großteil dieses Codes als Visual Studio Code Snippets bereitgestellt, auf die Sie in Visual Studio 2013 zugreifen können, um zu vermeiden, dass Sie ihn manuell hinzufügen müssen.

Übungen

Dieses praktische Labor umfasst die folgenden Übungen:

1. Erstellen eines neuen Webformularprojekts
2. Erstellen eines MVC-Controllers mithilfe von Gerüsten
3. Erstellen eines Web-API-Controllers mithilfe von Gerüsten

Geschätzte Zeit zum Abschließen dieses Labors: 60 Minuten

Übung 1: Erstellen eines neuen Webformularprojekts

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

Aufgabe 1 – Erstellen einer neuen Website mithilfe der One ASP.NET Experience

In dieser Aufgabe beginnen Sie mit dem Erstellen einer neuen Website in Visual Studio basierend auf dem Projekttyp "One ASP.NET ". Eine ASP.NET vereint alle ASP.NET Technologien und bietet Ihnen die Möglichkeit, sie nach Wunsch zu mischen und abzugleichen. Anschließend erkennen Sie die verschiedenen Komponenten von Web Forms, MVC und Web-API, die nebeneinander in Ihrer Anwendung leben.

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

2. Im Dialogfeld "Neues Projekt" wählen Sie unter "Visual C# | Web" die Option ASP.NET-Webanwendung aus, und stellen Sie sicher, dass .NET Framework 4.5 ausgewählt ist. Benennen Sie das Projekt "MyHybridSite", wählen Sie einen Speicherort aus, und klicken Sie auf "OK".

   

   Erstellen eines neuen ASP.NET Webanwendungsprojekts

3. Wählen Sie im Dialogfeld "Neues ASP.NET Projekt " die Webformularvorlage und dann die MVC- und Web-API-Optionen 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 Webformularvorlage, einschließlich Web-API- und MVC-Komponenten

4. Sie können nun die Struktur der generierten Lösung untersuchen.

   

   Erkunden 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 Option für die Authentifizierung einzelner Benutzerkonten während der Konfiguration der Web Forms-Projektvorlage ausgewählt wird.
   2. Modelle: Dieser Ordner enthält die Klassen, die Ihre Anwendungsdaten darstellen.
   3. Controller und Ansichten: Diese Ordner sind für die ASP.NET MVC - und ASP.NET Web-API-Komponenten erforderlich. In den nächsten Übungen werden Sie die MVC- und Web-API-Technologien erkunden.
   4. Die dateien Default.aspx, Contact.aspx und About.aspx sind vordefinierte Webformularseiten, die Sie als Ausgangspunkt 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 (je nach verwendeter 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.

5. Doppelklicken Sie auf die Default.aspx Datei, um den Inhalt der Seite zu durchsuchen.

   

   Erkunden der Default.aspx-Seite

   Hinweis

   Die Seitendirektive oben in der Datei definiert die Attribute der Web Forms-Seite. Das MasterPageFile-Attribut gibt den Pfad zur Masterseite an - in diesem Fall zur Site.Master-Seite - und das Inherits-Attribut definiert die CodeBehind-Klasse, die von der Seite geerbt werden soll. 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 wird einem asp:ContentPlaceHolder-Steuerelement auf der Masterseite zugeordnet. In diesem Fall wird der Seiteninhalt innerhalb des in der Site.Master-Seite definierten MainContent-Steuerelements gerendert.

6. Erweitern Sie den ordner App_Start , und beachten Sie die WebApiConfig.cs Datei. Visual Studio enthielt diese Datei in der generierten Projektmappe, da Sie web-API beim Konfigurieren Ihres Projekts mit der One ASP.NET-Vorlage eingeschlossen haben.

7. Öffnen Sie die WebApiConfig.cs Datei. In der WebApiConfig-Klasse finden Sie die mit der Web-API verknüpfte Konfiguration, 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 }
           );
   }
   

8. Öffnen Sie die datei RouteConfig.cs . Innerhalb der RegisterRoutes-Methode finden Sie die mit MVC verknüpfte Konfiguration, die HTTP-Routen MVC-Controllern zuordnet.

   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 Lösung

In dieser Aufgabe führen Sie die generierte Lösung aus, erkunden Sie die App und einige seiner Features, z. B. das Umschreiben von URLs und die integrierte Authentifizierung.

1. Um die Lösung auszuführen, drücken Sie F5 , oder klicken Sie auf die Schaltfläche " Start ", die sich auf der Symbolleiste befindet. Die Startseite der Anwendung sollte im Browser geöffnet werden.

   

2. Stellen Sie sicher, 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.

   

   Benutzerfreundliche URLs

   Hinweis

   Wie Sie sehen können, ändert sich die URL in "/contact". Ab ASP.NET 4 wurden den Webformularen URL-Routing-Funktionen hinzugefügt, sodass Sie URLs wie http://www.mysite.com/products/software anstelle von http://www.mysite.com/products.aspx?category=software schreiben können. Weitere Informationen finden Sie unter URL-Routing.

3. Sie werden nun den in die Anwendung integrierten Authentifizierungsfluss untersuchen. Klicken Sie dazu in der oberen rechten Ecke der Seite auf "Registrieren ".

   

   Registrieren eines neuen Benutzers

4. Geben Sie auf der Seite "Registrieren " einen Benutzernamen und ein Kennwort ein, und klicken Sie dann auf "Registrieren".

   

   Seite registrieren

5. Die Anwendung registriert das neue Konto, und der Benutzer wird authentifiziert.

   

   Benutzer authentifiziert

6. Wechseln Sie zurück zu Visual Studio, und drücken Sie UMSCHALT+F5 , um das Debuggen zu beenden.

Übung 2: Erstellen eines MVC-Controllers mithilfe von Gerüsten

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 zum Ausführen von CRUD-Vorgängen zu erstellen, ohne eine einzelne Codezeile zu schreiben. Der Gerüstprozess 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 objektrelationaler Mapper (ORM), mit dem Sie Datenzugriffsanwendungen erstellen können, indem Sie ein konzeptionelles Anwendungsmodell programmieren, anstatt direkt mit einem relationalen Speicherschema zu programmieren.

Mit dem Workflow für die erste Modellierung von Entity Framework-Code können Sie Ihre eigenen Domänenklassen verwenden, um das Modell darzustellen, das EF beim Ausführen von Abfragen, Änderungsnachverfolgungs- und Aktualisierungsfunktionen benötigt. Mit dem Code First-Entwicklungsworkflow müssen Sie Ihre Anwendung nicht beginnen, indem Sie eine Datenbank erstellen oder ein Schema angeben. Stattdessen können Sie standardmäßige .NET-Klassen schreiben, die die am besten geeigneten Domänenmodellobjekte für Ihre Anwendung definieren, und Entity Framework erstellt die Datenbank für Sie.

Aufgabe 1 – Erstellen eines neuen Modells

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

1. Öffnen Sie Visual Studio Express 2013 für Web und die MyHybridSite.sln Projektmappe, die sich im Ordner "Source/Ex2-MvcScaffolding/Begin " befindet. Alternativ können Sie mit der Lösung fortfahren, die Sie in der vorherigen Übung erhalten haben.

2. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Ordner "Modelle " des Projekts "MyHybridSite ", und wählen Sie "Hinzufügen | Klasse..." aus.

   

   Hinzufügen der Person-Modellklasse

3. Benennen Sie im Dialogfeld " Neues Element hinzufügen " die Datei Person.cs , und klicken Sie auf "Hinzufügen".

   

   Erstellen der Person-Modellklasse

4. Ersetzen Sie den Inhalt der Person.cs-Datei 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; }
       }
   }
   

5. Klicken Sie im 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 Person-Modell erstellt wurde, verwenden Sie ASP.NET MVC-Gerüst mit Entity Framework, um die CRUD-Controlleraktionen und -ansichten für Person zu erstellen.

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

   

   Erstellen eines neuen Gerüstcontrollers

2. Wählen Sie im Dialogfeld " Gerüst hinzufügen " den MVC 5-Controller mit Ansichten aus, verwenden Sie Entity Framework, und klicken Sie dann auf "Hinzufügen".

   

   Auswählen von MVC 5 Controller mit Ansichten und Entity Framework

3. Legen Sie MvcPersonController als Controllernamen fest, wählen Sie die Option " Asynchrone Controlleraktionen verwenden " aus, und wählen Sie "Person " (MyHybridSite.Models) als Modellklasse aus.

   

   Hinzufügen eines MVC-Controllers mit Gerüst

4. Klicken Sie unter "Datenkontextklasse" auf " Neuer Datenkontext...".

   

   Erstellen eines neuen Datenkontexts

5. Benennen Sie im Dialogfeld "Neuer Datenkontext " den neuen Datenkontext "PersonContext ", und klicken Sie auf "Hinzufügen".

   

   Erstellen des neuen PersonContext-Typs

6. 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üst

7. Ö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 " aus den Gerüstoptionen 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 langlaufende, nicht CPU-gebundene Anforderungen zu verwenden, um zu verhindern, dass der Webserver während der Verarbeitung der Anforderung blockiert wird.

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 " erwartungsgemäß funktionieren. Sie fügen eine neue Person hinzu, um zu überprüfen, ob sie erfolgreich in der Datenbank gespeichert wurde.

1. Drücken Sie F5 , um die Lösung auszuführen.

2. Navigieren Sie zu /MvcPerson. Die Gerüstansicht, in der die Liste der Personen angezeigt wird, sollte angezeigt werden.

3. Klicken Sie auf " Neu erstellen", um eine neue Person hinzuzufügen.

   

   Navigieren zu den vorbereiteten MVC-Ansichten

4. Geben Sie in der Ansicht "Erstellen " einen Namen und ein Alter für die Person ein, und klicken Sie auf "Erstellen".

   

   Hinzufügen einer neuen Person

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

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

7. Wechseln Sie zurück zu Visual Studio, und drücken Sie UMSCHALT+F5 , um das Debuggen zu beenden.

Übung 3: Erstellen eines Web-API-Controllers mithilfe von Gerüsten

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

In dieser Übung verwenden Sie ASP.NET Gerüst erneut, um einen Web-API-Controller zu generieren. Sie verwenden die gleichen Person - und PersonContext-Klassen aus der vorherigen Übung, um die gleichen Personendaten im JSON-Format bereitzustellen. Sie werden sehen, wie Sie dieselben Ressourcen auf unterschiedliche Weise innerhalb derselben ASP.NET Anwendung 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.

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

   Hinweis

   Wenn Sie mit der Lösung "Beginnen" aus Übung 3 beginnen, drücken Sie STRG+UMSCHALT+B , um die Lösung zu erstellen.

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

   

   Erstellen eines neuen Gerüstcontrollers

3. Wählen Sie im Dialogfeld "Gerüst hinzufügen" im linken Bereich Web-API aus, dann im mittleren Bereich Web-API 2-Controller mit Aktionen, unter Verwendung von Entity Framework, und klicken Sie anschließend auf Hinzufügen.

   

   Auswählen von Web-API 2-Controller mit Aktionen und Entity Framework

4. 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 - bzw. Datenkontextklassen aus. Klicken Sie anschließend auf Hinzufügen.

   

   Hinzufügen eines Web-API-Controllers mit Gerüst

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

6. Öffnen Sie die ApiPersonController.cs Datei, und prüfen Sie die GetPeople-Aktionsmethode . Diese Methode fragt das db-Feld des Typs "PersonContext " ab, um die Personendaten abzurufen.

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

7. Beachten Sie nun den Kommentar oberhalb der Methodendefinition. Er 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

   Die Web-API ist standardmäßig so konfiguriert, dass Anfragen an den /api-Pfad abgefangen werden, um Konflikte 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 Lösung

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

1. Drücken Sie F5 , um die Lösung auszuführen.

   Hinweis

   Damit diese Aufgabe ordnungsgemäß ausgeführt werden kann, muss Ihre Anwendung Daten enthalten. 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.

2. 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 Pfeiltaste, um mit der Erfassung des Netzwerkdatenverkehrs zu beginnen.

   

   Initiieren der Web-API-Netzwerkerfassung

3. Fügen Sie api/ApiPerson an die URL in der Adressleiste des Browsers an. Sie werden nun die Details der Antwort vom ApiPersonController überprüfen.

   

   Abrufen von Personendaten über die Web-API

   Hinweis

   Sobald der Download abgeschlossen ist, werden Sie aufgefordert, eine Aktion mit der heruntergeladenen Datei vorzunehmen. Lassen Sie das Dialogfeld geöffnet, um den Antwortinhalt über das Entwicklertoolfenster anzeigen zu können.

4. Überprüfen Sie jetzt den Inhalt der Antwort. Klicken Sie hierzu auf die Registerkarte "Details " und 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 Alter 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 hilfreich, eine Hilfeseite zu erstellen, damit andere Entwickler wissen, wie Sie Ihre API aufrufen. Sie können die Dokumentationsseiten manuell erstellen und aktualisieren, aber es empfiehlt sich, sie automatisch zu generieren, um Wartungsaufgaben zu vermeiden. In dieser Aufgabe verwenden Sie ein Nuget-Paket, um automatisch Web-API-Hilfeseiten für die Lösung zu generieren.

1. Wählen Sie im Menü "Extras " in Visual Studio "NuGet-Paket-Manager" aus, und klicken Sie dann auf "Paket-Manager-Konsole".

2. Führen Sie im Paket-Manager-Konsolenfenster 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

3. 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 HelpPageConfig.cs Datei im Ordner "Areas/HelpPage/App_Start ", und heben Sie die Kommentare in der folgenden Zeile auf:

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

4. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf das Projekt "MyHybridSite", wählen Sie "Eigenschaften" aus, und klicken Sie auf die Registerkarte " Erstellen ".

   

   Registerkarte "Erstellen"

5. Wählen Sie unter "Ausgabe" die XML-Dokumentationsdatei aus. Geben Sie im Bearbeitungsfeld App_Data/XmlDocument.xmlein.

   

   Ausgabeabschnitt auf der Registerkarte "Build"

6. Drücken Sie STRG + S , um die Änderungen zu speichern.

7. Öffnen Sie die ApiPersonController.cs Datei aus dem Ordner "Controller" .

8. Geben Sie eine neue Zeile zwischen der Methodensignatur von GetPeople und dem Kommentar // GET api/ApiPerson ein und tippen Sie dann drei Schrägstriche ein.

   Hinweis

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

9. Fügen Sie einen Zusammenfassungstext und den Rückgabewert für die GetPeople-Methode hinzu. Es 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;
   }
   

10. Drücken Sie F5 , um die Lösung auszuführen.

11. Fügen Sie /help an die URL in der Adressleiste an, um zur Hilfeseite zu navigieren.

    

    ASP.NET Web-API-Hilfeseite

    Hinweis

    Der Hauptinhalt der Seite ist eine Tabelle mit APIs, gruppiert nach Controller. Die Tabelleneinträge werden dynamisch mithilfe der IApiExplorer-Schnittstelle 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 sind die HTTP-Methode und der relative URI aufgeführt. Die Spalte "Beschreibung " enthält Informationen, die aus der Dokumentation der Methode extrahiert wurden.

12. Beachten Sie, dass die Beschreibung, die Sie oberhalb der Methodendefinition hinzugefügt haben, in der Beschreibungsspalte angezeigt wird.

    

    API-Methodenbeschreibung

13. Klicken Sie auf eine der API-Methoden, um zu einer Seite mit detaillierteren Informationen zu navigieren, einschließlich Beispielantworttexten.

    

    Detailinformationsseite

Zusammenfassung

Durch die Durchführung dieser praktischen Übung haben Sie folgendes gelernt:

• Erstellen einer neuen Webanwendung mithilfe der One ASP.NET Experience in Visual Studio 2013
• Integrieren mehrerer ASP.NET Technologien in ein einzelnes Projekt
• Generieren von MVC-Controllern und -Ansichten aus Ihren Modellklassen mithilfe von ASP.NET Gerüst
• 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