ASP.NET Core Complete Course: Module 3 – Mastering MVC Architecture for Modern Web Development

 

Welcome to Module 3 of our ASP.NET Core Complete Course: Beginner to Advanced Guide for Modern Web Development. In this module, we dive deep into the Model-View-Controller (MVC) architecture, a cornerstone of building structured and scalable web applications with ASP.NET Core. This comprehensive guide covers what MVC is, the roles of Controllers, Models, and Views, a comparison of Razor Pages vs. MVC, techniques for passing data between Controllers and Views, and the use of Layouts, Partial Views, and View Components.

This blog post is designed to be SEO-friendly, packed with practical examples, detailed explanations, and real-world scenarios to help you master MVC in ASP.NET Core. Whether you're a beginner or an experienced developer, this module will equip you with the skills to build robust web applications. Let’s get started!

---

Table of Contents

1. Introduction to MVC Architecture

2. What is MVC?

   • The MVC Pattern Explained

   • Benefits of MVC in ASP.NET Core

3. Controllers, Models, Views Explained

   • Controllers: Handling Requests

   • Models: Representing Data

   • Views: Rendering the UI

   • Example: Building a Simple MVC Application

4. Razor Pages vs MVC – Choosing the Right Approach

   • What are Razor Pages?

   • MVC vs. Razor Pages: Key Differences

   • When to Use MVC or Razor Pages

   • Example: Comparing MVC and Razor Pages

5. Passing Data Between Controller and View

   • ViewData, ViewBag, and Strongly-Typed Models

   • TempData for Temporary Data

   • Example: Passing Data in an MVC Application

6. Layouts, Partial Views, View Components

   • Layouts: Creating Consistent UI

   • Partial Views: Reusable UI Components

   • View Components: Dynamic Reusable Logic

   • Example: Implementing Layouts, Partial Views, and View Components

7. Best Practices for MVC Development in ASP.NET Core

8. Conclusion

9. FAQs

---

Introduction to MVC Architecture

The Model-View-Controller (MVC) architecture is a design pattern that separates an application into three interconnected components: Model, View, and Controller. This separation of concerns promotes modularity, maintainability, and scalability, making MVC a popular choice for web development frameworks like ASP.NET Core.

In Module 3, we’ll explore the MVC pattern in depth, understand the roles of its components, compare MVC with Razor Pages, and learn how to pass data between Controllers and Views. We’ll also cover advanced UI techniques like Layouts, Partial Views, and View Components to create reusable and dynamic user interfaces.

This blog post is example-driven, with step-by-step guides and real-world scenarios to make complex concepts accessible. By the end, you’ll be confident in building MVC-based applications in ASP.NET Core.

Why is this important?

• MVC: Provides a structured approach to building web applications.

• Controllers, Models, Views: Work together to handle requests, manage data, and render the UI.

• Razor Pages vs. MVC: Choosing the right approach depends on your project’s needs.

• Data Passing: Enables dynamic and interactive web pages.

• Layouts, Partial Views, View Components: Enhance UI consistency and reusability.

Let’s dive into each topic with detailed explanations and practical examples.

---

What is MVC?

The MVC Pattern Explained

The Model-View-Controller (MVC) pattern divides an application into three components:

• Model: Represents the data and business logic. It manages the underlying structure of the application’s data and interacts with databases or services.

• View: Handles the user interface. It displays data from the Model to the user and sends user input to the Controller.

• Controller: Acts as an intermediary between the Model and View. It processes user requests, interacts with the Model, and selects the appropriate View to render.

How MVC Works

1. A user sends an HTTP request (e.g., clicking a link or submitting a form).

2. The Controller receives the request, processes it, and interacts with the Model to fetch or update data.

3. The Controller passes the data to the View, which renders the response (e.g., an HTML page).

4. The response is sent back to the user’s browser.

Benefits of MVC in ASP.NET Core

• Separation of Concerns: Each component (Model, View, Controller) has a distinct role, making the codebase easier to manage and test.

• Scalability: MVC supports large applications by organizing code into modular components.

• Testability: Controllers and Models can be unit-tested independently of the View.

• Flexibility: Views can be swapped or modified without affecting the Model or Controller.

