Verfasst von: bletra | 19. Mai 2010

Asp.Net MVC: Schnellstart

Klassische Webentwicklung in .Net basiert auf Webforms, die wiederum auf ASP.Net aufsetzen. Webforms ist in der Entwicklungsmethodik und Denkweise eng an Winforms angelehnt — so eng, dass man die Engpässe, die einem das http-Protokoll und seine Zustandslosigkeit oder das Request-Response-Prinzip auferlegen, fast vergessen kann. Bei Webforms gibt es viele mächtige vorgefertigte Steuerelemente, die man per Drag&Drop auf seine Webseite ziehen kann, so dass die sonst mühsame Oberflächengestaltung des Webs einfach von der Hand geht. Der dabei erzeugte HTML-Code ist jedoch oft nicht valide und das Aussehen für verschiedene Clients kann nur sehr bedingt beeinflusst werden. Automatische Tests sind auch nur eingeschränkt möglich. Demgegenüber unterstützen fast alle verbreiterten PHP- oder Java-basierten Frameworks das Entwurfsmuster MVC. Unter Codeplex gibt es ebenfalls ein Open Source Framework, das auf Asp.Net aufsetzt, sich also in bestehende .Net Klassenbibliotheken einklinkt und Webentwicklung nach dem MVC-Pattern ermöglicht. Mit allen damit verbundenen Vorteilen, wie automatische Tests, Trennung der Abhängigkeiten, Conventions, voller Kontrolle des ausgelieferten HTML-Codes und vielem mehr. Mit Visual Studio 2010 wird die ASP.Net MVC-Entwicklung direkt mit Projektvorlagen unterstützt. Im Folgenden möchte ich auf einige Grundlagen dieses Projekttyps eingehen und die vorhandene Vorlage schrittweise erweitern.

Als Basis für diesen Artikel dienten mir die Videos

Außerdem möchte ich als Einstieg noch die Seite ASP.NET MVC: The Official Microsoft ASP.NET Site empfehlen.

Starten Sie Visual Studio 2010 und erzeugen Sie ein Projekt auf der Vorlage von ASP.Net MVC 2 Web Application. Das Formular, das Sie nun sehen ist per MEF von ASP.Net MVC in Visual Studio hinzugefügt worden. Sie erhalten eine leere Webapplikation mit einer Home- und einer Aboutseite, den zugehörigen Views und einen Homecontroller — das Modell ist leer. Darin enthalten ist eine Benutzerverwaltung auf Basis von SQL Express, die über die Web.config eingebunden wird. Die folgende Abbildung zeigt das verwendete Datenbankmodell:

Hier können sich Benutzer registrieren, die Logik regelt der Accountcontroller. Sie können diese Verwaltung natürlich komplett rauswerfen und durch eine eigene Benutzerverwaltung ersetzen. Generell verfolgt ASP.Net den Ansatz, Ihnen viel Arbeit abzunehmen, ohne Ihnen Konfigurationsmöglichkeiten zu nehmen. An jeder Stelle können Sie entscheiden, ob Sie der Vorlage folgen möchten, oder eine eigene Lösung implementieren. Wir möchten eine neue Seite einfügen, die das Anzeigen und Bearbeiten von Daten einer Datenbank ermöglicht. Hierzu müssen wir eine Datenbank erstellen und werden diese mit dem Entity Framework (EF) einbinden. Außerdem müssen wir den Controller und zugehörige Views implementieren, sowie die Seite in das Menu einbauen.

Datenbank anlegen

Gehen Sie auf App.Data, Add, New Item, Data, SQL Server Database. Wir nennen die Datenbank DBTest und fügen eine Tabelle Person mit Id (int, primary key), Name (varchar) und City (varchar, allow nulls) hinzu. Machen Sie hierzu einen Doppelklick auf Ihre Datenbank, um den ServerExplorer zu öffnen. Wenn Sie ein ORM wie EF verwenden möchten, müssen Sie einen Primärschlüssel definieren. Dies ist in der DB-Entwicklung natürlich generell empfehlenswert.

Model anlegen

Fügen Sie unter Models ein neues Item auf Basis der Vorlage ADO.NET Entity Data Model hinzu und nennen es ModelTest, folgen Sie dem Wizard.

Controller anlegen

Gehen Sie auf den Ordner Controllers und wählen Sie Add, Controller, nennen Sie den Controller PersonController, machen Sie bei Add action Methods einen Haken. Fügen Sie mit using [Namensraum].Models die Modelle hinzu, legen Sie eine private Property _db vom Typ DBTestEntities an und instanziieren Sie diese im Konstruktor der Klasse. In der Index-Seite soll die Liste der aktuellen Daten angezeigt werden, fügen Sie in die Methode die Zeile ViewData.Model = _db.Person.ToList(); hinzu. Kompilieren Sie die Solution, um gewissen Settings für den kommenden Schritt zur Verfügung zu haben. Die passende View können Sie sehr einfach mit einem Rechtsklick in die Methode und Add View und den Optionen Create a strongly-typed view, View data class: [Namespace].Models.Person, View content: List erzeugen. Zum Anlegen eines neuen Datensatzes, bearbeiten wir die mit Post gekennzeichnete Methode Create. Um typisiert zu arbeiten, ändern wir den vorgegebenen Parametertyp auf Person und nennen ihn person und fügen folgenden Code ein: if (ModelState.IsValid){_db.AddToPerson(person);_db.SaveChanges();} else return View(person); Erzeugen Sie die passende View wie zuvor. Analog können Sie Edit und Delete bearbeiten.

Menu anpassen

Das Menu finden Sie unter Views, Shared, Site.Master. Hier können Sie einen Link mit den Argumenten Titel, Index, Person einfügen. Das letzte Argument bezeichnet den Controllername.

Zusatzinformationen

Die Fehlermeldungen in den Views können Sie einfach anpassen, ValidationMessage oder ValidationSummary.

Wie bei Apache mod_rewrite können Sie die URLs und die dazugehörigen Controller-Methoden definieren. Dies geschieht in der Datei Global.asax. Hinweis: Die definierten Routen werden nach der Reihenfolge bearbeitet, trifft eine Regel zu, so werden nachfolgende Regeln ignoriert. Wenn Sie also eine Regel, wie die voreingestellte Regel zuerst setzen, sind weitere danach folgende Regeln irrelevant.

Setzen Sie einen Breakpoint in einen Controller und betrachten Sie den CallStack. Hier können Sie sehr gut, sehen, wie zuerst Methoden des System.Web-Namespaces aufgerufen werden und sich ASP.Net MVC in System.Web.HttpApplication.Execute einklinkt.

Prinzipiell ist es möglich, ASP.Net Webform-Seiten mit ASP.Net MVC Applikationen zu mischen. Ob dies sinnvoll ist, ist eine andere Frage 😉 Näheres können Sie im Artikel Running ASP.NET Webforms and ASP.NET MVC side by side nachlesen.

Die Fehlersuche scheint bei ASP.Net MVC wohl schwieriger sein, helfen möchte dabei ein auf Webform basiertes Diagnostiktool: Diagnosing ASP.NET MVC Problems.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

Kategorien

%d Bloggern gefällt das: