Improvements in Razor in ASP.NET MVC 4

August 10, 2012  /  Leave a response

First version of razor is shipped with ASP.NET MVC 3. ASP.NET MVC 4 come with Razor V2.0. Razor V2.0 includes some tiny & happy features.

URL Resolution Enhancements:

We use the relative URL for any resources (images, scripts, css) in code , for example :

<script src="~/Scripts/jquery-1.8.2.js"></script>

But in runtime we should resolve the full path of the resource (absolute URL), to do this in ASP.NET MVC 3 we use Content() method of UrlHelper class.

<script src='@Url.Content("~/Scripts/jquery-1.8.2.js")'></script>

In Razor V2.0 no need to use @Url.Content() method, razor v2.0 now resolves (absolute path/URL) ~/ (tilde-slash) within all standard HTML attributes, razor v2.0 now allows you to just write :

Conditional Attribute Enhancements:

Hers is a classic example for conditional attributes, I have a <div> tag with class attribute. The class name is a dynamic value, It will be resolved at runtime based on some condition in razor code. If the condition is satisfied  class attribute will have some value, else it will be null. When there is a value no issues, but when value is null  we should not apply it for class attribute, to be strict when there is no value for class attribute we should not render it. This scenario involves with writing some ugly code with if condition & <text> tag, in Razor1.0 (ASP.NET MVC 3) code snippet as follows.

@{
    string myClass = null;
    if (@ViewBag.UseRoundCorners)
    {
        myClass = "roundCorners";        
    }
}

<div @{ if(myClass != null) 
        {
           <text> class="@myClass"</text> 
        } 
      }>
</div>

In Razor 2.0 (ASP.NET MVC 4) now we can write:

@{
    string myClass = null;
    if (@ViewBag.UseRoundCorners)
    {
        myClass = "roundCorners";        
    }
}

<div class="@myClass"></div>

Above code returns the same results as earlier, for example if the @ViewBag.UseRoundCorners value is true, then myClass value is roundCorners, then  razor will render :

<div class="roundCorners"></div>

If @ViewBag.UseRoundCorners value is false, then myClass value is null, then razor will render <div> tag with out class attribute:

<div></div>

For example class attribute has multiple values <div class=”@myClass heading”></div>, now razor will render <div class=”roundCorners  heading”></div> if @myClass is not null, if @myClass is null, then razor will simply render <div class=”heading”></div>.

Razor V2.0  can handle Boolean values in conditional attributes:

Not only null values & multiple values, razor can handle boolean values also in conditional attributes.

<input type="checkbox"  checked="@ViewBag.Checked" />

If @ViewBag.Checked value is true then razor will render:

<input type="checkbox"  checked="checked" />

If @ViewBag.Checked value is false then razor will render:

<input type="checkbox"  />