• Reusability: Models and Controllers can be reused across multiple Views.

---

Controllers, Models, Views Explained

Let’s break down the roles of Controllers, Models, and Views in an ASP.NET Core MVC application.

Controllers: Handling Requests

Controllers are classes that handle HTTP requests and orchestrate the flow of data between Models and Views. Each public method in a Controller is an action that corresponds to a specific URL or route.

Key Responsibilities

• Process incoming HTTP requests (e.g., GET, POST).

• Interact with Models to retrieve or update data.

• Select the appropriate View to render the response.

• Return results like ViewResult, JsonResult, or RedirectResult.

Example Controller

using Microsoft.AspNetCore.Mvc;

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

        public IActionResult About()
        {
            ViewData["Message"] = "Welcome to our MVC Application!";
            return View();
        }
    }
}

Models: Representing Data

Models represent the data and business logic of the application. They encapsulate the data structures and operations needed to interact with databases, APIs, or services.

Types of Models

• Domain Models: Represent entities (e.g., Product, User).

• View Models: Tailored for Views, containing only the data needed for rendering.

• DTOs (Data Transfer Objects): Used to transfer data between layers.

Example Model

namespace MyMvcApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Views: Rendering the UI

Views are responsible for rendering the user interface, typically using Razor, a markup syntax that combines HTML with C# code. Views are stored as .cshtml files and are dynamically generated based on data provided by the Controller.

Key Features of Razor Views

• Razor Syntax: Combines HTML and C# (e.g., @Model.Property).

• Layouts: Provide a consistent look and feel across pages.

• Partial Views: Reusable UI components.

• View Components: Dynamic, reusable logic for complex UI elements.

Example View (Views/Home/Index.cshtml)

<h1>Welcome to My MVC App</h1>
<p>This is the home page.</p>

Example: Building a Simple MVC Application

Let’s create a simple MVC application to manage a list of products.

Step 1: Create a New MVC ProjectRun the following command to create a new ASP.NET Core MVC project:

dotnet new mvc -o MyMvcApp
cd MyMvcApp

Step 2: Create a ModelCreate a Models/Product.cs file:

namespace MyMvcApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Step 3: Create a ControllerUpdate Controllers/HomeController.cs:

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

namespace MyMvcApp.Controllers
{
    public class HomeController : Controller
    {
        private readonly List<Product> _products = new()
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99m },
            new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
        };

        public IActionResult Index()
        {
            return View(_products);
        }
    }
}

Step 4: Create a ViewUpdate Views/Home/Index.cshtml:

@model List<MyMvcApp.Models.Product>

<h1>Product List</h1>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>

Step 5: Run the ApplicationRun the application with:

dotnet run

Navigate to https://localhost:5001 to see the list of products.

Output:

Product List
- Laptop - $999.99
- Smartphone - $499.99

This example demonstrates how Controllers, Models, and Views work together to create a simple MVC application.

---

Razor Pages vs MVC – Choosing the Right Approach

ASP.NET Core offers two primary approaches for building web applications: MVC and Razor Pages. While both use the Razor syntax, they differ in structure and use cases.

What are Razor Pages?

Razor Pages is a page-based programming model introduced in ASP.NET Core 2.0. It combines the Controller and View logic into a single .cshtml file, making it simpler for page-focused scenarios.

Key Features of Razor Pages

• Each page is a .cshtml file with an associated PageModel (code-behind).

• Routing is file-based (e.g., Pages/Index.cshtml maps to /).

• Ideal for simple applications or page-centric workflows.

Example Razor Page (Pages/Index.cshtml)

@page
@model IndexModel

<h1>Welcome to Razor Pages</h1>
<p>@Model.Message</p>

using Microsoft.AspNetCore.Mvc.RazorPages;

public class IndexModel : PageModel
{
    public string Message { get; set; }

    public void OnGet()
    {
        Message = "Hello from Razor Pages!";
    }
}

MVC vs. Razor Pages: Key Differences

Feature	MVC	Razor Pages
Structure	Separates Controllers, Models, Views	Combines logic and UI in .cshtml files
Routing	Controller/action-based routing	File-based routing
Complexity	Suited for complex applications	Simpler for page-focused apps
Code Organization	More structured, modular	Less ceremony, page-centric
Use Case	APIs, large-scale apps	Simple websites, forms

