I just wanted to add a few more tips:

Migrating to ASP.NET MVC 4

If you are still using bin deployables (“Add Deployable Assembly”) for your current ASP.NET MVC setup – you should remove it and replace it with the AspNetMvc nuget package.

If you are using MvcContrib or MvcFutures – it’s probably best to update to MvcContrib.Mvc3-ci and Mvc3Futures . Either case you will have to deal with the clash of extension methods (Html.IdFor, Html.NameFor, etc) which were previously in Mvc Futures (Microsoft.Web.Mvc.dll) but now are part of the core ASP.NET MVC assembly. Until updated versions of MvcContrib and MvcFutures come out I have resolved this by removing the  using statement from my View’s Web.config for the MvcFutures extensions methods namespace. This however means that you lose tiny things like Html.SubmitButton, which you can easily replace across the whole solution with html code using a Regex.

Be careful about underwater rocks like this one about the new Date and DateTime editor templates in MVC 4. Also there seem to be model binding changes to do with DateTime – so far that has been the major pain in the ass for me.

Re-targeting for .NET 4.5

The fastest way to convert all projects is by doing a search and replace across all *.csproj files and replace <TargetFrameworkVersion>v4.0</TargetFrameworkVersion>  with <TargetFrameworkVersion>v4.5</TargetFrameworkVersion> (or client profile, etc)

also replace in your Web.config compilation element targetFramework=”4.0″ with 4.5

The real issue are the NuGet packages – some have a .NET 4.5 specific version – a good example is Entity Framework. When the project is targeting version 4.0 of the framework and you install/update EF to version 5 you actually end up with EF 4.4 (which doesn’t have support for enums and so on). The only way to solve this is to remove all packages and install them again, which is a massive pain to do manually and unfortunately the current version of NuGet is not of much help there either, but the daily build is. More details about retargeting the NuGet packages are available in this StackOverflow question.

A few other notes

Things that I have personally tested and work fine: MiniProfiler works fine with an runtime assembly binding redirect for Entity Framework, ELMAH and Ninject work without any changes. Noticed a small regression in unobtrusive validation and checkboxed when pulling a form with AJAX, but I that ended caused by a jQuery Validation problem.

Oh and by the way, don’t forget to update your test assemblies App.config with the correct assembly redirects if you are running tests against ASP.NET MVC controllers, which use MvcFutures or MvcContrib, because you will end up seeing weird “Type A doesn’t match type A” errors.

To be honest I haven’t seen noticeable performance improvements with the MVC 4 + .NET 4.5 + EF5 combo so far, but time will tell.

We’re running a second dev4good event in collaboration with TheGivingLab.org and Givey this year to bring together talented thinkers, designers and coders from around the UK to work on some real-world issues faced by UK charities. The technology theme for the event is Windows 8, but no prior knowledge of Windows 8 app development is required.

Microsoft will present Windows 8 Developer Overview, showing us the technical perspective. Seren will be next up talking about how to design a great experience on Windows 8. (Full details of these sessions will follow shortly.) TheGivingLab.org, will be sharing charity projects, apps and experiences they’d like inspire you with and sharing learnings from their first tech experiment www.seethedifference.org. We may even work on one of your own ideas – if you’ve got one.

Our goals for the weekend are simple. We want to learn how to create Windows 8 apps that could change the way people live their lives – and then we’re going to spend the rest of the time doing it!

ASP.NET MVC 4 introduces two new internal editor templates for properties marked as DataType.Date and DataType.DateTime to render HTML5 input types (date and datetime accordingly).

The unexpected side-effect of this is that if you were previously capturing all DateTime type editing through a DateTime editor template now if your property is marked as DataType.Date ASP.NET MVC 4 will use the new internal Date editor template instead of your DateTime editor template.

The solution is to provide a Date.cshtml editor template along your DateTime.cshtml editor template.

Three charities came to use with the following problems:

Hope and Play were looking for a way to locate and manage resources. And allow other charities or people to do the same.

The Ministry of Stories were looking for a way to get more young people writing stories and publishing these to the world. All while helping to generate a little more cash along the way.

The Design and Craft Council want to be able to automate their awards processes.

We were about 25 people and were able to split in three teams. Here is a video of my team explaining what we are planning to achieve for the Hope and Play project (I am the one speaking first):

Basically we wanted to create a proof of concept system that:

1. Provides a central web portal to aggregate information and also allow charities to communicate what projects they are running, and in which locations.
2. Allows charities to communicate in real-time work and achievements on their projects via the web portal, Twitter or mobile text messages (SMS).
3. Enable charities and individuals to advertise their available and required resources (human power, building material, etc) and its location.
4. Provides a means for charities to discover information on the web relevant to their projects and location.

At the end it looked like this (test data, which probably doesn’t illustrate perfectly the usage):

My team worked great together. We were able to quickly split the work so that everyone has something of interest to do. It was very exciting to see how we are making progress during our scrum stand ups:

At the start of the event we decided that we are going to use Git for source control and GitHub for hosting. Apart from me only one other person had used Git before, but I was happy to help out each of the guys and keep them going during the event. As you can see from the below GitHub commits timeline we were quite effective in working in parallel:

I think 99.9% of us were running Windows and using Bash or Cmd was absolutely not an option for the non-Gitters who had mainly experience with TFS or SVN. Most new Gitters used Tortoise Git, but that was still confusing as it required understanding of how everything works. Only later I learned about SmartGit and in retrospect I think we should have used that instead.

