Asp.Net Mvc Layout Pages And Sections Complete Guide

 Last Update:2025-06-23T00:00:00     .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION.    8 mins read      Difficulty-Level: beginner

Understanding the Core Concepts of ASP.NET MVC Layout Pages and Sections

ASP.NET MVC Layout Pages and Sections: A Detailed Explanation

Layout Pages: The Backbone of View Structuring

A layout page in ASP.NET MVC serves as a common template for other views (child views). It allows you to define the shared HTML structure, such as headers, footers, and navigation bars, which can be reused among different views. The primary purpose of layout pages is to create a master page that holds the HTML code that is common to all or most views across the application, thus reducing duplication.

How to Create a Layout Page

Creating a layout page is straightforward in ASP.NET MVC. You start by creating a new view file (typically with the .cshtml extension) in the Views/Shared directory or any specific subdirectory of your choice (though Shared is recommended for global layouts).

<!-- Views/Shared/_Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My MVC App</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Other CSS files -->
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <!-- Navigation Bar Code -->
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My MVC App</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <!-- Other JavaScript files -->
</body>
</html>

The @RenderBody() Method

One of the key elements in a layout page is @RenderBody(). This directive tells the framework where the content from the child views should be inserted when they are rendered.

Multiple Layout Pages

You can create more than one layout page if your application has different sections that require varying layouts. For instance, you might have one layout for the admin dashboard and another for the public-facing pages.

Specifying a Layout Page in a Child View

To use a layout page in a child view, simply specify the layout path using @{ Layout = "~/Views/Shared/_Layout.cshtml"; }.

<!-- Views/Home/Index.cshtml -->
@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Welcome to the Home Page</h2>
<p>This is the home page content.</p>

Sections: Enhancing Layout Flexibility

While layout pages offer a great way to share common layout elements across views, sections provide a mechanism to insert content into specific placeholders defined in the layout page. Sections are particularly useful when you want to include specific scripts or stylesheets on certain pages without affecting others.

Definition and Usage of Sections

Sections are defined in layout pages using the @RenderSection() method. You can make sections optional or mandatory based on your requirement.

<!-- Views/Shared/_Layout.cshtml -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My MVC App</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    @RenderSection("head", required: false)
</head>
<body>
    <!-- Layout Content -->
    @RenderBody()
    <!-- Optional Section for Scripts -->
    @RenderSection("scripts", required: false)
</body>
</html>

In this example, the head and scripts sections are optional because required: false is set.

Adding Content to Sections in Child Views

Child views can add content to sections using the @section directive.

