ASP.NET MVC XForms

Jon Curtis has blogged about his XForms for Asp.net MVC

From his blog:

What is it?

MVC XForms is a simple, strongly-typed UI framework for MVC based on the W3C XForms specification. It provides a base set of form controls that allow updating of any complex model object, even complex nested lists. The goals are:

  • 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.

An example of usage:

<%@ Page Language="C#" Inherits="Mvc.XForms.Examples.Customer.Details" MasterPageFile="~/Views/Shared/Site.Master" %>
<asp:Content ContentPlaceHolderID="Content" runat="server">
<% Html.XForm(ViewData.Model.Customer).Form(form => { %>
    <%= form.Input(c => c.Name) %>
    <%= form.Input(c => c.DateOfBirth) %>
    <%= form.Select1(a => a.Country, ViewData.Model.Countries, c => c.ID, c => c.Name) %>
    <%= form.Input(c => c.IsActive).Label("Is Active?") %>
    <%= form.Submit() %>
<% }); %>
</asp:Content>

And it’s corresponding output:

<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=""/>
    </div>
    <div class="xf input date">
        <label for="DateOfBirth">Date Of Birth</label>
        <input id="DateOfBirth" type="text" name="DateOfBirth" value=""/>
    </div>
    <div class="xf select1">
        <select id="Country" name="Country">
            <option value="1" selected="selected">UK</option>
            <option value="2">USA</option>
            <option value="3">France</option>
            <option value="4">Italy</option>
        </select>
    </div>
    <div class="xf input boolean">
        <input id="IsActive" type="checkbox" value="true" name="IsActive"/>
        <input type="hidden" value="false" name="IsActive"/>
        <label for="IsActive">Is Active?</label>
    </div>
    <div class="xf submit">
        <input type="submit"/>
    </div>
</form>

I like this syntax (actually reminds me somewhat of the asp.net mvc grid I like in codeplex)

Jon has created a CodePlex site for the XForms located here.

I’m really going to be watching this project – good work Jon!

Advertisements

One thought on “ASP.NET MVC XForms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s