When to Use MVC or Razor Pages

• Use MVC:

  • For large, complex applications with multiple controllers and reusable components.

  • When building RESTful APIs alongside web pages.

  • For applications requiring fine-grained control over routing and logic.

• Use Razor Pages:

  • For simple, page-focused applications (e.g., forms, dashboards).

  • When rapid development with minimal setup is needed.

  • For developers new to ASP.NET Core, as it has less overhead.

Example: Comparing MVC and Razor Pages

Let’s implement the same product list functionality in both MVC and Razor Pages.

MVC Implementation

(From the previous example)

Controller: Controllers/HomeController.cs

public IActionResult Index()
{
    var products = new List<Product>
    {
        new Product { Id = 1, Name = "Laptop", Price = 999.99m },
        new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
    };
    return View(products);
}

View: Views/Home/Index.cshtml

@model List<MyMvcApp.Models.Product>

<h1>Product List (MVC)</h1>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>

Razor Pages Implementation

Step 1: Create a Razor Pages Project

dotnet new razor -o MyRazorApp
cd MyRazorApp

Step 2: Create a ModelCreate Models/Product.cs (same as the MVC example).

Step 3: Update the PageUpdate Pages/Index.cshtml:

@page
@model IndexModel

<h1>Product List (Razor Pages)</h1>
<ul>
    @foreach (var product in Model.Products)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>

Update Pages/Index.cshtml.cs:

using Microsoft.AspNetCore.Mvc.RazorPages;
using MyRazorApp.Models;
using System.Collections.Generic;

namespace MyRazorApp.Pages
{
    public class IndexModel : PageModel
    {
        public List<Product> Products { get; set; }

        public void OnGet()
        {
            Products = new List<Product>
            {
                new Product { Id = 1, Name = "Laptop", Price = 999.99m },
                new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
            };
        }
    }
}

Step 4: Run the ApplicationRun the Razor Pages application with dotnet run and navigate to https://localhost:5001. The output will be similar to the MVC version.

Key Observations:

• MVC: Separates logic (Controller) and UI (View), making it more modular but requiring more files.

• Razor Pages: Combines logic and UI in one file, reducing overhead but potentially less modular for large apps.

---

Passing Data Between Controller and View

In MVC, Controllers pass data to Views to render dynamic content. ASP.NET Core provides several mechanisms for passing data: ViewData, ViewBag, strongly-typed Models, and TempData.

ViewData, ViewBag, and Strongly-Typed Models

• ViewData: A dictionary that stores key-value pairs, accessible in Views.

• ViewBag: A dynamic wrapper around ViewData, allowing property-style access.

• Strongly-Typed Models: The preferred approach, using a Model class to pass data with type safety.

Example: Using ViewData, ViewBag, and Models

Update Controllers/HomeController.cs:

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

namespace MyMvcApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            // Using ViewData
            ViewData["Title"] = "Product List";

            // Using ViewBag
            ViewBag.Message = "Welcome to our store!";

            // Using strongly-typed Model
            var products = new List<Product>
            {
                new Product { Id = 1, Name = "Laptop", Price = 999.99m },
                new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
            };

            return View(products);
        }
    }
}

Update Views/Home/Index.cshtml:

@model List<MyMvcApp.Models.Product>

<h1>@ViewData["Title"]</h1>
<p>@ViewBag.Message</p>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>

Output:

Product List
Welcome to our store!
- Laptop - $999.99
- Smartphone - $499.99

TempData for Temporary Data

TempData is used to pass data between requests (e.g., during redirects). It’s stored in session state and removed after being read.

Example: Using TempData

Update Controllers/HomeController.cs:

public IActionResult AddProduct()
{
    TempData["Message"] = "Product added successfully!";
    return RedirectToAction("Index");
}

public IActionResult Index()
{
    ViewData["Title"] = "Product List";
    ViewBag.Message = TempData["Message"] ?? "Welcome to our store!";
    var products = new List<Product>
    {
        new Product { Id = 1, Name = "Laptop", Price = 999.99m },
        new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
    };
    return View(products);
}

