Geeks With Blogs

News Google

Nick Harrison Blog<Nick>.Next()

When I first started using MVC, I was very excited about the template view helpers. This was a big deal for me because I had never turned over control of how the HTML was generated. I never used the designers, and dragging and dropping controls on a web page was sacrilegious. Most of the time, I never even bother looking at the design view.

But I loved the benefits for binding and notification. The templates brought a lot to the table. I also love the idea of just specifying that I want an editor for a property without having to go into details of the type of editor. That had always been a stumbling block to generating the markup for a web page. I like the idea of the framework figuring it out based on data type or other metadata on the property.

Now the question becomes,

If I don't write the actual input tags and label tags how can I control how they will look?

I want them all

Styling markup generated by template view helpers is really no different from styling markup that you create by hand. In many ways it is probably even easier because it will be more consistent.

One trick that you often have to do though is explicitly adding a class attribute to the generated markup. Doing this is not always intuitive the first time, but it does make sense after that. The problem is that class means something very special in C# so you can't just say new {class = "className"}, but you can say this:

@Html.EditorFor(x => x.Property, new {@class = "className" })

Beyond that, it is best practice not to specify style settings directly on tags

You may also want to specify the class on a containing element, for example

<span class="fieldEditor">

@Html.EditorFor(m => m.Name)


And then in your css, you may have something like this:

.fieldEditor {

    /* Style settings for the container*/


.fieldEditor label {

/* style settings for the label */


.fieldEditor input {

    /* style settings for the input control */



Posted on Monday, December 17, 2012 4:33 PM Stylish musings | Back to top

Comments on this post: Styling Generated HTML

comments powered by Disqus

Copyright © Nick Harrison | Powered by: