Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
64 10.2015 www.dotnetpro.de
Frontend ASP.NET MVC
das HTTP-Protokoll eignet sich nicht
nur zum Bereitstellen von Websei-
ten. Es kann vielmehr als eine leistungs-
fähige Plattform zum Erstellen von APIs
angesehen werden, mit deren Hilfe Web-
dienste und Daten bereitgestellt werden
können. HTTP lässt sich einfach und fle-
xibel einsetzen. HTTP-Dienste können
von einer Vielzahl von Clients (Browser,
Mobilgeräte und Desktop-Anwendun-
gen) genutzt werden. Moderne Anwen-
dungen sind Apps, die auf den verschie-
densten Plattformen laufen, und ASP.
NET MVC 6 ist ein Framework, um Web
APIs auf Basis von .NET zu erstellen.
Ohne Nutzung eines solchen Frame-
works fällt die Basisarchitektur ziemlich
umfangreich aus, da jede Client-An-
wendung mit der entsprechenden Ge-
schäftslogik ausgestattet werden muss.
Sobald eine Änderungsanforderung
her einkommt, muss der Client ange-
passt werden. Dies ist fehleranfällig und führt zu unnötigem
Aufwand. Wenn hingegen eine Architektur mit zentralem
Web API genutzt wird, kann die Geschäftslogik zentral ge-
halten werden. Jede Client-Anwendung
nutzt dieses Web API, um Daten aufzu-
nehmen, zu ändern oder zu löschen. So-
bald Änderungen anfallen, kann dies
jetzt zentral erledigt werden. Die Kon-
zepte aus der MVC-Welt, wie Controller,
Actions, Filters und Model, machen dies
möglich [1].
MVC 6Da MVC, Web API und Web Pages über
komplementäre Funktionalitäten verfü-
gen, werden diese häufig zusammen ge-
nutzt, um eine Lösung zu realisieren. Bis-
her standen diese separat zur Verfügung
und bei der Programmierung mussten
Inkonsistenzen berücksichtigt werden.
MVC 6 stellt diese nun unter einem
einheitlichen Entwicklungsmodell (Pro-
gramming Model) zur Verfügung.
So lassen sich jetzt Applikationen er-
stellen, wobei beim Realisieren von Be-
nutzeroberfläche oder Webservices keinerlei Unterschiede
bei der Programmierung beachtet werden müssen.
erstellen eines ProjektsUm einen ASP.NET 5 Web API Web
Service zu erstellen, legen Sie zuerst
unter Visual Studio 2015 ein neues
Projekt mit der Befehlsfolge File |
New Project an. In der linken Baum-
hierarchie wählen Sie die Sprache
Visual C# und den Unterpunkt Web
aus. Nun ist im Hauptfenster die Pro-
jektschablone (Template) ASP.NET
Web Application auswählbar. Zu-
sätzlich ist hier noch das .NET Frame-
work Version 4.6 auszuwählen. Als
Projektnamen geben Sie für das Ar-
tikelbeispiel MVC6WebAPI ein und
beenden den Dialog über die OK-
Schaltfläche. Im Folgedialog wird
dann eine Vielzahl von Templates
zur Auswahl bereitgestellt (Bild 1).
Aus Gründen der Vereinfachung
entscheiden wir uns hier für den
Eintrag ASP.NET 5 Preview WebAPI
und beenden den Dialog wieder mit
Neu in MVC 6: Das Konfigurationsmodell und das Programmiermodell.
der sechste StreichWeb API unter MVC 6
Im Solution explorer sehen Sie, dass
MVC 6 über eine neue Projektstruktur
verfügt (Bild 2)
Hier wählen Sie das Template ASP.NET 5 Preview Web API aus (Bild 1)
65www.dotnetpro.de 10.2015
Frontend ASP.NET MVC
OK. Nun wird Ihnen die Projektstruktur im So-
lution Explorer angezeigt (Bild 2).
ProjekteinstellungenSofort wird ersichtlich, dass sich die Projekt-
struktur unter ASP.NET 5 verändert hat. Dort
sind jetzt die Dateien global.json, project.json
und Startup.cs zu finden. Die Projekt-Einstel-
lungen werden unter der Datei project.json an-
gegeben. Dort werden unter Dependencies alle
NuGet-Pakete und Klassenbibliotheken aufge-
nommen, welche für das Projekt notwendig sind
(Bild 3). Da MVC 6 zum Einsatz kommen soll, ist
hier das Paket Microsoft.AspNet.MVC anzuge-
ben. Das Core-Paket stellt alle notwendigen
Komponenten für MVC 6 und Web API zur Ver-
fügung.
Sobald Sie beginnen, den Namen des Pakets
einzutippen, wird IntelliSense aktiv und zeigt
Ihnen alle verfügbaren Pakete an (Bild 4). An-
schließend ist noch die Versionsnummer auszu-
wählen, in unserem Fall 1.0.0-beta3 – siehe auch
Bild 5.
Da die entstehende Web-API-Applikation auf
dem IIS Express gehostet werden soll, wird noch
das IIS-Paket benötigt, das bereits ausgewählt ist. Die Kon-
figuration von IIS Express kann direkt in Visual Studio er-
folgen (Bild 6). Innerhalb der Datei global.json werden alle
Projekt-Referenzen angegeben. Somit können Projekte auf
andere Projekte zugreifen.
Um das neue Konfigurationsmodell von MVC 6 nutzen zu
können, muss das Paket Microsoft.Framework.Configuration-
Model.Json angegeben werden. Dies erlaubt es, die Konfigu-
ration mithilfe einer Datei im JSON-Format vorzunehmen,
was eine bedeutende Arbeitserleichterung darstellt.
erster testlaufAnschließend starten Sie in Visual Studio durch Drücken der
Funktionstaste [F5] eine erste Debugging-Sitzung. Visual
die datei project.json enthält die Projekteinstellungen (Bild 3)
using Microsoft.AspNet.Builder;
using Microsoft.AspNet.Hosting;
using Microsoft.Framework.DependencyInjection;
using Microsoft.AspNet.Mvc;
using System.Configuration;
using Newtonsoft.Json;
namespace MVC6WebAPI
{
public class Startup
{
public void ConfigureServices(
IServiceCollection services)
{
services.AddMvc();
}
public void Configure(IApplicationBuilder app)
{
// Add MVC to the request pipeline.
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action}/{id?}",
defaults: new { controller = "Home",
action = "Index" });
routes.MapRoute(
name: "movies",
template: "{controller}/{action}",
defaults: new { controller = "Movies",
action = "Get" });
});
}
}
}
$$ Listing 1: Startup.cs
▶
66 10.2015 www.dotnetpro.de
Frontend ASP.NET MVC
Studio startet daraufhin den Browser und
ruft den URL localhost mit entsprechender
Port-Adresse ab. Gegenwärtig ist hier noch
nichts zu sehen, da noch nicht angegeben
wurde, was beim Start der Anwendung
passieren soll.
die Anwendung konfigurierenIn der Datei Startup.cs, welche die Klasse
Startup enthält, wird schließlich der Start
der Anwendung implementiert, siehe da-
zu Listing 1. Sobald der Konstruktor von
Start up aufgerufen wurde, bauen die fol-
genden beiden Methoden die Laufzeitum-
gebung auf. Die erste Methode namens
ConfigureServices hat die Aufgabe anzu-
geben, welche Komponenten per Depen-
dency Injection erzeugt werden sollen.
Das Kommando services.AddMvc sorgt dafür, dass MVC 6
genutzt werden kann.
Als zweite Methode wird Configure aufgerufen, worüber
die Konfiguration der ASP.NET-Pipeline durchgeführt wird.
Hier können einzelne Optionen der Komponenten konfigu-
riert werden. Über app.UseMvc wird die Komponente in die
Pipeline aufgenommen.
Im vorliegenden Beispiel wird an diese Methode eine Rou-
ten-Konfiguration per Lambda-Ausdruck übergeben. So wird
die Default-Routing-Angabe von ASP.NET MVC angepasst.
Diese richtet die neue Route mit der Methode MapRoute ein.
Dabei legt der Parameter name einen eindeutigen Namen für
die Route fest. Der Parameter template bestimmt, wie der
URL-Abruf erfolgen kann. Das im Platzhalter id? enthaltene
Fragezeichen gibt an, dass der damit ausgedrückte Routing-
Parameter optional ist.
Mit dem Parameter defaults legt die Routen-Konfiguration
fest, welcher Controller verwendet und welche Action ausge-
löst werden soll, wenn der Aufrufer diese nicht explizit in der
URL festlegt. Die angegebenen Werte Home und Index in-
nerhalb der Projektvorlage führen zur Startseite der Weban-
wendung. Auch alle weiteren erforderlichen Routen kann der
Entwickler hier definieren.
die ModellklasseDie für diesen Artikel angelegte Beispielanwendung soll eine
Sammlung von Filmen anzeigen. Dem MVC-Konzept folgend
wird dafür zunächst ein Modell benötigt, das jetzt erstellt
werden soll.
Dafür wird zuerst der Ordner Models angelegt. Hierzu
wählen Sie das Projekt mit der rechten Maustaste aus und
Welche Pakete im aktuellen Projekt verwendet werden, kann Visual Studio grafisch
anzeigen (Bild 5)
using System;
using System.ComponentModel.DataAnnotations;
namespace MVC6WebAPI.Models
public class Movie
{
public int ID { get; set; }
[Required]
public string Title { get; set; }
public DateTime ReleaseDate { get; set; }
public string Genre { get; set; }
}
$$ Listing 2: die Klasse Movie
IntelliSense macht hilfreiche Vorschläge bei der Eingabe von Pa-
ketkennungen (Bild 4)
67www.dotnetpro.de 10.2015
Frontend ASP.NET MVC
wählen den Kontextmenü-Punkt Add | New Folder. Anschlie-
ßend klicken Sie im Kontextmenü dieses Ordners auf den
Punkt Add | New Item. Nun wird der Eintrag Class ausge-
wählt und im Dialog der Klassenname Movie eingegeben.
Die Klasse soll über die Variablen ID, Title, ReleaseDate und
Genre verfügen. Jede der Variablen kann über die entspre-
chende get- oder set-Methode gesetzt oder abgefragt wer-
den. Den Quelltext der Klasse Movie finden Sie in Listing 2.
die Controller-KlasseDie Controller-Klasse ist im Konzept von MVC dafür vorge-
sehen, HTTP-Anfragen zu bearbeiten. Mit ASP.NET 5 erbt
der Web API Controller von der Klasse Controller und nicht
mehr von der Klasse ApiController. Um die Klasse zu erstel-
len, wählen Sie den Ordner Controllers und führen in dessen
Kontextmenü wieder den Punkt Add | New Item aus. Hier
wird dann Web API Controller Class ausgewählt (Bild 7) und
MoviesController als Name eingegeben.
Zu Beginn des Controller-Templates ist die Zeile
[Route(“api/[controller“])] zu finden. Diese dient als URL-
Schablone für den Controller. Jede HTTP-Anfrage, die der
Schablone entspricht, wird an den Controller weitergeleitet.
Die Angabe [controller] bedeutet, dass der Klassenname des
Controllers ohne das Controller-Suffix verwendet wird.
Nun muss das Modell noch mit Daten gefüllt werden. Dies
wird ebenfalls im Controller erledigt. Zunächst wird dafür
mittels new-Operator eine List-Instanz vom Typ Movie er-
zeugt und in diese Liste werden die einzelnen Movie-Ein- ▶
die Konfiguration des IIS kann direkt in Visual Studio erledigt
werden (Bild 6)
using System;
using Microsoft.AspNet.Mvc;
using MVC6WebAPI.Models;
namespace MVC6WebAPI.Controllers
[Route("api/[controller]")]
public class MoviesController : ApiController
{
// Hier werden die Modell-Daten erzeugt
List<Movie> movies = new List<Movie> {
new Movie {
ID = 1, Title = "Taken",
Genre = "Action", ReleaseDate =
new DateTime(2008,9,26)
},
new Movie {
ID = 2, Title = "Django Unchained",
Genre = "Western", ReleaseDate =
new DateTime(2013,1,18)
}
};
// GET liefert alle Einträge zurück
public IEnumerable<Movie> Get()
{
return movies;
}
// GET(id) liefert einen bestimmten Eintrag
public Movie Get(int id)
{
return movies.SingleOrDefault(m => m.ID == id);
}
// POST legt einen Movie-Eintrag an
public void Post([FromBody]Movie movie)
{
movies.Add(movie);
}
// PUT überschreibt einen Eintrag
public void Put(int id, [FromBody]Movie movie)
{
Movie existingMovie =
movies.SingleOrDefault(m => m.ID == id);
existingMovie.Title = movie.Title;
existingMovie.Genre = movie.Genre;
existingMovie.ReleaseDate = movie.ReleaseDate;
}
// DELETE löscht einen Eintrag
public void Delete(int id)
{
movies.Remove(movies.SingleOrDefault(
m => m.ID == id)); // Save changes
}
}
$$ Listing 3: die Controller-Klasse
68 10.2015 www.dotnetpro.de
Frontend ASP.NET MVC
träge eingefügt. Am Ende der Controller-Klasse sind noch die
einzelnen HTTP-Methoden zu implementieren. Dafür sind
innerhalb der Klasse einzelne Bereiche vorgesehen.
Im Bereich [HttpGet] werden Methoden zum Abfragen von
Daten angegeben. Unter [HttpPost] ist Platz für Methoden
zum Anlegen von Daten. Im Bereich [HttpPut] stehen die Me-
thoden zum Aktualisieren vorhandener Daten und unter
[HttpDelete] die Methoden zum Löschen von Daten.
Listing 3 zeigt die Controller-Klasse inklusive ihrer Metho-
den. Get liefert alle verfügbaren Einträge zurück. Die Metho-
de Get(int id) hat die Aufgabe, einen bestimmten Eintrag zu-
rückzuliefern. Entsprechend werden die Methoden Post, Put
und Delete implementiert.
die HtML-Seite erstellenDas MVC-Konzept erfordert jetzt jetzt nur noch eine Ansicht
(View). Dazu wird eine einfache HTML-Seite aufgebaut,
welche die Aufgabe übernimmt, entsprechende Aufrufe der
Web API durchzuführen. Dazu wählen Sie den Ordner Views
mit der rechten Maustaste aus, klicken im Kontextmenü auf
Add | New Item | HTML-Page und geben anschließend den
Code aus Listing 4 ein, um Web-API-Aufrufe durchführen zu
können.
Aufruf der testseiteSobald Sie einen der Links anklicken, wird der Browser an-
geben, dass er das Ergebnis in einer Datei speichern will.
Wenn Sie diese Datei innerhalb von Visual Studio öffnen,
werden Sie sehen, dass die Daten im JSON-Format gespei-
chert wurden.
Der Entwickler kann aber auch andere Formate unterstüt-
zen. Dafür muss jedoch ein spezieller Formatter implementiert
werden – Näheres dazu wird in einem gesonderten Artikel be-
schrieben werden. Im Beispiel würde sich das Binärformat
(BSON) anbieten. Dieses liefert eine höhere Performance ge-
genüber JSON beim Serialisieren und Deserialisieren. Da
BSON eine Reihe von Datentypen außerhalb der JSON-
Spezifikation unterstützt, wird damit zugleich die Typ-Kom-
patibilität gewahrt und eine leichtere Datenweiterverarbei-
tung ermöglicht.
Zweiter testlaufUm Web-API-Aufrufe leichter beziehungsweise flexibler
durch führen zu können, lohnt es sich, auf das Programm Fidd-
ler [2] zurückzugreifen. Man kann damit HTTP-Anfragen ge-
nerieren und sich die erzeugte Antwort innerhalb von Fiddler
direkt anschauen. Fiddler kann dabei unterschiedliche Aus-
gabeformate erzeugen, wenn das gewünschte Format bei der
Anfrage im Kopfzeileneintrag Accept angegeben wird.
FazitWährend der Entwickler in der Vergangenheit die Unter-
schiede zwischen ASP.NET MVC und ASP.NET Web API be-
rücksichtigen musste, vereinfacht MVC 6 das Entwickeln von
Webanwendungen spürbar. MVC 6 kann zum Erstellen von
Webapplikationen als auch zum Realisieren von Web-API-
Lösungen verwendet werden. Sobald der Entwickler sich an
die neuen Konventionen gewöhnt hat, lassen sich solche Lö-
sungen rasch umsetzen und verringern den Arbeitsaufwand
enorm. ◾
[1] MVC, Model, View, Controler,
https://de.wikipedia.org/wiki/Model_View_Controller
[1] Fiddler, kostenloser Web-Debugging-Proxy,
http://www.telerik.com/fiddler
Alexander Scheb arbeitet seit 15 Jahren als IT-Journalist und ist
Certified Sun Programmer. Seine Spezialgebie-
te sind Softwareentwicklung und aktuelle
Trends, aber auch Webtechnologien und Si-
cherheit. Sie erreichen ihn überwww.scheb-online.de
dnpCode A1510ASPNETMVC
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Web API Test#1! Klicken Sie
<a href="api/Movies"> hier </a> um alle
Einträge zu erhalten.
Web API Test#2! Klicken Sie
<a href="api/Movies/3"> hier </a> um einen
bestimmten Eintrag zu laden.
</body>
</html>
$$ Listing 4: die View der MVC-Anwendung
Hier wählen Sie die Web API Controller Class aus (Bild 7)