Monthly Archives: December 2011

Develop for one, deploy to all – HTML5 and your mobile apps

I had the great pleasure of returning to my native California to attend the DevCon5 conference in Silicon Valley last week.  The primary focus was HTML5.  If you don’t know what HTML5 is, have a look at Wikipedia’s definition.  I’m going to give you a paraphrased definition that Paul Trani of Adobe provided:

HTML5 is not just markup.  HTML5 encompasses the new HTML doctype and associated HTML markup, CSS3 and JavaScript.

The conference was really like most others that I had been to, where it was hit or miss depending on which sessions you chose to go to.  The main takeaway was in the mobile development arena.  What the speakers generally were proposing was that you should develop your mobile applications using HTML5 using device native web views or use a wrapper like PhoneGap.  The benefit here really is develop for one, deploy to all.

It just so happens that on the plane ride back to Minneapolis, the traveler sitting next to me was Marc Grabanski of jQueryUI datepicker fame.  We talked about imperative vs. declarative js and his new company MJG International where he is doing exciting things with video training at Frontend Masters.  I took the opportunity of this chance meeting to share my experiences of the last few days regarding HTML5.

Here are a few points that I garnered:

  • His general feeling was that if you are going to wrap your mobile apps, don’t use PhoneGap… use Titanium.  Titanium provides a much deeper hook into a device’s built-in features.
  • Don’t use Sencha Touch.  Instead, use jQuery.mobile for your phone development.  While Marc seemed to be a jQuery.mobile evangelist, I think he has a good point.  Sencha was built for a desktop application developer in mind, NOT a web developer.
  • If you want to succeed, you must believe through and through in what you are doing. (while this is not developer related, I though it must be shared)  Personally, I would emphasize this point and say “let your passion run wild”.
  • Develop Mobile First.  Or even, Mobile For All.  Marc was showing me how he was using jQuery Mobile to develop an entire web site, basically using it as a templated website that scaled depending on device size.

I was also happy to discuss my recent blog post about jQuery UI unobtrusive with ajax support.  Based on that conversation, I’m probably going to do a re-write based on how Keith Wood’s Clean Calendar was doing the wiring up of the options.

All in all it was a great trip.  What I really want to do now however, is code…

Advertisements

jQuery Inline Editor plugin (source code)

Yesterday I talked about the inline editing paradigm that we are using for WebCenter 6. I have upgraded the plugin to follow the best practices for authoring a jQuery plugin.  The plugin now takes in methods and options.  I have exposed the methods “edit”, “cancel”, and “destroy” to allow for calling the edit and cancel functionality from outside the core function.  My next step will be to call the inline editing from within unobtrusive ajax onsuccess methods which I talked about before.

/*!
 * jQuery Inline Editor
 * Copyright 2011, Andrew Cohen https://omegaluz.wordpress.com
 */