Update Views/Home/Index.cshtml:

@model List<MyMvcApp.Models.Product>

<h1>@ViewData["Title"]</h1>
<p>@ViewBag.Message</p>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>
<a asp-action="AddProduct">Add Product</a>

Navigate to /Home/AddProduct, and you’ll be redirected to the Index page with the message “Product added successfully!” displayed.

Example: Passing Data in an MVC Application

Let’s build a more complex example with a form to add products.

Step 1: Create a ViewModelCreate Models/ProductViewModel.cs:

using System.ComponentModel.DataAnnotations;

namespace MyMvcApp.Models
{
    public class ProductViewModel
    {
        [Required]
        public string Name { get; set; }

        [Required]
        [Range(0.01, double.MaxValue, ErrorMessage = "Price must be greater than 0.")]
        public decimal Price { get; set; }
    }
}

Step 2: Update the ControllerAdd actions to Controllers/HomeController.cs:

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

namespace MyMvcApp.Controllers
{
    public class HomeController : Controller
    {
        private static readonly List<Product> _products = new()
        {
            new Product { Id = 1, Name = "Laptop", Price = 999.99m },
            new Product { Id = 2, Name = "Smartphone", Price = 499.99m }
        };

        public IActionResult Index()
        {
            return View(_products);
        }

        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        public IActionResult Create(ProductViewModel model)
        {
            if (ModelState.IsValid)
            {
                _products.Add(new Product
                {
                    Id = _products.Count + 1,
                    Name = model.Name,
                    Price = model.Price
                });
                TempData["Message"] = "Product added successfully!";
                return RedirectToAction("Index");
            }
            return View(model);
        }
    }
}

Step 3: Create the Create ViewCreate Views/Home/Create.cshtml:

@model MyMvcApp.Models.ProductViewModel

<h1>Add New Product</h1>

<form asp-action="Create" method="post">
    <div class="form-group">
        <label asp-for="Name"></label>
        <input asp-for="Name" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Price"></label>
        <input asp-for="Price" class="form-control" />
        <span asp-validation-for="Price" class="text-danger"></span>
    </div>
    <button type="submit" class="btn btn-primary">Add Product</button>
</form>

@section Scripts {
    <script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
    <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
}

Step 4: Update the Index ViewUpdate Views/Home/Index.cshtml to include a link to the Create page:

@model List<MyMvcApp.Models.Product>

<h1>Product List</h1>
<p>@TempData["Message"]</p>
<ul>
    @foreach (var product in Model)
    {
        <li>@product.Name - $@product.Price</li>
    }
</ul>
<a asp-action="Create" class="btn btn-success">Add New Product</a>

Step 5: Run the ApplicationRun the application and navigate to /Home/Create to add a new product. After submitting the form, you’ll be redirected to the Index page with the updated product list.

This example demonstrates passing data using strongly-typed Models, ViewData, and TempData, along with form handling and validation.

---

Layouts, Partial Views, View Components

To create consistent and reusable UI in ASP.NET Core MVC, you can use Layouts, Partial Views, and View Components.

Layouts: Creating Consistent UI

Layouts define the common structure of your web pages, such as headers, footers, and navigation menus. The default layout is _Layout.cshtml in the Views/Shared folder.

Example Layout (Views/Shared/_Layout.cshtml)

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"] - My MVC App</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="/">My MVC App</a>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Home" asp-action="Create">Add Product</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <div class="container">
        @RenderBody()
    </div>
    <footer class="text-center mt-4">
        <p>&copy; 2025 My MVC App</p>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    @RenderSection("Scripts", required: false)
</body>
</html>

Explanation:

• @RenderBody(): Renders the content of the specific View.

• @RenderSection("Scripts", required: false): Allows Views to inject scripts.

Partial Views: Reusable UI Components

Partial Views are reusable fragments of a View that can be included in multiple pages. They are ideal for rendering repeated UI elements, like a product card.

Example: Creating a Partial View

Create Views/Shared/_ProductCard.cshtml:

@model MyMvcApp.Models.Product

<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title">@Model.Name</h5>
        <p class="card-text">Price: $@Model.Price</p>
    </div>
