CS3014/03. Master Page and Modularity | Application Development Tools

To Study & Create Master Page, User Control in ASP.NET Core MVC

Open Table of contents

Introduction
Environment Setup
File Structure
Steps
Additional Scopes
References

Introduction

Learn how to implement reusable layouts (Master Pages) and component-based UI (User Controls) using _Layout.cshtml and View Components in ASP.NET Core MVC [1].

Environment Setup

VS Code with C# Dev Kit Extension
.NET SDK (Latest Stable Version)
Modern web browser (Chrome/Edge/Firefox)

File Structure

MasterPageLab/  
│── Controllers/  
│   ├── HomeController.cs  
│── Models/  
│── Views/  
│   ├── Shared/  
│   │   ├── _Layout.cshtml  <-- Master Page  
│   │   ├── Components/  
│   │   │   ├── Sidebar/  
│   │   │   │   ├── Default.cshtml  <-- User Control (View Component)  
│── ViewComponents/  
│   ├── SidebarViewComponent.cs  <-- User Control Logic  
│── wwwroot/  
│   ├── css/  
│   │   ├── styles.css  
│── appsettings.json  
│── Program.cs  
│── MasterPageLab.csproj

Steps

1. Create a New Project in VS Code

Open VS Code and terminal (Ctrl + `).

Run:

dotnet new mvc -o MasterPageLab
cd MasterPageLab
code .

2. Implement Master Page (`Views/Shared/_Layout.cshtml`)

Replace the default layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewData["Title"] - MyApp</title>
    <link rel="stylesheet" href="~/css/styles.css" />
</head>
<body>
    <header>
        <h1>My Web Application</h1>
    </header>
    <div class="container">
        <aside>
            @await Component.InvokeAsync("Sidebar") <!-- User Control -->
        </aside>
        <main>
            @RenderBody() <!-- Page Content -->
        </main>
    </div>
    <footer>&copy; 2025 MyApp</footer>
</body>
</html>

3. Apply Master Page to a View (`Views/Home/Index.cshtml`)

@{
    ViewData["Title"] = "Home";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Welcome to My Web Application</h2>
<p>This page uses the master layout.</p>

4. Create a User Control (`ViewComponents/SidebarViewComponent.cs`)

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace MasterPageLab.ViewComponents  
{  
    public class SidebarViewComponent : ViewComponent  
    {  
        public IViewComponentResult Invoke()  
        {  
            var menuItems = new List<string> { "Home", "About", "Contact" };  
            return View(menuItems);  
        }  
    }  
}

5. Create View for User Control (`Views/Shared/Components/Sidebar/Default.cshtml`)

@model List<string>

<ul>
    @foreach (var item in Model)
    {
        <li>@item</li>
    }
</ul>

6. Add Styling (`wwwroot/css/styles.css`)

body { min-height: 100vh; display: flex; flex-direction: column; font-family: Arial, sans-serif; margin: 0; padding: 0; background: #f8f9fa; color: #333; }
header, footer { background: #343a40; color: white; text-align: center; padding: 15px; font-size: 14px; }
header { font-size: 24px; font-weight: bold; }
.container { display: flex; flex-grow: 1; width: 95%; margin: 1% auto; background: white; padding: 1%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
aside { width: 15%; background: #f1f1f1; padding: 1%; border-radius: 5px; }
main { width: 85%; padding: 1%; margin-left: 1%; }
ul { list-style: none; padding: 0; }
li { padding: 8px; border-bottom: 1px solid #ddd; }
li:last-child { border-bottom: none; }

7. Run the Application

Open terminal and run:
```
dotnet run
```
Open http://localhost:5164 to test Master Page and User Control.

Additional Scopes

Add dynamic sidebar links from a database.
Implement multiple layout pages for different sections.
Use partial views for additional reusable UI components.

References

[1] Microsoft Docs: Layouts & View Components in ASP.NET Core.
[2] .NET CLI Guide for MVC Project Setup.