(function ($) {

    var getSettingsElements = function (settings, context) {
        var display = $(settings.display, context);
        var edit = $(settings.edit, context);
        var editlink = $(settings.editlink, context);
        var cancellink = $(settings.cancellink, context);
        return {
            display: display,
            edit: edit,
            editlink: editlink,
            cancellink: cancellink
        };
    }

    /// <param name="$" type="jQuery">jQuery Object</param>
    var methods = {
        init: function (options) {

            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor'), // retrieve the settings that were previously stored
                     events,
                     settings;

                // If the plugin hasn't been initialized yet
                if (!data) {

                    var defaults = {
                        display: '[data-inlineeditor-display]',
                        edit: '[data-inlineeditor-edit]',
                        editlink: '[data-inlineeditor-editlink]',
                        cancellink: '[data-inlineeditor-cancellink]'
                    };

                    settings = $.extend(defaults, options);

                    events = {
                        editClick: function (e) {
                            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
                            e.preventDefault();

                            var $settings = getSettingsElements(settings, $this);
                            $settings.display.add($settings.editlink).hide();
                            $settings.edit.add($settings.cancellink).show();
                        },
                        cancelClick: function (e) {
                            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
                            e.preventDefault();

                            var $settings = getSettingsElements(settings, $this);
                            $settings.edit.add($settings.cancellink).hide();

                            var $form = $this.find('form');
                            $.validator.unobtrusive.parse($form);
                            if ($form.length > 0) {
                                var validator = $form.data('validator'); // get the jQuery.validate validator object for the form
                                if (validator) {
                                    validator.resetForm(); // reset the form using the validator
                                } else {
                                    $form[0].reset(); // reset using the form's built-in reset function
                                }
                            }

                            $settings.display.add($settings.editlink).show();
                        }
                    };
                    data = {
                        settings: settings,
                        events: events
                    };
                    // save the settings in the data
                    $(this).data('inlineeditor', data);

                } else {
                    settings = data.settings;
                    events = data.events;
                }

                // hide both the edit elements and the cancel link
                var $settings = getSettingsElements(settings, $this);
                $settings.edit.add($settings.cancellink).hide();

                // wire up the events
                $this.on('click.inlineeditor', settings.editlink, events.editClick);
                $this.on('click.inlineeditor', settings.cancellink, events.cancelClick);

            });
        },
        destroy: function () {
            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    $this.off('.inlineeditor');
                    $this.removeData('inlineeditor');
                }

            })
        },
        edit: function () {
            return this.each(function () {

                var $this = $(this),
                    data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    var $settings = getSettingsElements(settings, $this);
                    $settings.editlink.trigger('click');
                }

            })
        },
        cancel: function () {
            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    var $settings = getSettingsElements(settings, $this);
                    $settings.cancellink.trigger('click');
                }

            })
        },
        close: function (context) {
            return this.each(function () {

                var $this = $(this),
                    data = $this.data('inlineeditor');
                if (data) {
                    var settings = data.settings;
                    var $settings = getSettingsElements(settings, $this);
                    $settings.edit.add($settings.cancellink).hide();
                    $settings.display.add($settings.editlink).show();
                }
            })
        },
        closeWhenValid: function () {
            return this.each(function () {

                var $this = $(this),
                     data = $this.data('inlineeditor');
                if (data) {
                    var $form = $this.find('form');
                    $.validator.unobtrusive.parse($form);
                    if ($form.length > 0) {
                        if ($form.find('.input-validation-error').length == 0) {
                            methods.close.apply($this, arguments);
                        }
                    }
                }

            })
        }
    };

    $.extend($.fn, {
        inlineeditor: function (method) {
            if (methods[method]) {
                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {
                return methods.init.apply(this, arguments);
            } else {
                $.error('Method ' + method + ' does not exist on jQuery.inlineeditor');
            }
        }
    });

} (window.jQuery));

Inline Editing paradigm using a jQuery Inline Editor plugin

As our WebCenter 6 project is nearing release, we’re constantly trying to make our code more DRY.  The basic premise of this post is this: how do we duplicate the showing and hiding of elements needed for inline form field editing without re-inventing the wheel.

What is this inline editing that I’m speaking of?  Well, consider this content:

Customer details pane from WebCenter 6

Customer details pane from WebCenter 6

Rather than creating a whole new page, to edit the Username and other information, why not just pop an edit link next to the Username and allow editing right there on the page?  This eliminates the need for creating a second page, popup, or what have you.  When the edit link is clicked, the display of the username turns into an editor.  An associated cancel link and Save button would also appear.

username edit link

username edit link

editor, save, and cancel link

editor, save, and cancel link

I can accomplish this pretty easily with some nifty jQuery code using hide, show, toggle, etc., but what I really want to do is write this code once and be able to re-use it for other forms that would use the exact same functionality.

Enter the jQuery plugin.

Our wonderfully talented UX developer, Pete Klein suggested we wire this up with data attributes.  Without delving into the details of writing a jQuery plugin, or really optimizing the code, here it is:

/*!
 * jQuery Inline Editor
 * Copyright 2011, Andrew Cohen https://omegaluz.wordpress.com
 */