</div>

Update Views/Home/Index.cshtml to use the Partial View:

@model List<MyMvcApp.Models.Product>

<h1>Product List</h1>
<p>@TempData["Message"]</p>
<div class="row">
    @foreach (var product in Model)
    {
        <div class="col-md-4">
            <partial name="_ProductCard" model="product" />
        </div>
    }
</div>
<a asp-action="Create" class="btn btn-success">Add New Product</a>

View Components: Dynamic Reusable Logic

View Components are similar to Partial Views but include logic, making them ideal for dynamic UI elements like menus or widgets.

Example: Creating a View Component

Create a folder named ViewComponents and add FeaturedProductViewComponent.cs:

using Microsoft.AspNetCore.Mvc;
using MyMvcApp.Models;
using System.Threading.Tasks;

namespace MyMvcApp.ViewComponents
{
    public class FeaturedProductViewComponent : ViewComponent
    {
        public async Task<IViewComponentResult> InvokeAsync()
        {
            var product = new Product
            {
                Id = 1,
                Name = "Featured Laptop",
                Price = 999.99m
            };
            return View(product);
        }
    }
}

Create Views/Shared/Components/FeaturedProduct/Default.cshtml:

@model MyMvcApp.Models.Product

<div class="alert alert-info">
    <h4>Featured Product</h4>
    <p>@Model.Name - $@Model.Price</p>
</div>

Update Views/Home/Index.cshtml to include the View Component:

@model List<MyMvcApp.Models.Product>

<h1>Product List</h1>
<p>@TempData["Message"]</p>
<vc:featured-product></vc:featured-product>
<div class="row">
    @foreach (var product in Model)
    {
        <div class="col-md-4">
            <partial name="_ProductCard" model="product" />
        </div>
    }
</div>
<a asp-action="Create" class="btn btn-success">Add New Product</a>

Step: Run the ApplicationRun the application to see the layout, partial views, and view component in action. The page will display a navigation bar, a featured product, and a grid of product cards.

---

Best Practices for MVC Development in ASP.NET Core

• Use Strongly-Typed Models: Prefer strongly-typed Models over ViewData/ViewBag for type safety.

• Keep Controllers Thin: Move business logic to services or repositories.

• Leverage Layouts: Use layouts for consistent UI across pages.

• Use Partial Views and View Components: For reusable and dynamic UI elements.

• Validate Input: Use data annotations and client-side validation for forms.

• Follow RESTful Conventions: Use appropriate HTTP verbs (GET, POST, etc.) for actions.

• Test Your Code: Write unit tests for Controllers and services, leveraging dependency injection.

---

Conclusion

In Module 3 of our ASP.NET Core Complete Course, we explored the MVC architecture, including the roles of Controllers, Models, and Views, compared Razor Pages vs. MVC, and learned how to pass data between Controllers and Views using ViewData, ViewBag, Models, and TempData. We also covered advanced UI techniques like Layouts, Partial Views, and View Components to create consistent and reusable interfaces.

Through practical examples, you’ve learned how to build a fully functional MVC application, handle forms, and create reusable UI components. In the next module, we’ll dive into advanced topics like API development, Entity Framework Core, and authentication. Stay tuned!

---

FAQs

Q1: What is the difference between MVC and Razor Pages?

• MVC separates logic into Controllers, Models, and Views, while Razor Pages combines logic and UI in a single .cshtml file. MVC is better for complex applications, while Razor Pages is simpler for page-focused apps.

Q2: When should I use ViewData vs. ViewBag vs. Models?

• Use Models for type-safe data passing. Use ViewData or ViewBag for small, ad-hoc data, but avoid overuse due to lack of type safety.

Q3: What are View Components used for?

• View Components are used for dynamic, reusable UI elements that require logic, such as menus or widgets.

Q4: How do Layouts improve MVC applications?

• Layouts provide a consistent structure (e.g., headers, footers) across pages, reducing code duplication and improving maintainability.

Q5: Can I use Razor Pages and MVC in the same project?

• Yes, ASP.NET Core supports combining MVC and Razor Pages in the same project, allowing you to use the best approach for each feature.