<!-- Views/Home/Index.cshtml -->
@{
    ViewBag.Title = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section head {
    <link href="~/Content/home.css" rel="stylesheet" />
    <style>
        /* Custom CSS */
    </style>
}

<h2>Welcome to the Home Page</h2>
<p>This is the home page content.</p>

@section scripts {
    <script src="~/Scripts/home.script.js"></script>
    <script>
        // Custom JavaScript
    </script>
}

Here, the head section includes additional CSS files and styles specific to the Home page, while the scripts section includes JavaScripts.

Benefits of Using Layout Pages and Sections

  1. Consistency Across Views: Ensures that navigation, headers, and footers appear consistently across all pages.
  2. Reduced Duplication: Eliminates repetitive code, reducing maintenance effort.
  3. Improved Organization: Eases the management of HTML, CSS, and JavaScript files by organizing them within the layout pages and sections.
  4. Enhanced Modularity: Facilitates the creation of modular components that can be easily reused and replaced.
  5. Faster Development: By abstracting common structures and behaviors into layout pages, developers can focus on content-specific logic more efficiently.
  6. Separation of Concerns: Keeps the presentation layer clean and separate from business logic, enhancing readability and maintainability.

Conclusion

Layout pages and sections are crucial in ASP.NET MVC for creating consistent, maintainable, and modular web applications. They allow you to minimize HTML duplication and keep the shared elements centralized, while still providing enough flexibility to customize individual pages through sections. Mastering these features will significantly streamline your development process and result in higher-quality applications.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement ASP.NET MVC Layout Pages and Sections

Step 1: Set Up Your ASP.NET MVC Project

First, you need an ASP.NET MVC project. You can create one using Visual Studio:

  1. Open Visual Studio.
  2. Go to File -> New -> Project.
  3. Select ASP.NET Web Application (.NET Framework).
  4. Enter the name of your project and click OK.
  5. Choose MVC template and click Create.

Step 2: Create a Layout Page

Layout pages allow you to define a common template that can be used across different views in your application.

  1. In Solution Explorer, right-click on the Views folder, and then select Add -> New Folder, and name it Shared.
  2. Right-click on the Shared folder, and select Add -> New Item.
  3. From the list of items, select MVC View Layout Page (Razor).
  4. Name your layout page _Layout.cshtml.
  5. Replace the content of _Layout.cshtml with the following code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My MVC App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <h1>My MVC Application</h1>
        <nav>
            <ul>
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
        </nav>
    </header>

    <main>
        @RenderBody()
    </main>

    <footer>
        <p>&copy; @DateTime.Now.Year - My MVC Application</p>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Step 3: Set the Layout Page as Default for Views

The next step is to specify this layout page as the default layout for all your views. You can do this in the _ViewStart.cshtml file in the Views folder. If it doesn’t exist, create it.

  1. In Solution Explorer, right-click on the Views folder, and select Add -> New Item.
  2. From the list of items, select MVC View Start Page (Razor).
  3. Name your file _ViewStart.cshtml.
  4. Replace its content with the following code:
@{
    Layout = "_Layout.cshtml";
}

Now every view will use this layout by default unless specified otherwise.

Step 4: Create Views to Use the Layout

Let's create some sample views to use our layout.

Home/Index.cshtml

  1. Open the Home folder under Views.
  2. Open Index.cshtml.

Replace its content with:

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>Welcome to My MVC Application!</h1>
    <p>This is a simple MVC application to demonstrate layout pages and sections.</p>
</div>

Home/About.cshtml

  1. In the Home folder under Views, right-click and select Add -> View.
  2. Name the view About.
  3. Leave other settings as default and click Add.

Replace its content with:

@{
    ViewBag.Title = "About Us";
}

<h2>About</h2>
<p>This page provides information about our application.</p>

Home/Contact.cshtml

  1. In the Home folder under Views, right-click and select Add -> View.
  2. Name the view Contact.
  3. Leave other settings as default and click Add.

Replace its content with:

@{
    ViewBag.Title = "Contact Us";
}

<h2>Contact</h2>
<p>Please reach out to us using the form below:</p>

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required /><br />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required /><br />

    <label for="message">Message:</label><br />
    <textarea id="message" name="message" rows="5" cols="33" required></textarea><br />

    <button type="submit">Send Message</button>
</form>

Step 5: Using Sections

Sections are used to define optional parts of your layout. Suppose we want to include additional scripts only for the Contact view.

In the _Layout.cshtml file, we already defined a section named "scripts" that is rendered at the bottom of the <body> tag.

Home/Contact.cshtml (with Section)

Edit the Contact.cshtml file again and add the following at the end of the file:

@section scripts {
    <script>
        $(document).ready(function () {
            alert("Please fill out all fields of the form carefully.");
        });
    </script>
}

This script will only run on the Contact page because it is included in this view-specific section.

Step 6: Run the Application and Test

To check if everything works correctly, press F5 to run your application:

  • When you navigate to /Home/Index, /Home/About, or /Home/Contact, you will see the common header and footer from the _Layout page.
  • On the /Home/Contact page, you should also see the alert message.

Summary

You May Like This Related .NET Topic

📥 Download Code ▶️ Watch Online 📖 Read Description

Login to post a comment.