(function ($) {
    /// <param name="$" type="jQuery">Description</param>

    $.fn.inlineeditor = function (options) {

        var $this = this;

        var settings = $.extend({
            display: this.find('[data-inlineeditor-display]'),
            edit: this.find('[data-inlineeditor-edit]'),
            editlink: this.find('[data-inlineeditor-editlink]'),
            cancellink: this.find('[data-inlineeditor-cancellink]'),
            form: this.find('form[data-val=true]')
        }, options);

        settings = $.extend(settings, this.data('settings')); // apply the settings that are stored in the data['settings'] object
        this.data('settings', settings); // store the current settings in the settings data object
        this.attr('data-inlineeditor', 'true');
        settings.edit.hide();
        settings.cancellink.hide();

        settings.editlink.on('click', function (e) {
            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
            var target = e.target;
            var $target = $(target);
            var currentTarget = e.currentTarget;
            var $currentTarget = $(currentTarget);

            e.preventDefault();

            settings.display.hide();
            settings.editlink.hide();

            settings.edit.show();
            settings.cancellink.show();
        });
        settings.cancellink.on('click', function (e) {
            /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
            var target = e.target;
            var $target = $(target);
            var currentTarget = e.currentTarget;
            var $currentTarget = $(currentTarget);

            e.preventDefault();

            settings.edit.hide();
            settings.cancellink.hide();

            var $form = $this.find('form');
            if ($form.length > 0) {
                var validator = $form.data('validator');
                if (validator) {
                    validator.resetForm();
                }
            }

            settings.display.show();
            settings.editlink.show();
        });
        /*// is the below code more efficient?
        this.on('click', settings.editlink.selector, function (e) {
        /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
        e.preventDefault();
        settings.display.hide();
        settings.editlink.hide();
        settings.edit.show();
        settings.cancellink.show();
        });
        this.on('click', settings.cancellink.selector, function (e) {
        /// <param name="e" type="jQuery.Event">jQuery Event Object</param>
        e.preventDefault();
        settings.edit.hide();
        settings.cancellink.hide();
        settings.display.show();
        settings.editlink.show();
        });
        */

    };

} (window.jQuery));

Interesting to note, I’m making use of the new jQuery.on function instead of using click, bind, or live.

This code assumes the following:

  • Plugin and all associated functionality are instantiated like so: $(‘#sampleeditor’).inlineeditor();
  • There is an encapsulating element from which all other elements are nested.
  • Within the root there exists ‘[data-inlineeditor-display]’, ‘[data-inlineeditor-editlink]’, ‘[data-inlineeditor-edit]’, ‘[data-inlineeditor-cancellink]’.
  • ‘[data-inlineeditor-display]’ is an element that contains the original text
  • ‘[data-inlineeditor-editlink]’ is a link that when clicked hides the display and shows the editor
  • ‘[data-inlineeditor-edit]’ is a form input that serves to edit the content
  • ‘[data-inlineeditor-cancellink]’ cancels out of the editor, reset’s the form, hides the editor and shows the display again

My mvc 3 razor/html markup looks like so:

        <li><span class='key lfloat'><strong>Username:</strong></span>
            <span class='value lfloat' id="usernameeditor">
                <span data-inlineeditor-display>@Model.User.UserName</span>
                <a data-inlineeditor-editlink href="#">Edit</a>
                <span data-inlineeditor-edit id='usernameEdit'>
                    @{
                        Html.RenderPartial("RenameUserControl", Model.UserRenameViewModel);
                    }
                </span>
                <a data-inlineeditor-cancellink href="#">Cancel</a>
            </span>
            <script type="text/javascript">
                $(function () {
                    $('#usernameeditor').inlineeditor();
                });
            </script>
            <div class='clear'>
            </div>
        </li>

The content of the RenameUserControl:

@model UserRenameViewModel

@using (Ajax.BeginForm("RenameUser",
    "Home",
    null,
    new AjaxOptions
    {
        HttpMethod = "POST",
        UpdateTargetId = "usernameEdit"
    },
    new { id = "renameUserForm" }))
{
        @Html.HiddenFor(model => model.UserID)
        @Html.HiddenFor(model => model.UserName)
        <span class="editor-field">
            @Html.EditorFor(model => model.NewUserName)
            @Html.ValidationMessageFor(model => model.NewUserName)
        </span>

        @Html.ValidationSummary(true)

        <input type="submit" value="Save" />
}

<script type="text/javascript">
    $(function () {
        $.validator.unobtrusive.parse('#renameUserForm');
    });
</script>

Interesting to note, we’re using MVC 3’s built in unobtrusive ajax with data annotations to accomplish the actual form submission.  Again, I didn’t have to write any javascript to wire that up.

I can now re-use this plugin wherever we’re doing inline editing on our site.  I’ll still need to hook into my client side and server side validation when I’m clicking the save button.  I’ll probably wire up an onsuccess event to check whether there are any validation errors and then if not, fire some kind of hide event, rather than the plugin’s cancel code.

** I have updated the source for this. You can find it here.

Unobtrusive jQuery UI with AJAX support

Recently I came across a post by Joe Stagner that talked about the practice of “Unobtrusive JavaScript” in web pages.  Assuming that you understand the separation of concerns therein, I’m going to jump right to a jQuery plug-in authored by Damian Edwards that is available on NuGet, Unobtrusive jQuery UI.

The main idea is this: you can add markup to your html content that wires up jQuery UI without the need to write any additional javascript; just by virtue of including the plug-in script in your html, you can wire up jQuery UI widgets.

Normally, to wire up the following:

jQuery DatePicker

jQuery DatePicker

You would need to write this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.8.16.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#date').datepicker({});
        });
    </script>
