Skip to Content
Support Palestine 🍉  ⬩  Know what's happening →
GecaCS3014 Application Development ToolsLab 03

Lab 03: Study & Create Master Page, User Control in ASP.NET Core MVC

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

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></string
>

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

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.



💡

Some of my latest posts on LinkedIn

Last updated on
Lab 02Lab 04