CS3014/02. Basic Application | Application Development Tools

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

Open Table of contents

Introduction
Environment Setup
File Structure
Steps
Additional Scopes
References

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>

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.