As you’ll hear on the video initially we planned to use Orchard CMS, but after some research and poking around I was personally disappointed to find out how over-complex and over-engineered Orchard is. So we dumped it and went for plain old ASP.NET MVC 3 and non-POCO Entity Framework, which worked out quite well – after all it was just meant to be proof of concept.

All in all I had great fun during the weekend. I also met some great people, who I am looking forward to seeing and work with again in the future – probably during GiveCamp UK in October!

At the end of the weekend it turned out that most people voted for me as the most supportive and helpful developer during the weekend, so I won the grand prize – a Kinect. I wasn’t expecting this at all and very grateful to everyone and very happy that I was able to help people out. Thanks guys!
And here is an end of event photo of team dev4good:
Great job guys!

Also big thanks to our sponsors:

What’s next?

We are in the process of moving and merging the team repositories in a central one in GitHub. I am looking forward to get in touch with some charities to discuss and get feedback for our proof of concept Charity Portal and its eventual real-life practical application.

Next also is GiveCamp UK! I am also tempted to go to Startup Weekend Lonodon, but I’ll see about that.

In Part 2 of this series I began moving some aspects of the collection editing to the client-side with jQuery Templates, but we realized that it’s not good enough, because instead of dealing with data we are juggling with our ASP.NET MVC views generated HTML.

In this final Part 3 of the series I want to move the collection editing completely to the client-side using the Knockout JS library JavaScript library. I will look at:

• Knockout JS data-binding and tempalting
• JSON Form (data really – no form) submission
• jQuery Client-Side Validation

I will re-implement our sample collection editor and it is going to look exactly the same as it did before. Before I begin just a reminder that all of the source code is available on GitHub as a Visual Studio solution.

What is Knockout JS?

I am going to quote its creator (Steven Sanderson) from his introductory post, where he provides a very good overview:

Knockout is a JavaScript library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML, using observers to make your UI automatically stay in sync with an underlying data model. It works particularly well with the MVVM pattern, offering declarative bindings somewhat like Silverlight but without the browser plugin.

I suggest you read the above linked post or checkout the Knockout JS web site to learn more about it, but to quickly summarize how it works:

• A JavaScipt view model is defined that holds all the data. All the data properties are initialized as (or wrapped in) observable values and arrays.
• HTML elements can be data-bound to a property (similar to WinForms/XAML(WPF/Silverlight)) from the view model using the data-bind attribute syntax. We can bind an input’s value, a span’s text, etc. to a view model property.
• Whenever a value/or array changes the data-binding kicks in and the HTML element are automatically updated.
• Knockout uses jQuery and supports templating via jQuery Templates.

Our Sample

To understand this lets jump straight into our sample app.

I have added a third edit option to our sample:

which surprise, surprise looks exactly the same as in the previous iteration. Apart from one extra feature – the favourite movies counter I’ve added to give you a hint of the power of Knockout JS:

View and ViewModel

Let’s firstly look at the first iteration of our view model implementation:

<script type="text/javascript">
var viewModel = {
    Id: ko.observable(@Model.Id),
    Name: ko.observable("@Model.Name"),
    FavouriteMovies: ko.observableArray(@Html.Json(@Model.FavouriteMovies) || []),

    maxMovies: 10,
    
    addMovie: function() {
        viewModel.FavouriteMovies.push(@Html.Json(new Movie()));
    },

    removeMovie: function(movie) {
        ko.utils.arrayRemoveItem(viewModel.FavouriteMovies, movie);
    }
};

$(function () {
    ko.applyBindings(viewModel);
});
</script>

We:

• Serialize our ASP.NET MVC User Model to JSON (Id, Name, FavouriteMovies). Html.Json is a custom Html helper that simply wraps a JSON serializer – you can see it in the source code.
• Wrap its values in Knockout observables and then once the page is loaded we initialize Knockout JS with our model
• Define some add/remove movie methods to edit the FavouriteMovies collection

What’s crucial here is that we are not dealing with nor manipulating HTML markup, which is something that we were doing heavily in the previous parts.

When processed server-side the above view model will look like roughly like this in the browser:

var viewModel = {
        Id: ko.observable(1),
        Name: ko.observable("Ivan Zlatev"),
        FavouriteMovies: ko.observableArray([{"Title":"Movie 1","Rating":5},
                                                           {"Title":"Movie 2","Rating":10},
                                                           {"Title":"Movie 3","Rating":12}] || []),

        maxMovies: 10,

        addMovie: function() {
            viewModel.FavouriteMovies.push({"Title":null,"Rating":0});
        },

        removeMovie: function(movie) {
            ko.utils.arrayRemoveItem(viewModel.FavouriteMovies, movie);
        }
}

Let’s look at the first iteration of our edit view (EditKnockoutJS.cshtml) to better understand how does Knockout help us:

@model CollectionEditing.Models.User
@{ ViewBag.Title = "Edit My Account With Knockout JS"; }

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-1.2.1.debug.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.jQueryUI-sortable.js")" type="text/javascript"></script>

<h2>Edit</h2>

