Skip to content

Module 1: ASP.NET Core MVC (The Traditional Shop)

📚 Module 1: ASP.NET Core MVC

Focus: Moving from “Data” to “Web Pages.”

MVC is the classic way to build websites. It separates the “How it looks” from “What it does.”


🏗️ Step 1: The Pattern (The “Restaurant”)

MVC stands for Model, View, and Controller.

🧩 The Analogy: The Fine Dining Restaurant

  1. The Waiter (Controller): You give your order to the waiter. They decide which chef needs to cook your meal.
  2. The Chef (Model): The chef goes into the kitchen, gets the ingredients (Data), and prepares the food.
  3. The Plate (View): The waiter brings the food back to you on a beautiful plate. You only see the plate; you never see the mess in the kitchen.

🏗️ Step 2: Routing (The “Address Book”)

How does the server know which “Waiter” (Controller) to call? We use Routing.

🧩 The Analogy: The Mall Map

  • /Home/Index -> Go to the Home store and find the Index aisle.
  • /Products/Details/5 -> Go to the Products store, look at Details, for product number 5.

🏗️ Step 3: Razor Syntax (The “C# in HTML”)

Razor is a language that allows you to put C# code directly into your HTML files.

🧩 The Analogy: The Mad Libs Game

You have a story with blanks: “Hello, my name is [Name].”

  • Razor fills in the blanks from your database.
  • @Model.Name -> Turns into “Alice” in the browser.

🧪 Step 4: Your First Controller

Here is what a simple Controller looks like in C#:

public class ProductsController : Controller {
    // This is an "Action"
    public IActionResult Index() {
        var products = new List<string> { "Apple", "Banana", "Pear" };
        
        // Pass the list (The Model) to the View
        return View(products);
    }
}

🥅 Module 3 Review

  1. Model: The Data and logic.
  2. View: The HTML and UI (The Plate).
  3. Controller: The “Traffic Cop” that connects the two (The Waiter).
  4. Razor: The @ symbol that lets you write C# inside HTML.