HTML5ify your ASP.NET MVC 3 applications

19 Comments

• David Padbury said on Jun 20 2011 at 1:44 PM

  Nice work! Quick suggestion - you'll probably want to order those css properties with vendor prefixes the other way around. Ideally you want the std version "border-radius" below "-webkit-border-radius" so the browser will use the standard behaviour if it's supported. More info: http://css-tricks.com/7361-ordering-css3-properties/.

• Rachel said on Jun 20 2011 at 2:08 PM

  Good catch, David. Thanks.

• Rajneesh Verma said on Jun 22 2011 at 6:38 AM

  Hi, Rachel
  Nice Article......

• Brian said on Jun 22 2011 at 3:34 PM

  Is it possible to edit the default layout created for this. For example this:-
  
  
  <div id="title">
  <h1>My MVC Application</h1>
  </div>
  
  should really simply be:-
  
  <h1>My MVC Application</h1>
  
  Reduntant elements are not to my taste.

• jack said on Jun 22 2011 at 8:49 PM

  you are great! i'm a new Html5er, those new targe looks very sexy !

• Panos said on Jun 23 2011 at 3:40 AM

  MVC3 brings the .Net platform to a whole new level. When working with HTML5, CSS3 and MVC3 it feels like a perfect match. With the additions of cool tools like modernizer and the web standards update, development is done smoothly and fast!

• Rachel said on Jun 23 2011 at 11:32 AM

  Brian,
  
  That should be no problem removing <divs> - but check to make sure the layout will be the same or modify the CSS behind it.
  
  This post was pointing out how <div>'s are currently, frequently, used.

• arefin said on Jun 23 2011 at 12:44 PM

  This is really good article. Thanx for sharing.
  
  -Arefin
  http://earefin.wordpress.com

• Brian said on Jun 23 2011 at 4:08 PM

  Thanks Rachel. My point was that if you wrap only one element in a div then that div is uneccessary and not semantic as you are introducing an element that has no semantic meaning other than to wrap the element.
  
  Wrapping a div around a h1 is the perfect example as you can omit the div and style the h1. The div is completely superfluous. My question about the template generated is simply because it would be nice not to have to edit it every time.
  
  Microsoft have an annoying tendancy to jump on bandwagons and not follow through. Generating a properly semantic template would be fulfilling the stated aim. Just as producing a table with thead/tbody etc. in mvc index views or not wrapping label/input pairings in forms with pointless divs would also be better suited to a more semantic outlook. A bare scaffold should be produced and the developer can add wrapping elements if needed not the other way round imo.
  
  Meh I'm just a commenter with an opinion on the interweb. At the end of the day I'll figure out how to make the generated layout suit me.

• Rachel said on Jun 23 2011 at 8:36 PM

  Brian,
  
  I'll pass your comments along to the team. Yes, going purely semantic would be better as the default template.

• tresorunikin said on Jun 26 2011 at 11:31 AM

  good article to upgrate knowledge... thank you Rachou

• Sheikh Mohammed Rais said on Jun 27 2011 at 2:24 AM

  It is Relay Nice Article.
  It very help full for new in HTML5

• Rick Anderson said on Jun 27 2011 at 3:24 PM

  Thanks Rachel. This will get us all jump started on HTML5

• Matt said on Jun 30 2011 at 12:28 AM

  Worth noting too, that you need to have Modernizr or some other shim library referenced if you're going to be using the new elements available in HTML5.

• William Burgeson said on Jul 2 2011 at 5:01 PM

  I'm just downloading MVC 3 now, looks pretty awesome (as you say over the pond), one thing which concerns me about HTML5 is the lack of support for it in ... Microsoft Internet Explorer < 9. Therefore it wouldn't seem practical to have markup which uses these new tags, for sites which target the greatest number of users :(. Although there are js libraries out there which can convert IE < 9 to support HTML5, ideally a page should render without js.
  Is there a way to customise the razor views to specifically target browsers, in a similar way to how localisation works (home.cshtml, home.IE.cshtml) or something like that?

• Rachel said on Jul 4 2011 at 9:58 AM

  William,
  
  If you target specific browsers the code will be much harder to maintain going forward.
  
  Use modernizr with yep/nope http://yepnopejs.com/
  So yes, using a JS lib is the way to go.
  
  Also, check out the docs/code at silk.codeplex.com. This is a project that demonstrates the use of exactly your scenario, weighing gracefully degrading vs progressive enhancement.

• shawn z said on Aug 2 2011 at 1:15 PM

  Cutting and pasting that does not work in MVC3. To get the extension to work, I had to create a class file:
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace incMvcSite.Classes {
  public static class HtmlPrefixScopeExtensions {
  public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix) {
  return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
  }
  
  private class HtmlFieldPrefixScope : IDisposable {
  private readonly TemplateInfo templateInfo;
  private readonly string previousHtmlFieldPrefix;
  
  public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix) {
  this.templateInfo = templateInfo;
  
  previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
  templateInfo.HtmlFieldPrefix = htmlFieldPrefix;
  }
  
  public void Dispose() {
  templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix;
  }
  }
  }
  }
  In the Razor (.cshtml) file, I added the following:
  @using incMvcSite.Classes
  @using(Html.BeginHtmlFieldPrefixScope("Permission")) {
  
  Permission
  
  // The Html.EditorFor's would go here...
  
  }
  Notice the using to bring me extension class into scope. That allows the second using line to work.
  Now the problem is that when posting back, the object is not updated. In my controller, I used a second parameter to specify my prefix:
  TryUpdateModel(modelUser.Permission, "Permission");
  This added the prefix to all field in the HTML, and the TryUpdateModel loaded the object with prefixed control names. Now you can properly namespace your controls for embedded edit lists, and for partial views of models with the same property names.
  
  Shawn Zernik
  Internetwork Consulting

• Rachel said on Aug 2 2011 at 2:40 PM

  Shawn Z,
  the code here isn't meant to be copied and pasted, as it's just sample code to demonstrate how you can use HTML5 in Visual Studio - and it's nowhere near a complete sample, or I would have a download.
  
  Having said that, you don't need to go through the code that you have to get the basic functionality at work here (considering the same VS & environment)

• Deepak said on Oct 20 2011 at 2:54 AM

  the code here isn't meant to be copied and pasted, as it's just sample code to demonstrate how you can use HTML5 in Visual Studio - and it's nowhere near a complete sample, or I would have a download.