@using (Html.BeginForm("EditKnockoutJS", "User", FormMethod.Post, new { id = "profileEditorForm" })) {
    @Html.ValidationSummary(false)
    <fieldset>
        <legend>My Details</legend>

        <input name="userId" type="hidden" data-bind="value: Id"/>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name" data-bind="value: Name" />
    </fieldset>
    
    <fieldset>
        <legend>My Favourite Movies</legend>

        <ul id="moviesEditor" style="list-style-type: none"
            data-bind="template: { name: 'moviesTemplate', data: FavouriteMovies }, 
                       sortableList: viewModel.FavouriteMovies" >
        </ul>
        <p>You have <span data-bind="text: FavouriteMovies().length"></span> favourite movies.</p>

        <script id="moviesTemplate" type="text/x-jquery-template">
            {{each(i, movie) $data}}
                <li data-bind="sortableItem: movie">
                    <div data-bind="template: { name: 'movieTemplate', data: movie }"></div>
                </li>
            {{/each}}
        </script>

        <script id="movieTemplate" type="text/x-jquery-template">
            <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

            <label>Title:</label>
            <input type="text" data-bind="value: Title"/>

            <label>Rating:</label>
            <input type="text" data-bind="value: Rating"/>

            <a href="#" data-bind="click: function() { viewModel.removeMovie(this); }">Delete</a>
        </script>
    
        <button data-bind="click: addMovie, enable: FavouriteMovies().length < maxMovies">Add another</button>
    </fieldset>

    <p>
        <input type="submit" value="Save" />
        <a href="/">Cancel</a>
    </p>
}

In our view we use Knockout JS to data-bind our HTML input fields to the data in the viewModel (notice the “data-bind” attributes).

For the collection editor:

• Similar to Part 2, we have a movie jQuery template, which defines the HTML fields of a movie, but this time we don’t use any ASP.NET MVC helpers.
• We make the HTML list reorderable via Drag and Drop with the two special sortableList and sortableItem bindings.This is a custom Knockout JS binding I’ve created and hosted on GitHub here. Behind the scenes it magically creates a JQuery UI Sortable keeps our viewModel.FavouriteMovies collection in sync when the widget changes.
• We limit the number of favourite movies a user can add via the “Add Another” button to ten by using a “enabled” binding with a boolean expression. Behind the scenes Knockout JS will manage the state of the button and toggle between enabled/disabled depending on the evaluated value of the expression.
• Finally we data-bind a span element to display the current number of favourite movies the user has added. Again, this is something that Knockout will keep up to date for us.

Right now with this viewModel and that view we have a working drag and drop add/remove favourite movies editor. What we are still missing however is:

• Form submission and server-side handling
• Form validation

Form Submission and Handling

Let’s add some more code to our view model and view to handle form submission.

Firstly we are going to implement a save function in our view model. Because we are no longer using ASP.NET model views, we can’t simply submit the form as is – the “standard” form values based ASP.NET MVC model binding won’t work properly and especially so for the collection editing part.

Thankfully starting from version 3 ASP.NET MVC supports out of the box JSON model binding. It kicks in if the HTTP request Content-Type is set to “application/json”. So instead of using form submission we are going to post our view model data via an AJAX post request to our MVC action, containing the data in JSON serialized form:

 var viewModel = {
       ... snip ...

        saveFailed: ko.observable(false),

        // Returns true if successful
        save: function()
        {
            var saveSuccess = false;
            viewModel.saveFailed(false);

            // Executed synchronously for simplicity
            jQuery.ajax({
                type: "POST",
                url: "@Url.Action("EditKnockoutJS", "User")",
                data: ko.toJSON(viewModel),
                dataType: "json",
                contentType: "application/json",
                success: function(returnedData) {
                    saveSuccess = returnedData.Success || false;
                    viewModel.saveFailed(!saveSuccess);
                },
                async: false
            });

            return saveSuccess;
        }
};

Then we will suppress the default form submission behaviour and replace it with our own:

<p>
    <input type="submit" value="Save" 
             data-bind="click: function() { viewModel.save(); return false; }"/>
    <a href="/">Cancel</a>
</p>
    
<p data-bind="visible: saveFailed" class="error">A problem occurred saving the data.</p>

Note that I have added a new “saveFailed” property in the viewModel which is set by save(). I have also used a “visible” data binding on the value of that property to display the error message paragraph only if the save operation has failed.

Now let’s also look at the MVC action to handle the form submission:

[HttpPost]
public ActionResult EditKnockoutJS(User user)
{
    FormResponseData responseData = new FormResponseData() {
        Success = false
    };

    if (this.ModelState.IsValid) {
        CurrentUser = user;
        responseData.Success = true;
    }

    return Json(responseData);
}

class FormResponseData {
    public bool Success { get; set; }
}

Pretty simple action, which just validates the Model using our validation rules/data annotations and returns a FormReponseData object serialized to JSON, which contains a Success flag expected by the client side.

We can now persist our view model and also use our server-side model validation to prevent the client from doing nasty things:

We are not done just yet. Because we no longer use the ASP.NET html helpers we no longer pull the server-side validation error messages and are currently left with the generic “Something went wrong.” error message. This isn’t exactly nice nor user friendly. We can solve this by the use of client-side JavaScript based validation. Remember that we should never ever rely solely on the client-side (and we don’t in our case).

Client-Side Validation

