In case you’ve missed my earlier posts, jMVC is a Javascript library that provides a simple but delightfully effective mechanism for client-side interactivity. You can build dynamic UIs where the set of controls changes (lists, hierarchies, grids, drill-downs etc) according to data entered, on the client, using a templating system instead of Javascript event handling or any fiddly AJAX. jMVC uses Model-View-Controller principles to keep things clean and sweet, and so does MonoRail, so it’s a natural fit.

We’ve already integrated jMVC with ASP.NET WebForms, but if you’re lucky enough to be using MonoRail for your web development, you’re going to prefer this version. To clarify: the rest of this post is only relevant for you if you’re using MonoRail. If you’re not, stop reading this and go and learn about MonoRail!

Download / Installation

**Download **jMVC-Monorail-1.0.zip
(You can also get the source code but we’ll assume you’re using the precompiled DLL)

Put the DLL somewhere in your project directory (e.g. in the bin folder) and add a reference to it.

Also, if you don’t yet have a reference to Castle.MonoRail.JSONSupport, add one now.

Put the jMVCplusJson.js javascript file somewhere accessible in your project, for example in the /Content/js/ folder.

Add a reference to the jMVCplusJson.js file either in the view(s) that will use it, or more simply in your default layout.

You’re now ready to go!

Usage

Just like the post on jMVC.NET, we’ll take as our example a variable-sized editable list of tags. Much more complicated controls are possible, but let’s stick to the basics.

At the top of your controller class, specify that you’ll be using the jMVC helper via the [Helper] attribute. (If it doesn’t seem to work, make sure your project has a reference to jMVC.MonoRail)

Also in your controller, put the existing list of tags chosen into the PropertyBag.

In the view, add a jMVCHelper.MVCPanel, referencing this item from the PropertyBag:

Note, we’ve referenced a jMVC template called taglist.jmvc which doesn’t yet exist. Create a text file matching that filename, and write a template following jMVC syntax, such as:

<% if(model.length == 0) { %>
    The list is empty.
<% } %>

<% for(var i = 0; i < model.length; i++) { %>
    <div>
        <input type="text" value="<%= model[i] %>" onchange="<%* function(i) { model[i] = this.value; } %>" />
        <span onclick="<%* function(i) { model.splice(i, 1); } %>">delete</span>
    </div>
<% } %>

<input type="button" value="Add tag" onclick="<%* function() { model.push(""); } %>" />

Now, if you run your application, you should find that the page displays the list of tags, and the user can add, edit and remove items in the list.

Receiving the post data

So, the user can edit the list, but how do you get it back on the server?

Easy – the form contains a hidden input called “tags” (or whatever else you specified) which contains a JSON representation of the client-side data model. jMVC keeps it up-to-date as the user makes changes.

You can therefore bind the result to a parameter on the action that receives the post data, using the [JSONBinder] attribute included in the Castle.Monorail.JSONSupport namespace.

Note – you may need to add a reference to Castle.Monorail.JSONSupport to use this.

Going further

You’re not limited to working with arrays of strings. You can work with arbitrary strongly-typed .NET objects (as long as Castle.Monorail.JSONSupport is able to serialize them to JSON – so most types are OK as long as they don’t reference a huge object graph).

You can learn more about jMVC syntax here, and see more examples on the jMVC.NET pages here.

Troubleshooting

If you get some weird kind of 404-within-a-page error, make sure your web server is configured to serve files with a .jmvc extension. If that’s not possible, rename your .jmvc file to have some other more acceptable extension and change the $jMVCHelper.MVCPanel reference to it.

If you get an error about not being able to find Newtonsoft.Json, Version=1.1.1.0, download the latest build of MonoRail and get the Newtonsoft.Json DLL from there.