Module 9: ASP.NET Core MVC

In Module 9, we move from the “behind-the-scenes” logic of APIs into building Full-Stack Web Applications. ASP.NET Core MVC (Model-View-Controller) is a design pattern that separates an application into three main components to make it easier to manage and scale.

1. MVC Architecture Deep Dive

The goal of MVC is Separation of Concerns. Each part of the pattern has a specific job:

Model: Represents the data and the business logic (e.g., a Product class or a DatabaseContext).
View: The user interface (HTML/CSS) that displays the data.
Controller: The “Brain.” It takes the user’s request, talks to the Model to get data, and hands that data to the View.

2. Views & Razor Syntax

Razor is a markup syntax that lets you embed C# code into HTML. Files use the .cshtml extension.

Syntax: Use the @ symbol to transition from HTML to C#.
Example:HTML<ul> @foreach (var item in Model.Products) { <li>@item.Name - @item.Price.ToString("C")</li> } </ul>
Tag Helpers: Modern ASP.NET Core features that make HTML tags look like standard HTML but perform server-side magic (e.g., <a asp-action="Details" asp-route-id="@item.Id">Details</a>).

3. Layouts, Partial Views & Sections

To avoid repeating HTML (like headers and footers) on every page, we use a modular system:

Layouts (_Layout.cshtml): The “Master Page.” It contains the <html>, <head>, and <body> tags. Every view is injected into the @RenderBody() placeholder.
Partial Views: Small, reusable components (like a _LoginPartial.cshtml) that can be embedded into multiple pages.
Sections: Allow a specific view to “push” content into a specific part of the layout (like a page-specific JavaScript file).

4. ViewModels vs. DTOs (Data Transfer Objects)

In a professional app, you never pass your database entity directly to a View.

The Problem: Your database User might have a PasswordHash property. You don’t want that sent to the browser.
The Solution:
- DTO: Used to move data between the API and services.
- ViewModel: Tailored specifically for the View. If a page needs a list of Products and a list of Categories, you create a ProductDashboardViewModel that contains both.

5. Form Handling & Validation

MVC makes it incredibly easy to take user input and turn it into data.

GET Action: Displays the empty form.
POST Action: Receives the data when the user clicks “Submit.”
Validation: Using the same Data Annotations from Module 8 (like [Required]), MVC can automatically display error messages next to input fields using <span asp-validation-for="Name"></span>.

6. Storing Temporary Data

Sometimes you need to pass small bits of info that aren’t part of your formal “Model.”

Method	Lifetime	Usage
ViewData	Current Request	Dictionary-based; requires type casting.
ViewBag	Current Request	Dynamic wrapper around ViewData; no casting needed.
TempData	Until Read	Uses Sessions; perfect for “Success” messages after a redirect.

7. The Lifecycle of an MVC Request

Request: User navigates to /Product/Index.
Routing: Matches the URL to the ProductController and the Index method.
Controller: Logic runs; it fetches a list of products from the database.
View Selection: The controller returns View(productList).
Razor Engine: Processes the .cshtml file, replaces C# code with HTML.
Response: The final HTML is sent to the user’s browser.

Log In

Sign Up