ASP.NET Mvc 3 unobtrusive validation
In dieser dreiteiligen Postreihe wird gezeigt, wie sich ab ASP.NET Mvc 3 die Validierung von Formularen geändert hat, welche Vorteile sie mit sich bringt und wie die Validierung mit eigenen Regeln erweitert wird.
Bereits in
MVC2 gab es eine client und serverseitige
Validierung für Models.
Standartmäßig für den Client mit ASP.NET Ajax, aber auch mit einer kleinen
jQuery Erweiterung machbar.
Bereits durch dieses Verfahren wurde der
serverseitige Teil (Durch den Einsatz von DataAnnotations) vom
Clientseitigen entkoppelt.
public class Mandant
{
[Required(ErrorMessage = "Name is required.")]
[StringLength(50, ErrorMessage = "Must be under 50 characters.")]
[DisplayName("Mandant Name")]
public string Name { get; set; }
}Was im Html Code dabei gerendert wird, sieht in etwa so aus:
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"Mandant.Name","ReplaceValidationMessageContents":true,"ValidationMessageId":"Mandant_Name_validationMessage","ValidationRules":[{"ErrorMessage":"Name is required.","ValidationParameters":{},"ValidationType":"required"},{"ErrorMessage":"Must be under 50 characters.","ValidationParameters":{"minimumLength":0,"maximumLength":50},"ValidationType":"stringLength"}]}, ...
//]]>Ab der dritten Version des MVC Frameworks wird die Validierung hingegen etwas schicker gelöst.
Im Prinzip bringt die Neuerung den Vorteil mit sich, dass auf einen langen JSON String im Html code
verzichtet wird und dafür auf
HTML5 kompatible Attribute gesetzt wird, die die Validierung der Input Felder beschreiben.
<input type="text" value="" name="Name" id="Name" data-val-required="The Name field is required." data-val="true" class="input-validation-error">
<input type="text" value="" name="Age" id="Age" data-val-required="The Age field is required." data-val-number="The field Age must be a number." data-val="true" class="input-validation-error">Ein weiterer Vorteil ist der Verzicht auf automatisch generierte IDs, da die Informationen nun direkt am Input Feld angefügt werden.
Um diese "
unobtrusive" (Übersetzt: unauffällig, bescheiden) Validierung nutzen zu können, sind zwei einfache Schritte notwendig.
Folgende Script Bilbiotheken einbinden:
(Beim erstellen eines neuen MVC3 Projekts werden diese standartmäßig eingebunden)
<script src="@Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
Dazu noch sicherstellen, dass in der Web.Config folgende Einstellungen gesetzt sind:
<appSettings>
<add key="ClientValidationEnabled" value="true"/>
<add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>
Diese sind ebenfalls ab einem MVC3 Projekt-Template standartmäßig dabei, bei einem Upgrade von einer älteren Version müssen sie manuell hinzugefügt werden.
Die eben genannten Einstellungen sind Global für das ganze Projekt, natürlich gibts diese auch Kontext spezifisch:
HtmlHelper.ClientValidationEnabled = true;
HtmlHelper.UnobtrusiveJavaScriptEnabled = true;Dazu wie gewohnt das Model mit den DataAnnotations versehen (siehe weiter oben) und das Ganze sollte funktionieren.
Und wie das Ganze im Hintergrund funktioniert?Grundsätzlich hängt alles davon ab, ob das
data-val="true" Attribut gesetzt ist.
Dieses wird dem Feld hinzugefügt, wenn mindestens eine Regel aktiv ist.
Die wohl am meisten verwendete Regel ist jene, die besagt, ob ein Feld ein Pflichtfeld ist. (Html Attribut dazu: data-val-required="true")
Natürlich gibt es zusätzlich verschiedene optionale
Attribute wie data-val-length, data-val-length-min (max), data-val-range-min (max), data-val-regex, data-val-regex-pattern, usw.
Fazit:Ich habe bereits ein Projekt umgestellt, es geht relativ fix und ist doch um einiges schöner - somit: man sollte sich die Arbeit antun.
Im nächsten Post wird genauer auf eigene jQuery Validators eingegangen, schaut also vorbei :-)
Anbei wie immer das Beispiel:
