HowTo: Daten vom View zum Controller übermitteln / Modelbinders in ASP.NET MVC

imageMit ASP.NET MVC ist der Entwickler völlig in Kontrolle über das HTML Markup und wohin die Daten gesendet werden. Die Daten werden über eine HTML Form an den Server gesendet – aber wie kann der Controller Daten entgegen nehmen? Das Framework bringt einige Möglichkeiten mit, um nicht immer über Request.Forms[...] an seine Daten ranzukommen.

Einstieg
Das gorbe ASP.NET MVC Konzept (und wie die Kommunikation unter den verschiedenen Teilen funktioniert) habe ich breits in diesem Post aufgeführt.

"Bindings"
In diesem HowTo geht es darum, wie HTML Form Daten auf dem Server ankommen und welche Möglichkeiten es gibt.

Aufbau


image

Wir haben einen "BindingController", sowie im Model unsere "Person" Klasse und dazu 3 Views:

- "CreatePerson" (Form für das Erstellen einer Person)
- "Ergebnis" der Aktion
- "Index" ist nur die Übersichtsseite

 

 

 

 

 

Person Class:

    public class Person
    {
        public Guid Id { get; set; }
        public string Prename { get; set; }
        public string Surname { get; set; }
        public int Age { get; set; }
    }

Form in der CreatePerson.aspx:

    <% using (Html.BeginForm()) {%>

        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="Id">Id:</label>
                <%= Html.TextBox("Id") %>
                <%= Html.ValidationMessage("Id", "*") %>
            </p>
            <p>
                <label for="Prename">Prename:</label>
                <%= Html.TextBox("Prename") %>
                <%= Html.ValidationMessage("Prename", "*") %>
            </p>
            <p>
                <label for="Surname">Surname:</label>
                <%= Html.TextBox("Surname") %>
                <%= Html.ValidationMessage("Surname", "*") %>
            </p>
            <p>
                <label for="Age">Age:</label>
                <%= Html.TextBox("Age") %>
                <%= Html.ValidationMessage("Age", "*") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

Binding: 1. Variante – FormCollection:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FormCollection(FormCollection collection)
        {
            Person person = new Person();
            person.Prename = collection["Prename"];
            person.Surname = collection["Surname"];
            person.Age = int.Parse(collection["Age"]);
            return View("Result", person);
        }

In diesem Fall greifen wir auf die Collection zu und haben über Key/Value Zugang zu den übermittelten Werten. Hier muss man seine Daten manuell rausziehen.

Binding: 2. Variante – Parameter Matching:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ParameterMatching(string Prename, string Surname, int Age)
        {
            Person person = new Person();
            person.Prename = Prename;
            person.Surname = Surname;
            person.Age = Age;

            return View("Result", person);
        }

Bei dieser Variante wird versucht die übermittelten Werte anhand des Namens und des Types auf die Parameter zu mappen.

Binding: 3. Variante – Default Binding:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DefaultBinding(Person person)
        {
            return View("Result", person);
        }

Bei dieser Variante wird der Default Modelbinder im ASP.NET MVC Framework genommen. Dieser versucht ebenfalls anhand des Namens und des Types dies auf diesen Typ zu mappen.

Binding: 3. Variante mit Addon – Default Binding mit Include:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DefaultBindingWithInclude([Bind(Include="Prename")] Person person)
        {
            return View("Result", person);
        }

Da es gefährlich sein kann einfach blind die Http Form Values auf ein Objekt zu mappen, kann man auch nur bestimmte Felder über "Include" auswählen.

Binding: 3. Variante mit Addon – Default Binding mit Exclude:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult DefaultBindingWithExclude([Bind(Exclude = "Prename")] Person person)
        {
            return View("Result", person);
        }

Die selbe Funktionalität geht auch umgedreht.

Binding: 3. Variante mit Addon – Default Binding mit Prefix:

image

Wenn man die Html Input Felder mit einem Prefix versehen hat, dann kann man dies hier mit angeben. Das ist dann sinnvoll, wenn in einer Form verschiedene Daten eingegeben werden sollen, allerdings die Namen sich gleichen.

Diese Optionen kann man auch beliebig mixen.

Binding: 4. Version – IModelBinder

Wenn man doch eine etwas komplexeres Beispiel hat, wo das Default Binding versagt, kann man auch seine eigenen ModelBinder schreiben. Ein Beispiel ist z.B. Fileupload oder das das Binden an den aktuellen User.

Dazu muss man in einer Klasse das IModelBinder Interface implementieren:

public class PersonModelBinder : IModelBinder
    {
        public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)
        {
         if (controllerContext == null) {
             throw new ArgumentNullException("controllerContext");
         }
         if (bindingContext == null) {
             throw new ArgumentNullException("bindingContext");
         }

            NameValueCollection collection = controllerContext.RequestContext.HttpContext.Request.Form;

            Person returnValue = new Person();
            returnValue.Id = Guid.NewGuid();
            returnValue.Prename = "Modelbinder: " + collection["Prename"];
            returnValue.Surname = "Modelbinder: " + collection["Surname"];
            int age = 0;
            int.TryParse(collection["Age"], out age);
            returnValue.Age = age;

            return returnValue;
        }

    }