Unfortunately at the time of writing I couldn’t find anything that validates against the Knockout JS viewModel instead of the HTML markup, so I had to resort to jQuery Validation for the client-side validation. The problem with that is that we need to ensure that we have set proper unique “name” attributes on our form fields and especially so for our collection editor elements.

Fortunately Knockout JS already has a binding for that called the “uniqueName binding”, so all we have to do is add that to our favourite movie collection editor fields like I’ve showed below and don’t worry about generating them ourselves. This is great, because as you saw in Part 2 injecting a unique name during jQuery template evaluation is relatively tricky.

<script id="movieTemplate" type="text/x-jquery-template">
    <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

    <label>Title:</label>
    <input type="text" data-bind="value: Title, uniqueName: true" class="required"/>

    <label>Rating:</label>
    <input type="text" data-bind="value: Rating, uniqueName: true" class="required"/>

    <a href="#" data-bind="click: function() { viewModel.removeMovie(this); }">Delete</a>
</script>

There are multiple ways we can use jQuery Validation and I have decided to go for the simplest declarative one, where we decorate our fields with extra attributes to describe the value constraints that we want to enforce. Let’s update the above fields to make the Title and Rating required:

<label>Title:</label>
<input type="text" data-bind="value: Title, uniqueName: true" class="required"/>

<label>Rating:</label>
<input type="text" data-bind="value: Rating, uniqueName: true" class="required"/>

Finally let’s plug-in jQuery Validation. To do that we will remove the previous submit button handler and use jQuery Validation instead:

... snip... 

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

... snip... 

<script type="text/javascript">
    $(function () {
        ko.applyBindings(viewModel);

        $("#profileEditorForm").validate({
            submitHandler: function(form) {
                if(viewModel.save())
                    window.location.href = "/";

                return false;
            }
        });
    });
</script>

Which gives us nice per-field validation error messages as we type:

Wrapping up

Download all of the source code from GitHub as a Visual Studio solution.

In this part we looked at Knockout JS and how great it is in terms of helping us avoid manipulation of HTML markup among many other things. This is generally something that can get really messy quickly and become hard to maintain and track. We also looked at how it helps us neatly solve our collection editing problem without having to worry about practically anything. In the expense of the sacrifice of our Html helpers and partial views, etc we get a lot of flexibility on the client side to add more interactivity in a neat and clean way.

Final Words

If you have a simple collection editing scenario and you are heavily reliant on your ASP.NET MVC views, partial views, editors and displays the approach documented in Part 1 should be sufficient. And if pulling in new entries/rows via AJAX is not an option (e.g. for speed, performance or any other reasons) you can pull in Part 2. However IMHO the better solution most of the time is to use Knockout JS and what I have described in this part as it opens the doors for more complex client-side interactions in a neat and clean way.

Thank you for reading the series. I will appreciate your feedback in the comments!

It’s available here:

Basic usage is to use a sortableList binding on the ul which you want to make a jQuery Sortable and then a sortableItem binding for each sortable item (li) in the list like that:

<ul data-bind="sortableList: yourObservableArray" > 
    {{each(i, arrayItem) yourObservableArray}} 
        <li data-bind="sortableItem: arrayItem"></li> 
    {{/each}} 
</ul>

Live example (if you are reading this in a feed reader you will need to open the blog post properly to see this):

One way to bring this completely to the client side is by the use of jQuery Template (or any other JavaScript templating engine/library).

A reminder of what our editor looks like before I begin and a second remind that the source code is available on GitHub:

To start with I have added a second link to our sample’s home page titled “Edit with jQuery templates”:

Corresponding controller actions:

public ActionResult EditJQueryTemplate()
{
    return View(CurrentUser);
}

[HttpPost]
public ActionResult EditJQueryTemplate(User user)
{
    if (!this.ModelState.IsValid)
        return View(user);

    CurrentUser = user;
    return RedirectToAction("Display");
}

And a new editor view (EditJQueryTemplate.cshtml) which is exactly the same as the one from Part 1 apart from the core editor bit:

<legend>My Favourite Movies</legend>

@if (Model.FavouriteMovies == null || Model.FavouriteMovies.Count == 0) {
    <p>None.</p>
}
<ul id="moviesEditor" style="list-style-type: none">
    @if (Model.FavouriteMovies != null) {
        foreach (Movie movie in Model.FavouriteMovies) {
            Html.RenderPartial("MovieEntryEditor", movie);
        }
    }
</ul>
<script src="@Url.Content("~/Scripts/jQuery.tmpl.min.js")" type="text/javascript"></script>

<script type="text/x-jquery-tmpl" id="movieTemplate">
    @Html.CollectionItemJQueryTemplate("MovieEntryEditor", new Movie())
</script>

<script type="text/javascript">
    $(function () {
        $("#moviesEditor").sortable();
    });

    var viewModel = {
        addNew: function () {
            $("#moviesEditor").append($("#movieTemplate").tmpl({ index: viewModel._generateGuid() }));
        },

        _generateGuid: function () {
            // Source: http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/105074#105074
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
    };
</script>
            
<a id="addAnother" href="#" onclick="viewModel.addNew();">Add another</a>

Note the new @Html.CollectionItemJQueryTemplate helper, which takes a collection item instance with default values and the unchanged partial view MovieEntryEditor from Part 1:

@model CollectionEditing.Models.Movie
           
<li style="padding-bottom:15px">
    @using (Html.BeginCollectionItem("FavouriteMovies")) {
        <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

        @Html.LabelFor(model => model.Title)
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)

        @Html.LabelFor(model => model.Rating)
        @Html.EditorFor(model => model.Rating)
        @Html.ValidationMessageFor(model => model.Rating)

        <a href="#" onclick="$(this).parent().remove();">Delete</a>
    }
