Tim Scott's Blog

December 12, 2010

MvcContrib.FluentHtml With Razor

Filed under: Uncategorized — Tim Scott @ 7:44 pm

MvcContrib.FluentHtml works with the Razor view engine.  To use it now, you have two choices.  You can build from the trunk, or copy this class into your MVC 3 web app.  Then put the following line in your markup file (with your view’s model as the generic parameter):

@inherits MvcContrib.FluentHtml.ModelWebViewPage<MyApp.WebUI.Models.MyModel>

If you decided to put the ModelWebViewPage class into your app directly, of course, adjust the namespace accordingly.  You should also remove any @model directive because the @inherits directive tells the view what the model is.

You probably also want to add this to the namespaces section of your Views web.config file (not the app level web.config):

<add namespace="MvcContrib.FluentHtml"/>

Use the fluent helpers just like you would in an aspx file, except with Razor syntax of course. For example:

@this.TextBox(x => x.FirstName).Id("firstName").Class("someClass").AutoLabel()



  1. […] 3 web app. Then put the following line in your markup file (with your view’s model as the… [full post] Tim Scott Tim Scott’s Blog uncategorized 0 0 0 0 0 […]

    Pingback by MvcContrib.FluentHtml With Razor — December 12, 2010 @ 8:08 pm

  2. Hi Tim

    Thank you for the tips ! Much appreciated.

    I created the class in my project. However my controls are rendered with encoded html. Do you know why ?

    @this.Select(“regions”).Options(Model.Regions, x => x.Id, x => x.Name)

    All select tags are encoded so my browser renders the html as text.

    Thanks for the help!

    Comment by Jean — December 22, 2010 @ 12:19 pm

  3. Jean, You might not have a recent enough version of MvcContrib.FluentHtml. I had this problem, which I solved by building from the trunk.

    Comment by Tim Scott — December 22, 2010 @ 2:36 pm

  4. Wonderful, and just in time. Like Jean, I also had to download changeset 3ae44c187551 to get non-html-encoded markup.

    Incidentally, I noticed that @this.RenderPartial causes the exception “IViewModelContainer.RenderPartial only supports WebFormViewEngine”. Other fluent element methods work great though (Razor, MVC3 RC2).

    Thanks Tim!

    Comment by Dan Ludwig — December 24, 2010 @ 11:17 am

  5. Thanks Tim 😉

    Comment by Jean — December 29, 2010 @ 2:40 pm

  6. I realize this is an old post, but what about the prefix when dealing with something like editing a variable-length list (see your previous posts)? I can use

    @this.Hidden(x => x[i].Id).Value(idval)

    but the field gets a name attribute of [0].Id or [1].Id with no prefix. The Gifts sample is all written in webforms so the code-behind calls a base constructor… I have no idea what the equivalent of that is in razor. I have an @inherits line on my partial view to take IList but I’m not at all clear on how to get a prefix so that I can have Thing[0].Id.

    I would love an example in Razor, especially a slightly more interesting one where say there is a Person object and he has a collection of gifts, and you want to be able to edit the person or his gifts from the same form.

    Comment by Carl B — July 20, 2011 @ 4:07 pm

  7. Carl,

    ModelWebViewPage has a property HtmlNamePrefix. You should be able to set it something like this in your markup:

    this.HtmlNamePrefix = “modelName”;

    Comment by Tim Scott — July 20, 2011 @ 4:28 pm

  8. OK, that works!

    Comment by Carl B — July 20, 2011 @ 4:30 pm

  9. Where did .Index() go in the MVC 3 version of FluentHtml? The metadata for the DLL doesn’t have a method called Index() anymore. Is it no longer needed? My test with non-consecutive indexes (0, 1, 3) is binding only #0 and #1. Sure I can write Html.Hidden(“@(this.HtmlNamePrefix).Index”,i) (or equivalently write my own htmlhelper) but it seems like maybe there was a bigger picture I’m missing here.

    Comment by Carl B — July 20, 2011 @ 6:44 pm

  10. Hmm, it’s there. It’s just an extension of IViewModelContainer<T>. Does your view inherit from ModelWebViewPage? Your view should have something like:

    @inherits ModelWebViewPage<YourModel>.

    Comment by Tim Scott — July 20, 2011 @ 7:25 pm

  11. Hm, restarting VS and cleaning / rebuild seemed to make intellisense happier, it’s there now. Thanks again.

    Comment by Carl B — July 20, 2011 @ 7:33 pm

  12. I’m starting to use the DatePicker Helper with FluentHtml Gets HTML 5 Support with Razor
    what I’m expecting to see in the web page is when I use this.DatePicker(m=>StartDate) is the control to show with the jquery datepicker automatically there. but instead I’m only getting:

    and no javascript. Its also not allowing me to format the date.

    Am I missing something?
    I want to avoid creating my own extension that puts in the jquery to turn the text box into a date picker. like this http://codesprouts.com/post/Creating-A-DatePicker-Extension-In-ASPNet-MVC.aspx

    Comment by Brian Beatty (@bcbeatty) — November 3, 2011 @ 3:30 pm

  13. Brian,

    DatePicker generates an HTML input element of type ‘date’. This is HTML5. As of now, the ‘date’ input type is supported by Opera and partially by Webkit browsers. These browsers will present a date picker without the need of Javascript. Others will most likely treat it like text input. Therefore you need to use Javascript if you want a nice datepicker. The article that you link to shows how to do that with JQuery.UI. That’s how I have been doing it.

    I use the behaviors feature of FluentHtml to hook up datepickers everywhere in an app. I inject a behavior that adds CSS classes based on the model property. Here is the code for that behavior:

        public class ValidTypeBehavior : ThreadSafeBehavior
            protected override void DoExecute(IMemberElement element) 
                if (element.ForMember == null)
                if (!element.IsTextElement())
                var memberType = element.ForMember.GetPropertyOrFieldType();
                if (memberType.IsNumber())
                    AddClass(element, "number");
                else if (memberType == typeof (DateTime) || memberType == typeof (DateTime?))
                    AddClass(element, "date");

    These classes can be used with a date picker plugin as well any Javascript validation framework.

    Comment by Tim Scott — November 3, 2011 @ 4:00 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: