HowTo: Eingabenvalidierung in ASP.NET MVC

image Eingabenvalidierung ist ein sehr wichtiger Punkt in der Anwendungsentwicklung. Man sollte niemals blind User-Eingaben vertrauen. Neben “fehlerhaften” Eingaben, gibt es auch noch die böswilligen Eingaben. In diesem Blogposts geht es um dieses Thema und wie man das in ASP.NET MVC machen kann.

Unser Szenario

In unserem Szenario haben wir eine kleines Formular in dem man eine Email-Adresse hinterlegen kann und sein Feedback abgeben kann.
Hinweis: In einem anderen Blogpost habe ich die grundsätzliche Kommunikation von View zu Controller genauer beschrieben. Siehe Hier.

image

Beides Felder sollen Pflichtfelder sein.

Der View:

<form method="post" action="<%=Url.Action("Index", "Home") %>" id="ContactForm">
        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="Name">Name:</label>
                <%= Html.TextBox("Email") %>
           </p>
            <p>
                <label for="Description">Feedback:</label>
                <%= Html.TextArea("Feedback") %>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    </form>

Wir bedienen uns hier in dem View bei den HtmlHelpern von ASP.NET MVC. Warum wir dies machen, erklär ich gleich. Ansonsten ist das HTML Formular sehr einfach aufgebaut. Mit einem Klick auf “Create” wird die Form zur “Index”-Action Method des “Home” Controllers geschickt.

Der Controller:

In meinem Beispielcode gehe ich davon aus, dass jegliche Eingaben ungültig sind – das ist nicht besonders logisch, sollte aber als Beispiel hier reichen ;)

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Index(string Email, string Feedback)
        {
            ModelState.AddModelError("Email", "Check it!");
            ModelState.AddModelError("Feedback", "No feedback? Oh no!");

            return View();
        }

imageDie Daten kommen als Parameter an und ich füge dem ModelState “Errors” hinzu. Wichtig ist der Key. Dieser muss mit dem “Key” des Html Feldes übereinstimmen.

In meinem Beispiel wird dies nun wieder zurück zum View geleitet.

Die Html Helper

An dieser Stelle kommen nun die HTML Helper ins Spiel. Die Helper schauen im ViewData nach, ob es Errors gibt:

image

Neben der Fehlermeldung wird auch der alte Wert wieder übermittelt:

image

Dadurch sieht der Nutzer seinen alten Wert wieder und dem Html Input Feld wird eine “Error” Klasse angehangen.

Ausgabe der Fehlermeldungen

Damit die Fehlermeldung nun noch erscheint, müssen wir unser HTML etwas erweitern:

<%= Html.ValidationSummary() %>

    <form method="post" action="<%=Url.Action("Index", "Home") %>" id="ContactForm">
        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="Name">Name:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email")%>
            </p>
            <p>
                <label for="Description">Feedback:</label>
                <%= Html.TextArea("Feedback") %>
                <%= Html.ValidationMessage("Feedback")%>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

Html.ValidationSummary: Dieses gibt eine Zusammenfassung der Fehler als Liste zurück.

Html.ValidationMessage: Dieser Helper gibt ein Fehler-Label für den jeweiligen Key zurück.

Ergebnis:

image

Das sieht doch schon ganz nett aus.

Client-Seitige Validierung

Für eine bessere Userexperience ist es immer gut, wenn man den Nutzer schon vorher informiert, ob die Daten valide sind. So kann man bereits auf Client-Seite prüfen ob alle benötigten Felder gefüllt sind oder nicht.

Dazu nehme ich gerne das jQuery Plugin “jQuery Validation“. Auf der Demoseite sieht man die vielfältige Nutzung: Demo.

Dazu muss man sich die jQuery Validation Bibliothek runterladen und jQuery sowie jQuery Validation einbinden.

jQuery Validation Konfigurieren

jQuery Validation wird über den Javascript Aufruf “konfiguriert”. Dieses Javascript steht bei meinem Beispiel im Head der Seite und wird ausgeführt, sobald die HTML Seite fertig beim Client geladen ist:

    $().ready(function() {
        $("#ContactForm").validate({
            rules: {
                Email: { required: true, email: true },
                Feedback: "required"
            }
        });
    });

