Blog posts by Lars-Woetmann-Pedersen2013-07-05T17:15:26.0000000Zhttps://world.optimizely.com/blogs/Lars-Woetmann-Pedersen/ Optimizely World MVC ValidationAttribute ErrorMessage populated at runtime<p>I am working on a project using EPiServer 7 and MVC 4. One of the nice features in MVC is ValidationAttributes in the model such as RequiredAttribute and RegularExpressionAttribute. These attributes give you server side validation on your model, if combined with jquery.validate and jquery.validate.unobtrusive you also get client side validation without writing any javascript yourself. This is very nice and keeps the code clean and it looks something like this:</p> <p>In my controller I create a viewmodel and pass it to the view, using a viewmodel is optional but I like it and follow the pattern described by Joel Abrehamsson here: http://joelabrahamsson.com/episerver-and-mvc-what-is-the-view-model/</p> <div class="csharpcode"> <pre class="language-csharp"><code><span class="kwrd">public</span> <span class="kwrd">class</span> EducationPlanSearchController : ProtectedPageControllerBase<EducationPlanSearchPage></code></pre>
<pre class="language-csharp"><code>{</code></pre>
<pre class="language-csharp"><code> [HttpGet]</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">public</span> ActionResult Index(EducationPlanSearchPage currentPage)</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> EducationPlanSearchPageViewModel viewModel = <span class="kwrd">new</span> EducationPlanSearchPageViewModel(currentPage);</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">return</span> View(viewModel);</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> ... HttpPost part left <span class="kwrd">out</span> </code></pre>
<pre class="language-csharp"><code>}</code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>My viewmodel has one property its required and has to have a correct format:</p>
<div class="csharpcode">
<pre class="language-csharp"><code><span class="kwrd">public</span> <span class="kwrd">class</span> EducationPlanSearchPageViewModel : PageViewModel<EducationPlanSearchPage></code></pre>
<pre class="language-csharp"><code>{</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">public</span> EducationPlanSearchPageViewModel(EducationPlanSearchPage currentPage) : <span class="kwrd">base</span>(currentPage)</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> [Required(ErrorMessage = <span class="str">"Compiletime error required"</span>)]</code></pre>
<pre class="language-csharp"><code> [RegularExpression(<span class="str">@"^\d{6,6}-?\d{4,4}$"</span>, ErrorMessage = <span class="str">"Compiletime error format"</span>)]</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">public</span> <span class="kwrd">string</span> Cpr { get; set; }</code></pre>
<pre class="language-csharp"><code>}</code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>The view is very simple it is just a form with one input field and a submit button:</p>
<div class="csharpcode">
<pre class="language-csharp"><code>@model Pdk.Website.Models.ViewModels.EducationPlanSearchPageViewModel</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code><div <span class="kwrd">class</span>=<span class="str">"content-block"</span>></code></pre>
<pre class="language-csharp"><code> <div <span class="kwrd">class</span>=<span class="str">"formLine"</span>></code></pre>
<pre class="language-csharp"><code> @<span class="kwrd">using</span> (Html.BeginForm())</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> @Html.ValidationSummary()</code></pre>
<pre class="language-csharp"><code> @Html.EditorFor(m => m.Cpr)</code></pre>
<pre class="language-csharp"><code> <input type=<span class="str">"submit"</span> <span class="kwrd">value</span>=<span class="str">"@Model.CurrentPage.SearchButtonText"</span>/></code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> </div></code></pre>
<pre class="language-csharp"><code></div></code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>In my layout I include the needed jquery files:</p>
<div class="csharpcode">
<pre class="language-csharp"><code><script src=<span class="str">"/Scripts/jquery-1.10.1.js"</span>></script></code></pre>
<pre class="language-csharp"><code><script src=<span class="str">"/Scripts/jquery.validate.js"</span>></script></code></pre>
<pre class="language-csharp"><code><script src=<span class="str">"/Scripts/jquery.validate.unobtrusive.js"</span>></script></code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>If someone press the submit button with an empty input field or one with the wrong format they will get an error message, and this happens client side, using the ErrorMessage defined in the attribute for the property in the viewmodel:</p>
<p><img src="http://farm4.staticflickr.com/3689/9213250221_e3f723ff14.jpg" /></p>
<p>This is all standard MVC so far, there is just one problem with this because I would like to set the ErrorMessage on the ValidationAttribute runtime using an EPiServer page property. That would enable the editors to change the error message when they want to.</p>
<p>To do this I have to implement my own  model metadata provider which is used by  ASP.NET MVC to load the validation attributes, tell my IoC container to use this, and set the ErrorMessage when the viewmodel is created. First I create my own  model metadata provider:</p>
<div class="csharpcode">
<pre class="language-csharp"><code><span class="kwrd">public</span> <span class="kwrd">class</span> MyModelMetaDataProvider : CachedDataAnnotationsModelMetadataProvider</code></pre>
<pre class="language-csharp"><code>{</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">private</span> <span class="kwrd">readonly</span> Dictionary<Tuple<Type, <span class="kwrd">string</span>>, List<Tuple<Type, <span class="kwrd">string</span>>>> _errorMessageDictionary = <span class="kwrd">new</span> Dictionary<Tuple<Type, <span class="kwrd">string</span>>, List<Tuple<Type, <span class="kwrd">string</span>>>>();</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> <span class="kwrd">public</span> <span class="kwrd">void</span> SetValidationErrorMessage(Type containerType, <span class="kwrd">string</span> propertyName, Type validationAttribute, <span class="kwrd">string</span> errorMessage)</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">if</span> (!<span class="kwrd">string</span>.IsNullOrWhiteSpace(errorMessage))</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> Tuple<Type, <span class="kwrd">string</span>> key = <span class="kwrd">new</span> Tuple<Type, <span class="kwrd">string</span>>(containerType, propertyName);</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">if</span> (!_errorMessageDictionary.ContainsKey(key))</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> _errorMessageDictionary[key] = <span class="kwrd">new</span> List<Tuple<Type, <span class="kwrd">string</span>>>();</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> Tuple<Type, <span class="kwrd">string</span>> <span class="kwrd">value</span> = <span class="kwrd">new</span> Tuple<Type, <span class="kwrd">string</span>>(validationAttribute, errorMessage);</code></pre>
<pre class="language-csharp"><code> _errorMessageDictionary[key].Add(<span class="kwrd">value</span>); </code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> <span class="kwrd">protected</span> <span class="kwrd">override</span> CachedDataAnnotationsModelMetadata CreateMetadataPrototype(IEnumerable<Attribute> attributes, Type containerType, Type modelType, <span class="kwrd">string</span> propertyName)</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> CachedDataAnnotationsModelMetadata model = <span class="kwrd">base</span>.CreateMetadataPrototype(attributes, containerType, modelType, propertyName);</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> Tuple<Type, <span class="kwrd">string</span>> key = <span class="kwrd">new</span> Tuple<Type, <span class="kwrd">string</span>>(containerType, propertyName);</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> <span class="kwrd">if</span> (_errorMessageDictionary.ContainsKey(key))</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> List<Tuple<Type, <span class="kwrd">string</span>>> errorMessageList = _errorMessageDictionary[key];</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">foreach</span> (ValidationAttribute attribute <span class="kwrd">in</span> attributes.OfType<ValidationAttribute>())</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> var <span class="kwrd">value</span> = errorMessageList.FirstOrDefault(t => t.Item1 == attribute.GetType());</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">if</span> (<span class="kwrd">value</span> != <span class="kwrd">null</span>)</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> attribute.ErrorMessage = <span class="kwrd">value</span>.Item2;</code></pre>
<pre class="language-csharp"><code> } </code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">return</span> model;</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code>}</code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>It contains a dictionary where I add the error messages I want to update, the key in the dictonary is the viewmodel type and property name, the value is the attribute type and error message. When a view with a model containing validation attributes is created  CreateMetadataPrototype is called and the ErrorMessages is set using this dictionary.</p>
<p>The viewmodel is updated to call SetValidationErrorMessage from the constructor, I get the new error messages from the PageData model, thus allowing the editors to edit it as a property on the page:</p>
<div class="csharpcode">
<pre class="language-csharp"><code><span class="kwrd">public</span> <span class="kwrd">class</span> EducationPlanSearchPageViewModel : PageViewModel<EducationPlanSearchPage></code></pre>
<pre class="language-csharp"><code>{</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">public</span> EducationPlanSearchPageViewModel(EducationPlanSearchPage currentPage) : <span class="kwrd">base</span>(currentPage)</code></pre>
<pre class="language-csharp"><code> {</code></pre>
<pre class="language-csharp"><code> MyModelMetaDataProvider metadataProvider = (MyModelMetaDataProvider)ModelMetadataProviders.Current;</code></pre>
<pre class="language-csharp"><code> metadataProvider.SetValidationErrorMessage(GetType(), <span class="str">"Cpr"</span>, <span class="kwrd">typeof</span>(RequiredAttribute), currentPage.ErrorCprEmpty);</code></pre>
<pre class="language-csharp"><code> metadataProvider.SetValidationErrorMessage(GetType(), <span class="str">"Cpr"</span>, <span class="kwrd">typeof</span>(RegularExpressionAttribute), currentPage.ErrorCprFormatWrong);</code></pre>
<pre class="language-csharp"><code> }</code></pre>
<pre class="language-csharp"><code> </code></pre>
<pre class="language-csharp"><code> [Required]</code></pre>
<pre class="language-csharp"><code> [RegularExpression(<span class="str">@"^\d{6,6}-?\d{4,4}$"</span>)]</code></pre>
<pre class="language-csharp"><code> <span class="kwrd">public</span> <span class="kwrd">string</span> Cpr { get; set; }</code></pre>
<pre class="language-csharp"><code>}</code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>Before it works I have to tell my IoC container to use my own ModelMetadataProvider:</p>
<div class="csharpcode">
<pre class="language-csharp"><code>container.For<ModelMetadataProvider>().Use<MyModelMetaDataProvider>();</code></pre>
</div>
<style type="text/css">
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>Now when the Index action on EducationPlanSearchController is called the viewmodel is created and in its constructor the correct ErrorMessage is set on the current ModelMetadataProvider which is of the type MyModelMetaDataProvider and when the view is called the method CreateMetadataPrototype is called, and the correct ErrorMessage is set.</p>
<p><img src="http://farm8.staticflickr.com/7363/9213250205_af013c9036.jpg" /></p>
<p>I hope this can help others in the same situation, I realize the code could use some more comments so don’t hesitate to ask if there is any problems with it. And if anybody has a cleaner solution to this problem, (apart from convincing the editor to give up runtime editing of error messages) then I would like the see it.</p>2013-07-05T17:15:26.0000000ZBlog post