Opinionated Input Builders for ASP.Net MVC – Part 2 Html Layout for the Label

In part two of this series I will cover the different components of the Input as it is rendered to HTML and explain how each of those are created by the Input Builder.

Given the following form layout I will explain each feature of the input builder framework.

image_thumb2

the Label

inputbuilder-label

The text highlighted in red are labels that come from the Model type. The label is created from the PropertyInfo object that represents the respective properties of the mode.

  1. The label is Property Name.
  2. The label is the Property Name that is split on the pascal case property name.
  3. The label is specified by using the Label Attribute applied to the property.

inputbuilder-label-model

The html for the label is created in a Content control of the Field.Master Master Page. That control is highlighted in red.

inputbuilder-label-masterpage

That explains how the labels are rendered to the html for the builder.  There will be more posts in this series to explain the other conventions followed by the Input Builders.

 

This is part 2 in the series.

Related Articles:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

About Eric Hexter

I am the CTO for QuarterSpot. I (co)Founded MvcContrib, Should, Solution Factory, and Pstrami open source projects. I have co-authored MVC 2 in Action, MVC3 in Action, and MVC 4 in Action. I co-founded online events like mvcConf, aspConf, and Community for MVC. I am also a Microsoft MVP in ASP.Net.
This entry was posted in .Net, Asp.Net, Asp.Net MVC, c#, CoC. Bookmark the permalink. Follow any comments here with the RSS feed for this post.
  • http://shadowcoding.blogspot.com Erik

    Interesting stuff. If I’m following you correctly, there’s one instance of this field.master for each input control?

    Keep it coming – I’m going to be embarking on a very large MVC project soon and I like what I’m seeing here. =)

  • http://www.lostechies.com/members/erichexter/default.aspx erichexter

    @Erik There is one field.master that is master for all of the partials.. It controls the layout for the builders and is used to control the layout for the Inputs.

  • http://shadowcoding.blogspot.com Erik

    Ah, I see – cool. =) Can’t wait to see more!

  • Anders Juul

    Hi Erich,

    You (with the other contributors) are really filly filling out a gap in MVC – much appreciated! Looking forward to getting the source and get started with it!

    Yours,
    Anders, Denmark

  • Kristoffer Ahl

    I really like the simplicity of it. I can actually see the other devs on our team using this as they would not need to know anything about the markup. On the downside though I’m not a fan of putting view-related stuff on my model (even if it’s a viewmodel). The reason why is that I know that the front end people wouldn’t know how to find the model, change whatever is needed, compile and try it out. But I guess that I could go with .UsingPartial(“SomePartial”) instead.

    I think the idea of using templates is a good one as it would be very easy to modify the form markup for all your views but I don’t think it’s very readable and I don’t think I’ll be able to pass it on to a designer to implement their markup in there.

    Another thing I was thinking of is localization. What are your thoughts on that?

  • http://compiledexperience.com Nigel Sampson

    It’s looking very interesting, one thing though, there’s quite a few attibutes in ComponentModel.DataAnnotations that you could use for consistency rather than your own. DisplayName instead of Label, UIHint instead of Partial.

    One great thing for something like that means the annotations can be reused in other places. Such as a DynamicData back end or RIA Services.

    Looking forward to seeing what comes around.

  • sarong

    source code would make it possible to give some feedback

  • http://www.lostechies.com/members/erichexter/default.aspx erichexter

    @Nigel, The attributes I am using here actually are DataAnnotations attributes. the PartialView inherts from the UIHint for example. I just wanted to provide a syntactically clean …ie no training required way of applying the convention. The patial view code does look for a UIHInt rather than a PartialView attribute.

    @sarong I will get the source zipped up and uploaded this morning.

  • http://blogs.rawsoft.nl/remco Remco Ros

    Looks nice,

    looking forward to see some implementation details.

  • Eduardo Miranda

    Hi Eric,

    Cool stuff you are building.

    One question: Do you have a solution for multi-language UIs? Using .NET resources maybe?

  • http://www.lostechies.com/members/erichexter/default.aspx erichexter

    @Eduardo, the builders support my default convention.. but allow you do plugin your own convention.. The next post will show how to change the convention for the partial view selection but the approach is the same for each element. As long as you can define a way to determine how to find your resource key from a PropertyInfo object representing each property than it is a pretty simple convention to implement.

  • Duncan Godwin

    Looking at this I’m now wondering about conventions that can just be applied globally as defaults rather than per property. e.g.
    - Format all dates in this way, with this control and use this validator.
    - Any property called Html or Comment give a multi-line text field.
    - Setup convention validation for all e-mail addresses for properties that contain Email.
    - All fields called Name are required.

    Maybe I’m pushing it a little now :)

  • http://www.lostechies.com/members/erichexter/default.aspx erichexter

    @Duncan,, I think you are totally getting it. If you look at the Part 4 there is a static func that is the extensibility point to each of these properties. That is where you could implement _your_ conventions. I guess I have spent more time explaining how to configure the exceptions rather than explaining the Convention based approach….. Which is actually the most powerful part of this.

  • http://www.byndyu.ru Alexander Byndyu

    Why SimpleModel object can know about self-validation? I think we need SimpleModelValidator and add IHasValidation to impleModel object.

  • http://haacked.com/ Haacked

    Eric, you should Html Encode the Model.Name and Model.Label in your

  • http://www.lostechies.com/members/erichexter/default.aspx erichexter

    @Alexander, the actual validation is a seperate concern which would probably be tied into your model binder. But the portion of this framework in the convention could implement your own convention which could query the model and determine things like required fields. The actual Validation in the UI are helpers around displaying the messages that are stored in the model state the is already part of the MVC framework. This just ties the layout of these together.

    @Haacked, Busted… I will update my example and source.