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)