ASP.Net MVC 4 - Layout and Section in Razor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - Code Express</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" href="@Url.Content("~/Content/Site.css")" />
</head>
<body>
    <header>
        <div class="content-wrapper">
            <div class="float-left">
                <p class="site-title">
                    @Html.ActionLink("Code Express", "Index", "Home")
                </p>
            </div>
            <div class="float-right">
                <nav>
                    <ul id="menu">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>© @DateTime.Now.Year – Code Express</p>
            </div>
        </div>
    </footer>
</body>
</html>

• Url.Content(): The content () method is a method of the UrlHelper class. It converts a virtual (relative) path to an application absolute path. It has one parameter of string type which is a virtual path of the content. It returns an application's absolute path. If the specified content path (parameter of the method) does not start with the tilde (~) character then this method returns the content path unchanged. Url.Content() ensures that all links work no matter if the site is in a virtual directory or in the website root.
• Html.ActionLink(): The easiest way to render an HTML link in is to use the HTML.ActionLink() helper. With MVC, the HTML.ActionLink() does not link to a view. It creates a link to a controller action. ActionLink() is an extension method of the HtmlHelper class. It returns an anchor element (an element) that contains the virtual path of the specified action. When you use an ActionLink() method then you need to pass three string parameters. The parameters are link text (the inner text of the anchor element), actionName (the name of the action), and controllerName (the name of the controller).
• RenderSection(): RenderSection() is a method of the WebPageBase class. Scott wrote at one point that the first parameter to the "RenderSection()" helper method specifies the name of the section we want to render at that location in the layout template. The second parameter is optional and allows us to define whether the section we are rendering is required or not. If a section is "required", then Razor will throw an error at runtime if that section is not implemented within a view template that is based on the layout file (that can make it easier to track down content errors). It returns the HTML content to render.
• RenderBody(): In layout pages, renders the portion of a content page that is not within a named section. It returns the HTML content to render. RenderBody is required since it's what renders each view.

The _ViewStart File

The "_ViewStart" file in the Views folder contains the following content.

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

This code is automatically added to all views displayed by the application. If you remove this file then you must add this line to all views.

Create Controller in MVC Application

You need to create a controller that contains an action method to render the view on the user interface. I will create a HomeController controller with two action methods, one is Index and the other is About. Both action methods execute when the request type is GET and render a view on the browser. So use the following procedure.

Step 1. Right-click on the Controllers folder under Solution Explorer then go to "Add" and click on "Controller".

Step 2. Give the name HomeController for the Controller name input and select "Empty MVC controller" from the Template dropdown list. After that click on "Add".

Now you need to write the following code in the "HomeController.cs" file.

using System.Web.Mvc;

namespace LayoutMvcApplication.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Index()
        {
            return View();
        }
    }
}

Create View in MVC Application

You need to create two views (Index and About) that inherit the "_Layout" view via the "_ViewStart" view so you need to use the following procedure.

Step 1. Right-click on the Index() action method under the "HomeController.cs" file then click on "Add View".

Step 2. Leave the Add New screen unchanged and click on "Add"

Now you should write the following code in your web application index view.

@{
    ViewBag.Title = "Index";
}

@section featured
{
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>@ViewBag.Title.</h1>
            </hgroup>
            <p>
               It is featured section. That is named section in Layout template that defined by RenderSection
            </p>
        </div>
    </section>
}

<p> It is body of Index view that renders in BodyRender.</p>

You can follow the same steps for the About view and create it.

You can get the same design for the About view. You can download the source code from the attachment.

With this code I want to share one more thing, that it is my maiden fifty of articles on C# Corner.