Tim Scott's Blog

August 16, 2011

FluentHtml Gets HTML 5 Support

Filed under: FluentHtml, MS MVC — Tim Scott @ 11:20 pm

We have added HTML5 support to FluentHtml in the MvcContrib project.  Specifically, we added support for most of the new input types, input attributes and the new datalist element.  Now you can do like so:

@this.TextBox(x => x.Countries).List("countriesList").Autofocus()
@this.SearchBox(x => x.Term).Placeholder("Enter search terms").Novalidate(shouldValidate)
@this.DatePicker(x => x.CompletedDate).Required(true).Limit(minDate, maxDate) //min, max
@this.TimePicker(x => x.StartTime).Limit(TimeSpan.FromHours(10), TimeSpan.FromHours(14), 60) //min, max, step
@this.NumberBox(x => x.CompletedDate).Limit(0, 100, 10) //min, max, step
@this.EmailBox(x => x.Email).Multiple(true).Autocomplete(false)

The above is just an example. There’s a lot more too. You know of course that a lot of this stuff is not yet supported by many browsers.  But it’s coming, and we wanted to be ready.  It might be some time before this is in the NuGet distro, but you can build the trunk and try it out now.


  1. This looks really cool – are the MVC-dependencies “deep rooted”? I was wanting to experiment with FluentHtml outside of MVC (ie WebPages & NancyFx).

    Comment by Jonas — November 7, 2011 @ 11:06 am

  2. Jonas, Yeah, it’s pretty deeply rooted. I did a “Find Code Dependent on Module” for System.Web.Mvc with R#. There are 586 usages. In descending order (roughly): ModelState, SelectList, MultiSelectList, IViewDataContainer, HtmlHelper. The first three are used by classes in the MvcContrib.FluentHtml.Elements namespace, which is the core of the library. Sorry, not good news.

    Comment by Tim Scott — November 7, 2011 @ 3:58 pm

  3. It appears that there’s a problem with the DatePicker implementation. When using this helper method, the IMemberElement’s ForMember property is not populated. I’ve implemented several custom Behaviors that rely on ForMember (need the metadata for auto-labeling), so I’m currently unable to use the DatePicker helper…not sure if any others have the same problem as that’s the only HTML5 helper I’ve attempted to use yet. Any chance that will be fixed soon?

    Comment by jhopper28 (@jhopper28) — January 31, 2012 @ 4:44 am

  4. jhopper, Good catch. Fixed on default.

    Comment by Tim Scott — January 31, 2012 @ 11:09 pm

RSS feed for comments on this post. TrackBack URI

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: