Layout in Asp.net MVC3 Razor

Home » MVC 3 » Layout in Asp.net MVC3 Razor

Posted by 20Fingers2Brains on Tags: MVC 3

1. Layouts help to maintain consistent look and feel across multiple views within the application.
2. Layouts serve the same purpose as Master pages in Web Forms.
3. Layouts offer simple syntax and flexibility.
4. Layout contains one or more placeholders, for which Views provide content.

Watch Video

Layout :

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
            <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
        </head>

        <body>
            @RenderBody()
        </body>
        </html>

The above code snippet shows the default Layout page, which is created when you create a new project in MVC3. If you see carefully, you can see a @RenderBody() method. This is basically a place holder. @RenderBody() act as a placeholder, its content comes form the view which use this layout. This is a placeholder that marks the location where views using this layout will have their main content rendered. Multiple razor view may now take advantage of this layout to enforce a consistent look and feel.

View :

  @{
        Layout = "../Shared/_Layout.cshtml";
    }


    <!DOCTYPE html>
    <html>
    <head>
        <title>Index</title>
    </head>
    <body>
        <div>
            <h2>This is example for Layout !</h2>
        </div>
    </body>
    </html>

At View level, we assign layout to view using Layout property. Layout property accepts the path of the layout. When you don't want to use layout, you can assign it null.

As we have seen above, layout contains @RenderBody() which is a place holder. Similarly we can create multiple sections in layout which will act as place holders.

Layout :

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
            <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
        </head>

        <body>
        <div>@RenderSection("Header")</div>
        <div>@RenderBody()</div>
        </body>
        </html>

In the above screenshot you can see we have introduced a section named Header. This is basically another place holder. Content for this section will be provided by the view.

If view does not provide content for this section, or does not define this section, then application will through exception. So, to avoid this either the view should define it, or we can use

overload of @RenderSection() which accepts a bool value. This bool value decides whether the section is optional or not. The syntax is shown below.

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <title>@ViewBag.Title</title>
            <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
            <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
            <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
        </head>

        <body>
        <div>@RenderSection("Header",false)</div>
        <div>@RenderBody()</div>
        </body>
        </html>

As shown above the false parameter makes the section optional. So the application will not through error even if the view does not define the section. Lets see how we can define the header section at view level.

View :

  @{
        Layout = "../Shared/_Layout.cshtml";
    }


    <!DOCTYPE html>
    <html>
    <head>
        <title>Index</title>
    </head>
    <body>
        @section Header{
          <div>This is header section</div>
         }
        <div>
            <h2>This is example for Layout !</h2>
        </div>
    </body>
    </html>

In the above view we have rendered the Header section using @section helper and using the same key, we use to define section in layout. By this way we can define as many sections in the layout and can use them accordingly at the view level.

Points To Remember :

1. Layout in MVC3 is same as Master pages in Web Forms.
2. Layouts helps in providing consistent look to the application.
3. Inside Layout we can define as many place holders other than @RenderBody() using @RenderSection().
4. We can also define whether a particular section is optional to render for view or not.