Tag Archives: Editor Templates

An exploration of HTML5 Editor Templates with MVC

It occurred to me that we should be using the input type = email in our WebCenter 6 project.  I thought editor templates would be the right way to do this.

If you download the rtm sources for asp.net who will find the MVC 3 Futures source.  This has 2 interesting folders, DisplayTemplates and EditorTemplates inside a folder called DefaultTemplates.  Whenever you use Html.DisplayFor or Html.EditorFor, these templates are used.   You don’t have to download these templates for editor for or default for to work, the code for these is actually packed inside a resource file inside the mvc assembly.  You also might want to check out the source for these.

Default Templates Folder

I wanted to check to see if there was a template for an EmailAddress.  Interestingly, I found a Display template, but not an Editor template.

Display Templates

The display template for email looks like this:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<a href="mailto:<%= Html.AttributeEncode(Model) %>"><%= Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %></a>

You can see that all it does is add a mailto link.

I started first by creating an EditorTemplates folder inside of our root Views/Shared folder.  Then I created a partial view control named EmailAddress.  I names it email address because editor and display templates are used according to the following rules:

http://scottonwriting.net/sowblog/archive/2011/11/22/using-templates-to-display-boolean-values-as-yes-no-options.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ScottOnWriting+%28Scott+on+Writing%29

Specifically, the Html.DisplayFor and Html.EditorFor methods consult the following metadata in this order:

  1. The UIHint attribute – specifies the name of the template to use.
  2. The DataType attribute
  3. The data type

The data type is set from the DataAnnotations attribute:

        [DataType(DataType.EmailAddress)]

The partial view will be exactly the same as the editor template for a string except that the type will be changed.

Here is the string control:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>

<%= Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line" }) %>

But my email address control is going to do this with razor:

@Html.TextBox("", ViewData.TemplateInfo.FormattedModelValue, new { @class = "text-box single-line", type = "email" }) %>

Here is what validation looks like before I saved this template:

WebCenter 6 Your Profile Validation

Here is what it looks like afterwards.  I have to first change the code from;

                @Html.TextBoxFor(m => m.EmailAddress)

To

                @Html.EditorFor(m => m.EmailAddress)

Now I get this using FireFox.  The RED outline occurs because now I am using an editor template, which puts the correct validation classes:

Shared.css line 3392

.input-validation-error {
    background-color: #FFEEEE;
    border: 1px solid #FF0000;
}

WebCenter 6 Your Profile Validation 2

Interestingly enough, this is still not using HTML 5 validation.  The reason being there is a novalidate attribute on the form:

<form method="post" id="email-form" data-ajax-update="#change-form-email" data-ajax-success="Profile.changeSuccess" data-ajax-mode="replace" data-ajax-method="POST" data-ajax-begin="Modal.Loader.showTop" data-ajax="true" action="/Default/Account/ChangeEmail" style="display: block;" novalidate="novalidate">    <br>
    <div>
        <fieldset>
            <label class="editor-label" for="EmailAddress">New Email Address:</label>
            <div class="editor-field">
                <input type="email" value="" name="EmailAddress" id="EmailAddress" data-val-required="The Email Address field is required." data-val-email="The Email Address field is not a valid e-mail address." data-val="true" class="text-box single-line input-validation-error">
                <span data-valmsg-replace="true" data-valmsg-for="EmailAddress" class="field-validation-error"><span for="EmailAddress" generated="true" class="">The Email Address field is not a valid e-mail address.</span></span>
            </div>

            <div class="form-controls">
                <input type="submit" value="Change Email">
                <input type="button" class="change-cancel" value="Cancel">
            </div>
        </fieldset>
    </div>
</form>

This novalidate attribute is added by jquery.validate line 32:

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

According to w3schools:

novalidate novalidate Specifies that the form should not be validated when submitted

If I remove the novalidate attribute using firebug and then try to submit the form:

WebCenter 6 Your Profile Validation 3

The problem that I want you all to think about or research is:

How do we turn jquery validate on or off conditionally based on whether or not html 5 validation will work?  Modernizr gives you test’s for each individual input type, but how do you turn validation ON programatically when html 5 validation has been disabled using the novalidate attribute.  Try it out.

Furthering this, I then realized that there is a Nuget package that adds all of the HTML 5 editor templates.  It actually uses the exact same code that I came up with.  I’m going to add it to our project and see what happens.

https://github.com/srkirkland/Html5MvcTemplates

Html5MvcTemplates

There are also a ton of open source projects out there for Html 5 and mvc 3.  I wouldn’t be surprised if they are going to be built in to Mvc 4.  There is also the HTML 5 mvc 3 helpers which I’m guessing add this kind of code for non editor templates and display templates, using plain old Html.TextBox like syntax:

http://mvchtml5.codeplex.com/

https://github.com/Gutek/MVC-3-Html5EditorFor