Guided: Building Your First Web Application with ASP.NET Core 10 MVC

Table of Contents

1. Challenge

   Introduction

   Welcome to the Guided: Building Your First Web Application with ASP.NET Core 10 MVC lab.

   In this lab, you will need to build PS-Taskboard, a simple project tracking board, using the ASP.NET Core 10 MVC pattern. The application displays a list of projects, each with a name, description, and status (Todo, In Progress, or Done).

   In the interest of time, all the files you need are already in the workspace. You won't need to be creating anything from scratch; instead you'll focus on the core "plumbing" of the MVC pattern: services, routing, controllers, dependency injection(DI), and view configuration.

   ---

   There is a solution directory that you can check to compare your implementation with at any time. Note that the solution is one avenue of a "correct" answer; you're all set as long as your implementation is functionally the same and validates correctly.

2. Challenge

   Pipeline and Routing

   Every ASP.NET Core application starts as an empty host. It doesn't know about controllers, views, or static files until you tell it.

   In this step, you'll register the MVC services with the DI container, enable static-file serving via the .NET 10 MapStaticAssets API, and map the default controller route so incoming HTTP requests are dispatched to the right controller action.

3. Challenge

   The Navigation Bridge

   A controller's job is to act as a bridge between an incoming request and the response. When a user navigates to /, the routing you set up in Step 1 dispatches the request to HomeController.Index(). Right now, that method throws a NotImplementedException — a clear signal that it's unfinished. You'll replace it with a call that tells the framework to find and render the matching view (Views/Home/Index.cshtml).

4. Challenge

   The Data Heartbeat

   MVC separates concerns: controllers handle requests, views handle presentation, and models handle data. In this step, you'll implement a simple in-memory repository that provides project data, then register it as a service so any controller can request it through dependency injection.

5. Challenge

   Dynamic Flow

   This is the heart of the MVC pattern in action. The controller will:

   1. Receive the repository through constructor injection (the DI container provides it automatically).
   2. Retrieve the raw data from the repository.
   3. Map each Project into a ProjectListItemViewModel — translating the domain model into a shape designed for display.
   4. Return the view with the ViewModel attached.

   Take a look at ViewModels/ProjectListViewModel.cs to see the two classes you'll be working with: ProjectListViewModel (which holds a list of items) and ProjectListItemViewModel (which has Id, Name, Description, and StatusLabel properties).

6. Challenge

   UI Refinement

   Up to this point the data flows in the order of repository → controller → view. But the views are rendering without the shared layout (no navigation bar, no consistent styling), the "View Projects" link on the home page is broken (href="#"), and the project list page doesn't display individual project cards. In this step, you'll fix all three. After redefining the UI, the PsTaskboard should be fully implemented and the lab is now complete.

   You can see the finished result that you've implemented by running dotnet run --project PsTaskboard within the Terminal. Once the application is running, look in the Web Browser tab to see the webpage. There is also an option to open the Web Browser in another page to get a full webpage view of PsTaskboard.