Hiermit wird einfach gesagt: Validiere mir die “ContactForm” mit folgenden Rules. Es muss ein Email-Feld geben, welches gefüllt sein muss und eine Email enthalten soll sowie ein Feedback-Feld, welches ebenfalls gefüllt sein muss.

Falls z.B. eine ungültige Email eingegeben wurde, wird noch bevor das Formular gesendet wird diese Fehlermeldung ausgegeben:

image

Das Plugin kann man weitgehend konfigurieren – auch die Fehlermeldungen kann man anpassen. Dazu am besten auf der Pluginseite selbst suchen.

jQuery Validation & Html.ValidateMessages vereinen

Damit man nur eine CSS Klasse für die Fehlermeldungen pflegen muss, empfiehlt es sich, dass beide Fehlermeldungen dieselbe CSS Klasse nutzen. Dazu kann man jQuery Validation anpassen oder den Html Helper. Wir haben dies über den Html Helper gemacht.

Das fertige Resultat:

    <%= Html.ValidationSummary() %>

    <form method="post" action="<%=Url.Action("Index", "Home") %>" id="ContactForm">
        <fieldset>
            <legend>Fields</legend>
            <p>
                <label for="Name">Name:</label>
                <%= Html.TextBox("Email") %>
                <%= Html.ValidationMessage("Email",
                                            new
                                            {
                                                @class = "error",
                                                generated = "true",
                                                @for = "Email"
                                            })%>
            </p>
            <p>
                <label for="Description">Feedback:</label>
                <%= Html.TextArea("Feedback") %>
                <%= Html.ValidationMessage("Feedback",
                                            new
                                            {
                                                @class = "error",
                                                generated = "true",
                                                @for = "Feedback"
                                            })%>
            </p>
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    </form>

Damit werden jetzt alle Fehlermeldungen mit der “Error” CSS Klasse gerendert.

Vermischtes:

HTML Input

Per Default wird HTML Input in MVC als Exception verworfen – wer also “</html>” oder ähnliches in die Box eingibt, bekommt eine Exception zu sehen bzw. die Fehlerseite.
Dies kann man mit dem Attribute “[ValidateInput(false)]” unterbinden. Mehr Informationen dazu auf dem Blog von Stephen Walther.

Styling Tipps für Fehlermeldungen

Gute Tipps, wie man sein Webformular mit Fehlermeldungen “aufwerten” kann liefert das SmashingMagazin. Ein Blick lohnt sich :)

ModelState zu einer anderen Seite “weiterschleifen”

Würden wir in einem Fehlerfall nicht “return View()” sondern den Nutzer z.B. zu einer anderen Action Umleiten wird der gesamte ModelState wieder geleert. In diesem Fall kann man sich den ModelState in das “TempData” schreiben. Am einfachsten geht dies über einen ActionFilter.
Hier empfehle ich den Punkt 13 der ASP.NET MVC Best Practices.

xVal – Validation Framework für ASP.NET MVC

xVal ist ein Framework, welches serverseitig und clientseitig validieren kann:

image

Steve Sanderson ist der Autor dieses Frameworks und hat es auf seinem Blog beschrieben.

Die Zukunft: ASP.NET MVC 2

In ASP.NET MVC 2 wird das Thema Eingabenvalidierung nochmal weiter ausgebaut. Auch jQuery Validation findet sich direkt im Template wieder.

Fazit

Eingabenvalidierung ist in ASP.NET MVC meiner Meinung nach sehr flexibel gelöst und es ist auch relativ schnell einzubauen und über Javascript und co. auch für die “Client” Seite gerüstet. Auch größere Formulare kann man also gut mit ASP.NET MVC + jQuery Validation für den Anwender nett gestalten :)

[Downloade Democode]

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

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

One Response

  1. Sehr netter Beitrag, gut und nachvollziehbar geschrieben, wie immer ;-)

    Reply

Comment on this post

Letzte Posts

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

  • image.png
    HowTo: RSS Feeds mit ASP.NET MVC erstellen

    Ich hatte hier schon öfters geschrieben wie man RSS oder Atom Feeds konsumieren kann – jetzt geht es aber mal um das erstellen bzw. publishen eines eigenen Feeds. Trotz des Alters von den Feed Standards und die vielen Abgesänge von Facebook, Twitter und Google auf RSS/Atom halte ich diese einfach zu konsumierende API für ziemlich […]

Amazon Shop

Facebook