Hierbei hat man kompletten Zugriff auf die Formvalues und kann diese entsprechend auf sein Objekt mappen.

Dieser Modelbinder kann entweder Global in der Global.asax hinzugefügt werden:

        protected void Application_Start()
        {
            RegisterRoutes(RouteTable.Routes);
            ModelBinders.Binders[typeof(Person)] = new PersonModelBinder(); // Important!
        }

Oder man macht es pro ActionMethod:

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult PersonModelBinder([ModelBinder(typeof(PersonModelBinder))] Person person)
        {
            return View("Result", person);
        }

Lists/Array Binding:

Es ist auch möglich dass man eine komplette "Collection" zum Controller sendet und dieser versteht das am Ende auch als List<Person>. Das Beispiel ist sehr gut in Scott Hanselmans Post erklärt.

Screens:

image

image

image

[Download Source Code]


Kick It auf dotnet-kicks.de
Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by Robert Mühsig

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

7 Responses

  1. Vielen Dank, das waren sehr nützliche Infos gerade!

    Reply
  2. Hallo Robert,

    ich habe von Oliver diesen Artikel gesendet bekommen. Die HTML-Daten zum Controller senden funktioniert bei mir jetzt auch bestens. Aber wie kann ich diese Daten manipulieren und zurücksenden?

    1. Beispiel: Die Daten werden per $.post gesendet. Ich rufe Sie als Formcollection im Controller ab und fülle leere Felder mit Daten auf. Als Return gebe ich das View mit den Daten zurück. Alles bestens.

    2. Beispiel: Die Daten werden per $.post gesendet. Ich rufe Sie als Object (Default Binding) im Controller ab und fülle leere Felder mit Daten auf. Als Return gebe ich wieder das View mit den Daten zurück. Leider tauchen im Frontend nun immer noch die alten Daten auf. Ich vermute es liegt am ModelState – aber kann man diesen einfach manipulieren um die Daten zu ergänzen? Hast du eine Idee?

    VG
    Christian

    Reply

Comment on this post

Letzte Posts

  • image.png
    RavenHQ–RavenDB in der Cloud

    Ayende Rahien hat es heute verkündet – RavenHQ, der RavenDB Cloud Hoster (natürlich von und mit Ayende) ist ab heute raus aus der Beta und man kann es von überall aus nutzen. In der Betaphase waren nur Nutzer von AppHarbor zugelassen. Was ist RavenHQ? RavenHQ ist im Grunde ein gehostes RavenDB in den Rechenzentren von ...

  • image.png
    GitHub for Windows–erste Eindrücke

    Git ist schon eine tolle Sachen und eröffnet viele neue Möglichkeiten – allerdings ist der Einstieg recht hart und selbst wenn man die guten Hilfsanleitungen auf GitHub befolgt, kommt man am Anfang nur langsam vorwärt. Insbesondere ist das Tooling für Windows / .NET Entwickler auch nicht gerade “bekanntes Terrain”. GitHub to the rescue! Die GitHub ...

  • image.png
    Chocolatey–apt-get für Windows

    Durch Zufall bin ich auf das Tool “Chocolatey” gestoßen. Wer die Website sich anschaut, wird evtl. eine Verwandschaft mit NuGet ausmachen. Was macht Chocolatey? Chocolatey ist ein “Maschine Package Manager”, das bedeutet, dass man für seine Maschine einfach Tools runterladen und Updaten kann – direkt über die Konsole. Was ist der Unterschied zu NuGet? NuGet ...

  • image.png
    SASS, LESS & Coffeescript in Visual Studio mit der Web Workbench

    CSS und Javascript sind die “kleinste” Schnittmenge von allen Browsern für die Erstellung von Web-Applikationen. Leider geht dabei etwas komfort verloren, daher lieben alle Webentwickler jQuery! SASS und LESS sind zwei Varianten, wie man “schöner” CSS schreiben kann und Coffeescript versucht Javascript Entwicklung zu vereinfachen. Aber immer der Reihe nach… Was ist SASS? SASS steht ...

  • image.png
    Code-Inside Sample nun auf GitHub: Google Code zu GitHub Migration

    Seit einiger Zeit habe ich Beispielcode auf Google Code bereitgestellt. Einfach nur noch weg von Google Code O-Ton damals war: Ich hatte mich für Google Code entschieden, weil ich hoffe dass früher oder später die Google Code Suche nutzbar ist und es dadurch wenigstens ein kleiner Mehrwert entsteht. Allerdings wirft es momentan noch ein Fehler. ...

Auf Amazon einkaufen & unterstützen

Facebook