ASP.NET MVC XForms released on CodePlex

Just noticed there's a new project on CodePlex related to the ASP.NET MVC framework: MVC XForms. MVC XForms is a simple UI framework for ASP.NET MVC based on the W3C XForms specification. It provides a set of form controls that allow updating of complex model objects.

Picked these project goals from Jon Curtis' blog:

• To allow automatic form population, deserialization and validation based on the (arbitrarily complex) model.
• To produce semantic HTML forms using the logic of XForms.
• To output clean, terse HTML.
• No javascript, unless necessary and always optional and unobtrusive.
• To enable clean, terse view code.
• To make the framework as extensible and customisable as possible without compromising simplicity or the above goals.
• Use convention over configuration and a fluent API.

Great story, but how does it work?

I haven't gone into any advanced scenario's, but have instead used a simple case to demonstrate some of the MVC XForms basics. First of all, I've created a Person class with an Id (int), Name (string) and BirthDate (DateTime). This class is used by a specific view in my application, of which the view markup looks like this:

<% Html.XForm(ViewData.Model).Form(form => { %>
  <%=form.Input(p => p.Name).Label("Name") %>
  <%=form.Input(p => p.BirthDate).Label("Birth date") %>
<% }); %>

This is all there is to creating an MVC XForm. Note that I'm creating a XForm based on my model, and that I want an input field for the Name and BirthDate properties, each with a label supplied.

On to rendering: the HTML generated by MVC XForm looks like the following:

<form action="" method="post" class="xf xform">
  <div class="xf input text">
    <label for="Name">Name</label>
    <input id="Name" type="text" name="Name" value="Maarten Balliauw"/>
  </div>
  <div class="xf input date">
    <label for="BirthDate">Birth date</label>
    <input id="BirthDate" type="text" name="BirthDate" value="21-12-1983"/>
  </div>
</form>
<script type="text/javascript">
  $(document).ready(function(){mvc.xforms.init({"id":"","cons":[]})});
</script>

That's actually nice, clean HTML markup! Note the CSS classes that are applied on certain fields. For example, the div element for BirthDate has a CSS class "date", which can be used by, for example, jQuery to enable a date picker on that field.

More information

In the CodePlex download (http://www.codeplex.com/mvcxforms), there is a sample project which makes use of all simple and advanced ideas in MVC XForms. You can also check out Jon Curtis' blog posts on MVC XForms to read some more samples.

This is an imported post. It was imported from my old blog using an automated tool and may contain formatting errors and/or broken images.