Does Razor syntax provide a compelling advantage in UI markup?

by

[Disclaimer: I’m one of the Microsoft developers on MVC and Razor, so I might be a bit biased :)]

We designed Razor to be a concise templating language that uses only the minimal necessary amount of control characters. I would say that large parts of your views can be expressed with fewer characters than the same code using the “traditional” WebForms syntax.

For example the following code snippet in ASPX syntax:

<% if(someCondition) { %>
  <ol>
  <% foreach(var item in Model) { %>
     <li><%: item.ToString() %></li>
  <% } %>
  </ol>
<% } %>

Can be expressed as follows in Razor:

@if(someCondition) {
   <ol>
   @foreach(var item in Model) {
      <li>@item.ToString()</li>
   }
   </ol>
}

While the ASPX version has 21 transition characters (the <% and %>), the Razor version has only three (@)

I would say that the advantages of Razor are as follows:

  1. Concise syntax, which is very similar to the way you write regular C# code (check out the following recent blog post by Phil Haack comparing Asxp with Razor syntax: http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx)
  2. Automatic HTML encoding of output (which helps protect you from html injection attacks)
  3. Built in (though not 100%) validation of your markup which helps you avoid unbalanced tags

The page-related concepts also map easily from what you have in ASPX

  • As you can see inline code is still allowed
  • Sections (which can be optional) are equivalent to content placeholders
  • Layout pages instead of Master pages
  • The concepts of full and partial views are the same
  • @functions { ... } blocks instead of <script runat="server"> ... </script>

In addition Razor has a number of useful concepts that I would say are better than what is available in ASPX:

  • @helper functions for really easy creation of functions that emit markup
  • @model keyword for specifying your view’s model type without having to write a <%@ Page ... directive with the full class name

I would like to think that we have tackled a real problem, which is to allow you to more easily write concise and standards-compliant views while at the same time providing you with ways to refactor common code.

Of course, not everyone will prefer the syntax which is why we are also fully supporting the ASPX view engine. In addition you can check out Spark and NHaml, which are two 3rd-party view engines that enjoy significant community following. The following blog post has a good comparison of the different offerings: Link

More Related Contents:

  1. Cascading drop-downs in MVC 3 Razor view
  2. How do I specify different Layouts in the ASP.NET MVC 3 razor ViewStart file?
  3. Replace line break characters with in ASP.NET MVC Razor view
  4. ASP.NET MVC 3 – Partial vs Display Template vs Editor Template
  5. Add CSS or JavaScript files to layout head from views or partial views
  6. Writing/outputting HTML strings unescaped
  7. In MVC3 Razor, how do I get the html of a rendered view inside an action?
  8. Using MVC HtmlHelper extensions from Razor declarative views
  9. How to render a Section in a Partial View in MVC3?
  10. Razor-based view doesn’t see referenced assemblies
  11. HTML.ActionLink vs Url.Action in ASP.NET Razor
  12. Differences between Html.TextboxFor and Html.EditorFor in MVC and Razor
  13. Saving Many to Many relationship data on MVC Create view
  14. ASP.NET MVC 3 Razor – Adding class to EditorFor
  15. Can Razor views be compiled?
  16. How can I load Partial view inside the view?
  17. Is it possible to create a generic @helper method with Razor?
  18. Razor actionlink autogenerating ?length=7 in URL?
  19. Html.Textbox VS Html.TextboxFor
  20. error with decimal in mvc3 – the value is not valid for field
  21. Set disable attribute based on a condition for Html.TextBoxFor
  22. MVC 3 file upload and model binding
  23. Why doesn’t Visual Studio code formatting work properly for Razor markup?
  24. How to create a function in a cshtml template?
  25. Razor ViewEngine HTML.Checkbox method creates a hidden input. Why? [duplicate]
  26. Html.DisplayFor not posting values to controller in ASP.NET MVC 3
  27. How do I create a MVC Razor template for DisplayFor()
  28. Razor Nested WebGrid
  29. How can I pass parameters to a partial view in mvc 4
  30. pass enum to html.radiobuttonfor MVC3

Leave a Comment