</head>
<body>
    <input type="text" name="date" id="date" />
</body>
</html>

The plug-in he wrote is fantastic in that it does the job with a minimal amount of effort.  But, it doesn’t address any content that was added AFTER the page has loaded via AJAX.  This is because his plugin wires everything up in jQuery’s document.ready event.  The other limitation to his code is that it did not correctly parse options for jQuery UI widgets that were camelCased.

So if there was an option like changeMonth, the attribute should be data-ui-datepicker-changeMonth.  However, the browser will render this as data-ui-datepicker-changemonth without the uppercased M.  This poses a problem in that JavaScript is a case-sensitive language and that option will be passed to the jQuery UI widget function like:

    <input type="text" name="date" id="date" data-ui-fn="datepicker" data-ui-changeMonth="true" />

will functionally get evaluated as:

    $('#date').datepicker({
        changemonth: true
    });

When in fact what we need is:

    $('#date').datepicker({
        changeMonth: true
    });

Check out his source:

/*!
 * Unobtrusive jQuery UI 0.1
 * Copyright 2011, Damian Edwards http://damianedwards.com
 * Licensed under Ms-PL
 * http://www.opensource.org/licenses/MS-PL
 */
(function ($) {
	"use strict";

    $(function () {
        var prefix = "data-ui-";

        // Wire-up jQuery UI unobtrusively
        $("*[" + prefix + "fn]").each(function () {
            var el = this,
                $el = $(el);

            // Loop through functions in data-ui-fn attribute
            $.each($el.attr(prefix + "fn").split(" "), function () {
                var fn = this,
                    options = {},
                    optionPrefix = prefix + fn + "-";

                // Build options parameter from data-ui-[fn]-* attributes
                $.each(el.attributes, function () {
                    var attr = this;
                    if (!attr.specified) return true;

                    if (attr.name.indexOf(optionPrefix) === 0) {
                        options[attr.name.substr(optionPrefix.length)] = attr.value;
                    }
                });

                // Call jQuery UI fn if it exists
                ($el[fn] || $.noop).call($el, options);
            });
        });
    });

}(window.jQuery));

Yesterday I proposed an update that would do the following:

  1. Add a method that allowed to parse the an element an all of it’s children in the hierarchy of the DOM
  2. Add a method that parses a specific element in the DOM
  3. Correct the parsing of the options for the jQuery UI widget function.  Fix camel casing.

Here is what I came up.  You should note, that I modeled this after the default jquery.validate.unobtrusive.js code that is in any default MVC project.

/*!
* Unobtrusive jQuery UI 0.1
* Copyright 2011, Damian Edwards http://damianedwards.com
* Licensed under Ms-PL
* http://www.opensource.org/licenses/MS-PL
*/

/*!
* Modified by Andrew Cohen, 11/30/2011
* TempWorks Software, Inc.
*/