</li>

Basically the helper renders the partial with an ${$index} jQuery template placeholder for which we supply a GUID at run-time on the client-side when we render the template. The output of the helper looks like this:

<script type="text/x-jquery-tmpl" id="movieTemplate">
<li style="padding-bottom:15px">

    <input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="${index}" />

    <img src="/Content/images/draggable-icon.png" style="cursor: move" alt=""/>

    <label>Title</label>
    <input name="FavouriteMovies[${index}].Title" type="text" value="" />

    <label>Rating</label>
    <input name="FavouriteMovies[${index}].Rating" type="text" value="0" />

    <a href="#" onclick="$(this).parent().remove();">Delete</a>
</li>
</script>

Everytime the “Add another” button is pressed this template is rendered using a new GUID index value supplied by the viewModel class.

Here is the code of the @Html.CollectionItemJQueryTemplate helper:

public static MvcHtmlString CollectionItemJQueryTemplate<TModel, TCollectionItem>(this HtmlHelper<TModel> html, 
                                                                                    string partialViewName, 
                                                                                    TCollectionItem modelDefaultValues)
{
    ViewDataDictionary<TCollectionItem> viewData = new ViewDataDictionary<TCollectionItem>(modelDefaultValues);
    viewData.Add(JQueryTemplatingEnabledKey, true);
    return html.Partial(partialViewName, modelDefaultValues, viewData);
}

It renders the supplied partial view, but before that it sets a flag on the ViewContext’s ViewData dictionary to indicate that the view is to be rendered as jQuery collection item template. This is then handled by the @Html.BeginCollectionItem by generating an index template placeholder based .Index hidden field for model binding instead of one with an actual GUID value:

public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html, string collectionName)
{
    string collectionIndexFieldName = String.Format("{0}.Index", collectionName);

    string itemIndex = null;
    if (html.ViewData.ContainsKey(JQueryTemplatingEnabledKey)) {
        itemIndex = "${index}";
    } else {
        itemIndex = GetCollectionItemIndex(collectionIndexFieldName);
    }

    string collectionItemName = String.Format("{0}[{1}]", collectionName, itemIndex);

    TagBuilder indexField = new TagBuilder("input");
    indexField.MergeAttributes(new Dictionary<string, string>() {
        { "name", collectionIndexFieldName },
        { "value", itemIndex },
        { "type", "hidden" },
        { "autocomplete", "off" }
    });
// snip---

That’s it! We are still reusing our ASP.NET views, model binding and validation, but no longer require an AJAX request to fetch a new editor row!.

In Part 3 I will look at Knockout JS templating, data binding and moving variable length reorderable collection editing completely on the client side with the MVVM pattern and using JavaScript form serialization and JSON data submission and model binding.

Next: Part 3 and Knockout JS client-side collection editing, JSON model binding and client-side validation.

I have decided to write a short series of blog posts on editing collections and more specifically variable length collections in ASP.NET MVC. I will take two different implementation approaches:

1. In Part 1 I look at implementing collection editing by sticking to facilities provided to us by ASP.NET MVC such as views, partial views, editor templates, model binding, model validation, etc.
2. In Part 2 I further enhance the sample by using jQuery Templates, but still utilize the same ASP.NET MVC views from Part 1.
3. In Part 3 I will look at Knockout JS templating, data binding and moving variable length reorderable collection editing completely on the client side with the MVVM pattern and JSON data submission and model binding.

The aspects I will consider are:

• Dynamically adding, removing and reordering items to/from the collection
• Validation implications
• Code Reusability and Refactoring implications

I will assume that you are already familiar with ASP.NET MVC and basic JavaScript concepts.

Source Code

All source code is available on GitHub

The Sample

What I am going to build is a little sample where we have a user who has a list of favourite movies. It will look roughly like on the image below and will allow for adding new favourite movies, removing favourite movies and also reordering them up and down using the drag handler.

Domain Model

The domain model is basically:

public class User
{
    public int? Id { get; set; }
    [Required]
    public string Name { get; set; }
    public IList<Movie> FavouriteMovies { get; set; }
}

and

public class Movie
{
    [Required]
    public string Title { get; set; }
    public int Rating { get; set; }
}

Let’s get cracking!

An Edit View

Let’s start by creating a first-pass edit view for our Person to look like the one on the image above:

@model CollectionEditing.Models.User
@{ ViewBag.Title = "Edit My Account"; }

<h2>Edit</h2>

@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>My Details</legend>

        @Html.HiddenFor(model => model.Id)

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
    </fieldset>
    
    <fieldset>
        <legend>My Favourite Movies</legend>

        @if (Model.FavouriteMovies == null || Model.FavouriteMovies.Count == 0) {
            <p>None.</p>
        } else {
            <ul id="movieEditor" style="list-style-type: none">
                @for (int i=0; i < Model.FavouriteMovies.Count; i++) {
                    <li style="padding-bottom:15px">
                        <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

                        @Html.LabelFor(model => model.FavouriteMovies[i].Title)
                        @Html.EditorFor(model => model.FavouriteMovies[i].Title)
                        @Html.ValidationMessageFor(model => model.FavouriteMovies[i].Title)

                        @Html.LabelFor(model => model.FavouriteMovies[i].Rating)
                        @Html.EditorFor(model => model.FavouriteMovies[i].Rating)
                        @Html.ValidationMessageFor(model => model.FavouriteMovies[i].Rating)

                        <a href="#" onclick="$(this).parent().remove();">Delete</a>
                    </li>
                }
            </ul>
            <a href="#">Add another</a>
        }

        <script type="text/javascript">
            $(function () {
                $("#movieEditor").sortable();
            });
        </script>
    </fieldset>
    
    <p>
        <input type="submit" value="Save" />
        <a href="/">Cancel</a>
    </p>
}

