Explore Razor View Engine Part 2
This is continuation of first post about Explore Razor view Engine. In my previous post I have mentioned about basic and some good usage of Razor view engine and it’s Syntax. Let’s look some more about the Razor in this post.
Desciption
This is continuation of Explore Razor view Engine here . In my previous post I have mentioned about basic and some good usage of Razor view engine and it's Syntax. Let's look some more about the Razor in this post. I will recommend to see my first post to get some hands on Razor. Razor Layouts
We will continue to look at the Razor view engine by understanding how to use layouts to handle site-wide content.
Layouts are similar to the Master pages in ASP.net Web forms, where you want to use same design across your application but different contents for each page. So layout is shared among your views in MVC application.
Using layout you are separating the common piece to one place like Menus, Header, footers and so on. Your individual page will more concentrate on the contents for that View (Page).
In MVC 3, Layout is named as _Layout.cstml as shown below. 
You can have your own layout which fits for your web application. The content of the Layout is pretty looks like as shown below.
You can place your CSS & common java script files which you will be using across your web application. Define your own layout (CSS style) and design your application so you will have the same look and feel across your web site. A couple of things to note
1. We are using the Razor syntax to design your layout with the help of @Html helper which we have seen in previous post
2. We are calling the @RenderBody() method within the layout file above to indicate where we want the views based on this layout to "fill in" their core content at that location in the HTML.Using Layout in Views
Let's see we can use the Layout which you have created or using the default layout in your views.
In your view you can just call the _Layout.cstml as shown below
In your Razor block you are mentioning which Layout you want to use for that view. Now your view i.e. Index.cshtml will inherit what you have define in your layout.
So how exactly it works with view? We did not need to wrap our main body content within a tag or element – by default Razor will automatically treat the content of Index.cshtml as the "body" section of the layout page. We can optionally define "named sections" if our layout has multiple replaceable regions. But Razor makes the 90% case (where you only have a body section) super clean and simple.Using _ViewStart
As you notice we are placing the Layout in each page to use the same layout across the application. It is good enough if you want to use same layout for some pages in your application.
Now what if you have quite a good number of views (Web Pages) and you need to include the same code all over the place. To overcome this you can define your layout in a file called _ViewStart as shown in first images. _ViewStart.cshtml file content.
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}Razor HTML Helpers
HTML helpers provide the clean way of encapsulating view code so that you can keep your views simple and focused. There are many built-in HTML helpers in the System.Web.Mvc.HtmlHelper which we have used throughout in this and previous post.
There are numerous times we want to create our own reusable Helper for more productivity.
Let dive into how to create and consume helper for our views. Create and Consume Helper
The Razor view engine provides the option to create helpers using the @helper keyword in view as inline.
Other option is to create helper extension method which you can write class file i.e. .cs which will just returns string.
Let's take an example to truncate the string to specified length.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace EmployeeInfo.Views.Helpers
{
public static class HtmlHelpers
{
public static string Truncate(this HtmlHelpers helper, string input, int length)
{
if (input.Length <= length)
{
return input;
}
else
{
return input.Substring(0, length) + "...";
}
}
}
}
We can use the above helper function in any of the View where you want to truncate the string.
@using EmployeeInfo.Views.Helpers
@{
ViewBag.Title = "Home Page";
}
<h2>@Html.Truncate(ViewBag.Message as string, 8)</h2>
<h3>@Html.Truncate("ASP.net is Awesome and fun",10)</h3>With @helper Keyword
We can create helper inline, let see how
@{
ViewBag.Title = "Home Page";
}
@helper Truncate(string input, int length)
{
if (input.Length <= length) {
@input
} else {
@input.Substring(0, length)
}
}
<h2>@Truncate(ViewBag.Message as string, 8)</h2>