(function ($) {
    "use strict";

    var $jQui = $.ui,
        prefix = "data-ui-";

    $jQui.unobtrusive = {
        parse: function (element) {
            // Wire-up jQuery UI unobtrusively
            $("*[" + prefix + "fn]", element).each(function () {
                $jQui.unobtrusive.parseElement(this);
            });
        },
        parseElement: function (el) {
            var $el = $(el),
                el = $el[0];

            // Loop through functions in data-ui-fn attribute
            $.each($el.attr(prefix + "fn").split(" "), function () {
                var fn = this,
                    options = {},
                    optionPrefix = prefix + fn + "-";

                // Build options parameter from data-ui-[fn]-* attributes
                $.each(el.attributes, function () {
                    var attr = this;
                    if (!attr.specified) return true;

                    if (attr.name.indexOf(optionPrefix) === 0) {
                        // camelCase the name
                        var attrName = $.camelCase(attr.name.substr(optionPrefix.length));
                        options[attrName] = attr.value;
                    }
                });

                // get UI fn if it exists
                var uiFn = ($el[fn] || $.noop);
                // call destroy to remove the ui widget
                uiFn.call($el, 'destroy');
                // call fn with options
                uiFn.call($el, options);
            });
        }
    }

    $(function () {
        $jQui.unobtrusive.parse(document);
    });

} (window.jQuery));

It also has 2 new methods:

$.ui.unobtrusive.parse

and

$.ui.unobtrusive.parseElement

The two new methods allow you to re-parse the DOM after content has been added to your page via AJAX.

I have submitted this change to Damian’s GitHub repository.

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

Unobtrusive Validation with MVC 3 and Html.BeginForm

Yesterday a colleague of mine and I were trying to find out why client side unobtrusive validation attributes were being generated everywhere EXCEPT one specific page on our upcoming release of WebCenter 6.  Client side validation attributes in MVC 3 are html 5 data-val-*attributes.   They enable you to tie your validation to Data Annotation attributes on your models without having to write a line of javascript code.  This is sweet in my book because the JavaScript is completely decoupled from the actual C# code.

Here is what they look like:

<input type="text"
    name="UserName"
    data-val-required="The Username field is required."
    data-val="true"
    class="text-box single-line" />
  • data-val turns unobtrusive validation on for the input
  • data-val-required enables the required validation rule to kick in with the specified error message you see above

If you want to go into more detail, check out Brad Wilson’s in depth post about Unobtrusive Client Validation in ASP.NET MVC3.

The specific problem we were both encountering was that these attributes were simply not being output on our view when rendered in the browser.

I peeked into the source of System.Web.Mvc.dll and here is what I discovered.

  1. When you render an input using an HtmlHelper like @Html.EditorFor, @Html.TextBox etc., they are rendered with the InputExtensions.InputHelper method.
  2. InputHelper calls HtmlHelper.GetUnobtrusiveValidationAttributes to render the data-val attributes.
  3. GetUnobtrusiveValidationAttributes calls ViewContext.GetFormContextForClientValidation which checks to see if ClientValidation is enabled in the either your web.config or the scope of the view that you are rendering.
  4. GetFormContextForClientValidation will return the FormContext that was instantiated with @Html.BeginForm OR return null.
  5. If it returns null, no attributes are rendered, thus the need for Html.BeginForm.

So to re-cap.  I discovered the problem was that my colleague had NOT created his form using Html.BeginForm.  Instead, he had manually added a <form> tag, which in turn never created the ViewContext.FormContext object.

If you want to see for yourself, go download the latest MVC 3 sources from the ASP.Net site on CodePlex.

In my opinion, this is totally ridiculous.  And I guess the devs over at Microsoft agree because they are removing this requirement in MVC 4.

Here are Brad’s own words:

Important note: jQuery Validate requires your input elements to be inside of a <form> element in order to be validated. In addition, MVC 3 requires that you have called Html.BeginForm() to render this form, so that it can find its book-keeping object to help render the HTML attributes. Starting with MVC 4, we’ve eliminated the need for Html.BeginForm(), but the requirement for the HTML <form> element is still there.