The view is creating a list of editing controls for each of the movies in Person.FavouriteMovies. I am using a jQuery selector and dom function to remove a movie when the user clicks “Delete”  and also a jQuery UI Sortable to make the items from the HTML list drag and droppable up and down.

With this done we immediately face the first problem: We haven’t implemented the “Add another”. Before we do that let’s consider how ASP.NET MVC model binding of collections works.

ASP.NET MVC Collection Model Binding Patterns

There are two patterns for model binding collections in ASP.NET MVC. The first one you have just seen:

@for (int i=0; i < Model.FavouriteMovies.Count; i++) {
    @Html.LabelFor(model => model.FavouriteMovies[i].Title)
    @Html.EditorFor(model => model.FavouriteMovies[i].Title)
    @Html.ValidationMessageFor(model => model.FavouriteMovies[i].Title)
…
}

which generates similar HTML:

<label for="FavouriteMovies_0__Title">Title</label>
<input id="FavouriteMovies_0__Title" name="FavouriteMovies[0].Title" type="text" value="" />
<span class="field-validation-error">The Title field is required.</span>

This is really great for displaying collections and editing static length collections, but problematic when we want to edit variable length collections, because:

1. Indices have to be sequential (0, 1, 2, 3, …). If they aren’t ASP.NET MVC stops at the first gap. E.g. if you have item 0, 1, 3, 4 after the model binding has finished you will end up with a collection of two items only – 1 and 2 instead of four items.
2. If you were to reorder the list in the HTML ASP.NET MVC will apply the indices order not the fields order when doing model binding.

This basically means that add/remove/reorder scenarios are no go with this. It’s not impossible but it will be big big mess tracking add/remove/reorder actions and re-indexing all field attributes.

Now, someone might say – “Hey, why don’t you just implement a non-sequential collection model binder?” .

Yes, you can write the code for a non-sequential collection model binder. You will however face two major issues with that however. The first being that the IValueProvider doesn’t expose a way to iterate through all values in the BindingContext which you can workaround by hardcoding the model binder to access the current HttpRequest Form values collection (meaning that if someone decides to submit the form via Json or query parameters your model binder won’t work) or I’ve seen one more insane workaround which checks the BindingContext one by one from CollectionName[0] to CollectionName[Int32.MaxValue] (that’s 2 billion iterations!).

Second major issue is that once you create a sequential collection from the non-sequential indices and items and you have a validation error and you re-render the form view your ModelState will no longer match the data. An item that used to be at index X is now at index X-1 after another item before it was deleted, however the ModelState validation message and state still point to X, because this is what you submitted.

So, even a custom model binder won’t help.

Thankfully there is a second pattern, which mostly helps for what we want to achieve (even though I don’t think it was designed to solve exactly this):

<input type="hidden" name="FavouriteMovies.Index" value="indexA"/>
<input name="FavouriteMovies[indexA].Title" type="text" value="" />
<input name="FavouriteMovies[indexA].Rating" type="text" value="" />
<input type="hidden" name="FavouriteMovies.Index" value="indexB"/>
<input name="FavouriteMovies[indexB].Title" type="text" value="" />
<input name="FavouriteMovies[indexB].Rating" type="text" value="" />

Notice how we have introduced an “.Index” hidden field for each collection item. By doing that we tell ASP.NET MVC’s model binding “Hey, don’t look for a standard numeric collection index, but instead look for the custom Index value we have specified and just get me the list of items in a collection when you are done”. How does this help?

1. We can specify any index value we want
2. The index doesn’t have to be sequential and items will be put in the collection in the order they are in the HTML when submitted.

Bam! That’s solves most, but not all of our problems.

The Solution

Firstly, ASP.NET MVC doesn’t have HTML helpers to generate the “[something].Index” pattern which is major problem since it means we can’t use validation and custom editors. We can fix that by utilizing some ASP.NET templating fu. What we are going to do is move the Movie editor to a its own partial view (MovieEntryEditor.cshtml):

@model CollectionEditing.Models.Movie
           
<li style="padding-bottom:15px">
    @using (Html.BeginCollectionItem("FavouriteMovies")) {
        <img src="@Url.Content("~/Content/images/draggable-icon.png")" style="cursor: move" alt=""/>

        @Html.LabelFor(model => model.Title)
        @Html.EditorFor(model => model.Title)
        @Html.ValidationMessageFor(model => model.Title)

        @Html.LabelFor(model => model.Rating)
        @Html.EditorFor(model => model.Rating)
        @Html.ValidationMessageFor(model => model.Rating)

        <a href="#" onclick="$(this).parent().remove();">Delete</a>
    }
