ASP.NET Core Basics and MVC Architecture

TL;DR

ASP.NET Core is a modern, cross-platform framework for building web apps. It often uses the Model-View-Controller (MVC) architectural pattern to organize your code. MVC helps keep your application structured, making it easier to develop and maintain.

1. The Mental Model

Imagine you're running a restaurant. MVC is like your well-organized staff: the Model is the kitchen (data/logic), the View is the dining room (what the customer sees), and the Controller is the waiter (takes orders, translates them for the kitchen, and delivers food).

2. The Core Material

ASP.NET Core is a powerful, open-source framework from Microsoft for building various types of applications, including web apps, APIs, and microservices. It's cross-platform, meaning you can develop and run your applications on Windows, macOS, and Linux.

What is MVC?

MVC stands for Model-View-Controller. It's a design pattern that separates an application into three interconnected components:

• Model: Represents the data and the business logic of your application. Think of it as the brain that handles operations, database interactions, and validations. It's independent of the user interface.
• View: Responsible for displaying information to the user. It's the user interface part of the application, usually HTML, CSS, and some client-side JavaScript. The View doesn't handle application logic; it just presents data received from the Controller.
• Controller: Acts as an intermediary between the Model and the View. It receives user requests, processes input, interacts with the Model to retrieve or update data, and then decides which View to display.

Let's look at how a user request flows through an MVC application:

1. User Request: You open your browser and navigate to a URL like /Products/Details/5.
2. Routing: ASP.NET Core's routing system intercepts this request and maps it to a specific Controller action, e.g., the Details action in the ProductsController.
3. Controller Action: The Details action in ProductsController executes. It might call the Model to fetch product data for ID = 5 from a database.
4. Model Interaction: The Model retrieves the product data.
5. View Selection: The Controller receives the product data from the Model. It then selects the appropriate View (Details.cshtml) to render this data.
6. View Rendering: The View uses the product data to generate an HTML response.
7. Response to User: The generated HTML is sent back to your browser, which displays the product details.

Project Structure (Default ASP.NET Core MVC Project)

When you create a new ASP.NET Core MVC project, you'll typically see these folders:

• Controllers: Contains your C# controller classes.
• Models: Contains your C# model classes (data structures, business logic).
• Views: Contains your UI files, usually .cshtml files (Razor Views), organized into subfolders corresponding to your controllers.

Basic Controller Example

Let's say you want to display a list of products.

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

// This would typically come from your data layer
public class Product
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Price { get; set; }
}

public class ProductsController : Controller // Inherit from Controller
{
    public IActionResult Index() // This is an action method
    {
        // --- Model interaction (simplified for quick example) ---
        // In a real app, this would come from a database or service.
        List<Product> products = new List<Product>
        {
            new Product { Id = 1, Name = "Laptop", Price = 1200.00M },
            new Product { Id = 2, Name = "Mouse", Price = 25.00M }
        };
        // ----------------------------------------------------

        return View(products); // Pass the list of products to the View
    }

    public IActionResult Details(int id)
    {
        // Find product by id (again, simplified)
        Product product = new Product { Id = id, Name = $"Product {id}", Price = 99.99M };
        return View(product); // Pass a single product to its View
    }
}

Basic View Example (Views/Products/Index.cshtml)

This Index.cshtml file would display the list of products.

@model List<Product> @* This tells the View what type of data it expects *@

@{
    ViewData["Title"] = "Products List";
}

<h1>Our Products</h1>

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var product in Model)
        {
            <tr>
                <td>@product.Id</td>
                <td>@product.Name</td>
                <td>@product.Price.ToString("C")</td> @* Format as currency *@
            </tr>
        }
    </tbody>
</table>

<p><a asp-action="Details" asp-route-id="1">View Product 1 Details</a></p>

Notice @model at the top and the use of @ to embed C# code within HTML. This is Razor syntax, which is how ASP.NET Core Views combine C# and HTML.

3. Worked Example

Let's quickly build a simple "Welcome" page using MVC.

1. Create a Home Controller:

Create a new C# file Controllers/HomeController.cs:

using Microsoft.AspNetCore.Mvc;

public class HomeController : Controller
{
    public IActionResult Welcome()
    {
        ViewData["Message"] = "Hello from our first MVC app!"; // Data going to the View
        return View(); // Tell the controller to render the Welcome.cshtml view
    }
}

2. Create a Welcome View:

Create a new folder Views/Home then create a new .cshtml file inside it named Welcome.cshtml:

@{
    // This is C# code within Razor syntax.
    // It's setting the browser tab title.
    ViewData["Title"] = "My Welcome Page";
}

<h2>Welcome!</h2>
<p>@ViewData["Message"]</p> @* Display the message from the Controller *@

3. Configure Routing (usually already set up in Program.cs):

In Program.cs, you'll typically see something like this for default routing:

startupBuilder.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}"); // This maps URL to Controller/Action

To access our new Welcome action, a URL like /Home/Welcome would match this pattern. When you run your application and navigate to /Home/Welcome, the Welcome action in HomeController will execute, pass a message, and render your Welcome.cshtml view.

4. Key Takeaways

• ASP.NET Core is a modern, cross-platform framework for building web apps and APIs.
• MVC (Model-View-Controller) is a design pattern separating concerns into data/logic (Model), UI (View), and intermediary (Controller).
• The Controller handles requests, interacts with the Model, and chooses the View.
• The Model manages data and business rules, independent of the UI.
• The View is responsible for presenting data to the user, typically with Razor syntax for dynamic content.
• Routing maps incoming URLs to specific Controller actions.
• This separation makes your code more organized, testable, and easier to maintain.

Common mistakes to avoid:

• Putting business logic directly into your Views; Views should only display data.
• Calling database operations directly from your Controllers without a proper Model or service layer.
• Trying to handle user input and data storage directly in the View.
• Not understanding how routing maps URLs to your Controller actions.

5. Now Try It

Open Visual Studio (or VS Code), create a new "ASP.NET Core Web App (Model-View-Controller)" project. Add a new Controller called AboutController with an Author action. This action should pass your name as a string to its corresponding Author.cshtml View, and the View should then display "Hello, [Your Name]!" in a heading.

Success looks like: You can run the application, navigate to /About/Author, and see a page displaying your personalized greeting.