Layout Pages and Shared UI
Learn how layout pages help you build a consistent user interface in ASP.NET Core MVC. Instead of repeating the same header, navigation menu, and footer on every page, you can define them once in a shared layout and reuse them across your application.
Part 1: What a Layout Page Does
A layout page acts like a master template for your ASP.NET Core application. It defines the outer structure of the page, while individual views provide the content that appears inside that structure.
In most MVC applications, the layout contains common interface elements such as the site header, navigation bar, footer, stylesheet links, and script references.
This helps ensure that every page in the application has a consistent design and saves you from repeating the same HTML in multiple files.
Part 2: The Default Layout File
In an ASP.NET Core MVC project, the main layout file is usually stored in:
This file contains the shared page structure for the whole site. When a view is rendered, ASP.NET Core inserts the view content into this layout.
Part 3: Basic Layout Example
A simple layout file may look like this:
<html>
<head>
<title>My ASP.NET Core App</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<main>
@RenderBody()
</main>
<footer>
<p>Copyright 2026</p>
</footer>
</body>
</html>
The most important part is @RenderBody(). This is the placeholder where the content
of the current view will appear.
Part 4: Why Layout Pages Are Useful
Without layout pages, every view would need to repeat the same HTML for the header, navigation menu, footer, and shared scripts. That makes the application harder to maintain.
| Without Layout | With Layout |
|---|---|
| Repeated header and footer code on every page | Shared structure written once |
| Harder to update site-wide design | Easier to update all pages at once |
| More duplication | Cleaner and more maintainable project |
Part 5: How Views Use a Layout
In ASP.NET Core, views usually use a layout automatically through the _ViewStart.cshtml file.
Layout = "_Layout";
}
This tells the framework that each view should be rendered inside the shared layout. As a result, individual views only need to focus on their own content.
Part 6: Shared UI Elements
Layout pages are ideal for user interface elements that should appear throughout the site. Common examples include:
- Site logo or title
- Main navigation menu
- Footer information
- Shared CSS and JavaScript files
- Global alert or notification areas
This creates a consistent experience for users and keeps your project more organized.
Part 7: Optional Sections in Layouts
A layout can also define optional sections that individual views may fill in. One common example is a Scripts section for page-specific JavaScript.
Then inside a specific view:
<script>
console.log("Page-specific script");
</script>
}
This gives you flexibility while still keeping the main layout clean.
Part 8: Best Practices
- Use the layout for shared page structure only
- Keep page-specific content inside individual views
- Use partial views for smaller reusable UI blocks
- Keep the layout simple, clear, and consistent
A well-designed layout improves maintainability and gives your ASP.NET Core project a more professional structure.
Summary
Layout pages are one of the most useful features of ASP.NET Core MVC. They allow you to define a shared structure for your site and avoid repeating common interface code. Once you understand layouts, it becomes much easier to build clean, consistent, and scalable applications.