</li>

And update our Edit view to use it:

<ul id="movieEditor" style="list-style-type: none">
    @foreach (Movie movie in Model.FavouriteMovies) {
        Html.RenderPartial("MovieEntryEditor", movie);
    }
</ul>
<p><a id="addAnother" href="#">Add another</a>

Notice two things – firstly the Movie partial edit view uses standard Html helpers and secondly there is a call to something custom called Html.BeginCollectionItem. You might even ask yourself: Wait a second. This won’t work, because the partial view will produce names such as “Title” instead of “FavouriteMovies[xxx].Title”, so let me show you the source code of Html.BeginCollectionItem:

public static IDisposable BeginCollectionItem<TModel>(this HtmlHelper<TModel> html,                                                       string collectionName)
{
    string itemIndex = Guid.NewGuid().ToString();
    string collectionItemName = String.Format("{0}[{1}]", collectionName, itemIndex);

    TagBuilder indexField = new TagBuilder("input");
    indexField.MergeAttributes(new Dictionary<string, string>() {
        { "name", String.Format("{0}.Index", collectionName) },
        { "value", itemIndex },
        { "type", "hidden" },
        { "autocomplete", "off" }
    });

    html.ViewContext.Writer.WriteLine(indexField.ToString(TagRenderMode.SelfClosing));
    return new CollectionItemNamePrefixScope(html.ViewData.TemplateInfo, collectionItemName);
}

private class CollectionItemNamePrefixScope : IDisposable
{
    private readonly TemplateInfo _templateInfo;
    private readonly string _previousPrefix;

    public CollectionItemNamePrefixScope(TemplateInfo templateInfo, string collectionItemName)
    {
        this._templateInfo = templateInfo;

        _previousPrefix = templateInfo.HtmlFieldPrefix;
        templateInfo.HtmlFieldPrefix = collectionItemName;
    }

    public void Dispose()
    {
        _templateInfo.HtmlFieldPrefix = _previousPrefix;
    }
}

This helper does two things:

• Appends a hidden Index field to the output with a random GUID value (remember that using the .Index pattern an index can be any string)
• Scopes the execution of the helper via an IDisposable and sets the template rendering context (html helperes and display/editor templates) to be “FavouriteMovies[GUID].”, so we end up with HTML like this:

<input autocomplete="off" name="FavouriteMovies.Index" type="hidden" value="6d85a95b-1dee-4175-bfae-73fad6a3763b" />
<label>Title</label>
<input class="text-box single-line" name="FavouriteMovies[6d85a95b-1dee-4175-bfae-73fad6a3763b].Title" type="text" value="Movie 1" />
<span class="field-validation-valid"></span>

This solves the problem of using Html field templates and basically reusing ASP.NET facilities instead of having to write html by hand, but it leads me to the second quirk that we need to address.

Let me show you the second and final problem. Disable client side validation and delete the title of e.g. “Movie 2” and click submit. Validation will fail, because Title of a movie is a required field, but while we are shown the edit form again there are no validation messages:

Why is that? It’s the same problem I mentioned earlier in this post. Each time we render the view we assign different names to the fields, which do not match the ones submitted and leads to a ModelState inconsistency. We have to figure out how to persist the name and more specifically the Index across requests. We have two options:

1. Add a hidden CollectionIndex field and CollectionIndex property on the Movie object to persist the FavouriteMovies.Index. This however is intrusive and suboptimal.
2. Instead of polluting the Movie object with an extra property be smart and in our helper Html.BeginCollectionItem reapply/reuse the submitted FavouriteMovies.Index form values.

Let’s replace in Html.BeginCollectionItem this line:

string itemIndex = Guid.New().ToString();

with:

string itemIndex = GetCollectionItemIndex(collectionIndexFieldName);

And here’ is the code for GetCollectionItemIndex:

private static string GetCollectionItemIndex(string collectionIndexFieldName)
{
    Queue<string> previousIndices = (Queue<string>) HttpContext.Current.Items[collectionIndexFieldName];
    if (previousIndices == null) {
        HttpContext.Current.Items[collectionIndexFieldName] = previousIndices = new Queue<string>();

        string previousIndicesValues = HttpContext.Current.Request[collectionIndexFieldName];
        if (!String.IsNullOrWhiteSpace(previousIndicesValues)) {
            foreach (string index in previousIndicesValues.Split(','))
                previousIndices.Enqueue(index);
        }
    }

    return previousIndices.Count > 0 ? previousIndices.Dequeue() : Guid.NewGuid().ToString();
}

We get all submitted values for e.g. “FavouriteMovie.Index” put them in a queue, which we store for the duration of the request. Each time we render a collection item we dequeue its old index value and if none is available we generate a new one. That way we preserve the Index across requests and can have a consistent ModelState and see validation errors and messages:

All that is left is to implement the “Add another” button functionality and we can do that easily by appending a new row to the movie editor, which we can fetch using Ajax and use our existing MovieEntryEditor.cshtml partial view like that:

public ActionResult MovieEntryRow()
{
    return PartialView("MovieEntryEditor");
}

And then add the follwing “Add Another” click handler:

$("#addAnother").click(function () {
    $.get('/User/MovieEntryRow', function (template) {
        $("#movieEditor").append(template);
    });
});

