Lab 02: Build a web-based TODO list using ASP.NET Core MVC and C#

To Build a web-based TODO list using ASP.NET Core MVC and C#.

Introduction

Develop a web UI for a TODO list using ASP.NET Core MVC and C#. This lab covers MVC structure, Razor views, CSS styling, and server-side logic integration [1].

Environment Setup

VS Code with C# Dev Kit Extension
.NET SDK (Latest Stable Version)
Modern web browser (Chrome/Edge/Firefox)

File Structure


TODOListLab/
│── Controllers/
│   ├── HomeController.cs
│── Models/
│   ├── TaskModel.cs
│── Views/
│   ├── Home/
│   │   ├── Index.cshtml
│── wwwroot/
│   ├── css/
│   │   ├── styles.css
│── appsettings.json
│── Program.cs
│── Startup.cs (if using .NET 5 or lower)
│── TODOListLab.csproj

Steps

1. Create a New Project in VS Code

Open VS Code and open a terminal (Ctrl + `).

Run:


dotnet new mvc -o TODOListLab
cd TODOListLab
code .

This initializes an ASP.NET Core MVC project and opens it in VS Code.

2. Define Task Model (`Models/TaskModel.cs`)

Create a TaskModel to store TODO tasks.


namespace TODOListLab.Models
{
    public class TaskModel
    {
        public int Id { get; set; }
        public string Description { get; set; }
    }
}

3. Implement Controller Logic (`Controllers/HomeController.cs`)

Modify HomeController to handle task management.


using Microsoft.AspNetCore.Mvc;
using TODOListLab.Models;
using System.Collections.Generic;
 
namespace TODOListLab.Controllers
{
    public class HomeController : Controller
    {
        private static List<TaskModel> tasks = new();
 
        public IActionResult Index()
        {
            return View(tasks);
        }
 
        [HttpPost]
        public IActionResult AddTask(string description)
        {
            if (!string.IsNullOrWhiteSpace(description))
            {
                tasks.Add(new TaskModel { Id = tasks.Count + 1, Description = description });
            }
            return RedirectToAction("Index");
        }
 
        [HttpPost]
        public IActionResult DeleteTask(int id)
        {
            tasks.RemoveAll(t => t.Id == id);
            return RedirectToAction("Index");
        }
    }
}

4. Create Razor View (`Views/Home/Index.cshtml`)

Replace the default view with:


@model List<TODOListLab.Models.TaskModel>
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>TODO List</title>
      <link rel="stylesheet" href="~/css/styles.css" />
    </head>
    <body>
      <div class="container">
        <h1>TODO List</h1>
        <form asp-action="AddTask" method="post">
          <input
            type="text"
            name="description"
            placeholder="Enter task"
            required
          />
          <button type="submit">Add</button>
        </form>
        <ul>
          @foreach (var task in Model) {
          <li>
            @task.Description
            <form asp-action="DeleteTask" method="post" style="display:inline;">
              <input type="hidden" name="id" value="@task.Id" />
              <button type="submit">Delete</button>
            </form>
          </li>
          }
        </ul>
      </div>
    </body>
  </html></TODOListLab.Models.TaskModel
>

5. Add Styling (`wwwroot/css/styles.css`)


body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  margin: 0;
  padding: 0;
  text-align: center;
}
.container {
  width: 50%;
  margin: 50px auto;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input {
  padding: 10px;
  width: 70%;
}
button {
  padding: 10px;
  background: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  margin: 10px 0;
  padding: 10px;
  background: #eee;
}

6. Run the Application

Open terminal (Ctrl + `) and run:
```
dotnet run
```
Open http://localhost:5164 to test the TODO list.

Additional Scopes

Store tasks in a database using Entity Framework Core.
Implement AJAX for real-time task management.
Add user authentication to manage personal task lists.

References

[1] Microsoft Documentation: ASP.NET Core MVC.
[2] .NET CLI Guide for Project Creation.

💡

Lab 02: Build a web-based TODO list using ASP.NET Core MVC and C#

Introduction

Environment Setup

File Structure

Steps

1. Create a New Project in VS Code

2. Define Task Model (Models/TaskModel.cs)

3. Implement Controller Logic (Controllers/HomeController.cs)

4. Create Razor View (Views/Home/Index.cshtml)

5. Add Styling (wwwroot/css/styles.css)