Done.

Conclusion

While not immediately obvious editing variable length reorderable collections with standard ASP.NET MVC is possible and what I like about this approach is that:

• We can keep using traditional ASP.NET html helpers, editor and display templates (Html.EditorFor, etc.) with in our collection editing
• We can make use of the ASP.NET MVC model validation client and server side

What I don’t like that much however is:

• That we have to use an AJAX request to append a new row to the editor.
• That we need to use the name of the collection in the movie editor partial view, but otherwise when doing the standalone AJAX get request the name context won’t be properly set for the partial template fields.

I would love to hear your thoughts. The sample source code is available on my GitHub

Next: Part 2 and how to avoid having an AJAX request with the use of jQuery Templates

Before I begin let me assure you that I haven’t left the .NET church for the Java one and while I really don’t enjoy writing in Java and using Eclipse sometimes a man has to do what a man has to do.

So yeah I spend an afternoon trying to figure out the state of BDD (Behavior Driven Development) tools for Java and it’s pretty poor so far. If you want to write gherkin syntax based behavioral specifications, which are executable inside Eclipse as JUnit tests you are stuck only with JBehave. JBehave however is a monster with poor documentation, not so easily discoverable fluent API and little to none third party documentation content on forums and sites. BTW don’t get fooled like me – insetad of getting the core package you want to get the Web package because the latter has all the .jar dependencies bundled unlike the first one. Enough bashing, lets get down to business.

Let’s say we have the following “Search” story and a more specific scenario – “display an error dialog if I don’t fill in the search form”:

Narrative: I should be able to search

Scenario: I should see an error if I try to search without filling in the search form fields.

When I open 'http://mysite.com'
When I click on the 'Search' button
Then I should see an error

First thing you will notice is that JBehave doesn’t support the “And” keyword so we can’t wring “When I open … AND I click on the Seach button”.

Similar to other gherkin/cucumber based frameworks JBehave allows us to implement each step of the scenario as a method in a class, which optionally takes parameters mapped to words from the scenario. The above one can be stubbed like bellow. Also not that if properly configured you can make JBehave junit runner spit out the stubs for you to copy paste in your code (more about that later):

public class Search
{
	@When("I open '$page'")
	public void whenIOpen(String page)
	{
		// TODO
	}

	@When("I click on the '$buttonText' button")
	public void whenIClickOnTheButton(String buttonText)
	{
		// TODO
	}

	@Then("I should see an error")
	public void thenIShouldSeeAnError(){
		// TODO
	}
}

To implement the browser automation in Java there exist a Java variant of the Ruby watir library (and the .NET Watin library) called … surprise… watiJ. It’s available here. Major pitfall with it though is that it actually embeds the IE COM component and mozilla’s ghecko engine instead launching the real IE/Firefox (like the above mentioned framework do) and it only supports IE6 and I saw some C++ runtime problems with the ghecko engine. Nevertheless to give you a feel of how the above tests can be implemented:

public class Search extends StoryBase {

	@When("I open '$page'")
	public void whenIOpen(String page)
	{
		WebBrowser.open(page).pauseUntilReady();
	}

	@When("I click on the '$buttonText' button")
	public void whenIClickOnTheButton(String buttonText)
	{
		Tag button = WebBrowser.find.button().with.name("search");
		assertNotNull(button);
		button.click().pauseUntilReady();
	}

	@Then("I should see an error")
	public void thenIShouldSeeAnError(){
		Tag errorDialogTitleDiv = WebBrowser.find.span().with.className("dijitDialogTitle");
		assertNotNull(errorDialogTitleDiv);
		assertEquals("Error", errorDialogTitleDiv.get.innerHTML());
	}
}

Now, how about running them? A few things before that:

• JBehave expects you to save stories as .story files in your source code tree
• JBehave expects you to implement and configure problematically a JUnitStory for each story, so that it’s runnable through JUnit.
• It will take your JUnitStory subclass implementation – for example “HelloWorldStory extends JUnitStory” and look for the plain text file hello_world_story.story

To save myself from having to configure each story  I present you my StoryBase base class, which:

• Initializes WatiJ and exposes it to subclasses
• Configures JBehave to look for the .story files in the same directory as the class.
• Configures JBehave/JUnit to look for the steps test methods of a story scenario in the subclass.
• Configures JBehave to print out detailed information in the Console whilst running (such as the method stubs if any are missing)
• Configures JBehave to spit out HTML report in myproject/target/jbehave-report/

Here it is:

public abstract class StoryBase extends JUnitStory {
    protected final static WebSpec WebBrowser = new WebSpec().ie();

    @Override
    public Configuration configuration() {
        return new MostUsefulConfiguration()
            .useStoryLoader(new LoadFromClasspath(this.getClass().getClassLoader()))
    	    .useStoryReporterBuilder(
    	    		new StoryReporterBuilder()
    	    			.withDefaultFormats()
    	    			.withFormats(Format.HTML, Format.CONSOLE)
    	    			.withRelativeDirectory("jbehave-report")
			);
    }

    @Override
    public List candidateSteps() {
        return new InstanceStepsFactory(configuration(), this).createCandidateSteps();
    }
}

Then all that’s left is to make the Search class extend the StoryBase class and it is now runnable in JUnit inside and outside Eclipse.

public class Search extends StoryBase {
}