Тема 4.1. Розробка “To-do list” з ASP.NET MVC

Keywords

ASP.NET MVC, C#, To-Do List, Entity Framework, SQL, Web Development, MVC Pattern, CRUD, SQLite, Visual Studio

📌 Розробка To-Do List з ASP.NET MVC

🛠 Налаштування середовища розробки

Перед початком роботи необхідно встановити:

• .NET SDK (https://dotnet.microsoft.com/download)
• Visual Studio (https://visualstudio.microsoft.com/)
• SQL Server (опціонально, можна використовувати SQLite або In-Memory БД)

1️⃣ Створення ASP.NET MVC проєкту

1. Відкрийте Visual Studio.
2. Створіть новий проєкт ASP.NET Core Web App (Model-View-Controller).
3. Оберіть .NET 6+ або .NET 5 як платформу.
4. Назвіть проєкт, наприклад, TodoMvcApp.
5. Натисніть Create.

2️⃣ Налаштування моделей (Model)

Файл: Models/TodoItem.cs

using System.ComponentModel.DataAnnotations;

namespace TodoMvcApp.Models
{
    public class TodoItem
    {
        public int Id { get; set; }
        
        [Required]
        public string Task { get; set; }
        
        public bool IsCompleted { get; set; }
    }
}

3️⃣ Налаштування контексту бази даних

Файл: Data/AppDbContext.cs

using Microsoft.EntityFrameworkCore;
using TodoMvcApp.Models;

namespace TodoMvcApp.Data
{
    public class AppDbContext : DbContext
    {
        public AppDbContext(DbContextOptions<AppDbContext> options) : base(options) { }

        public DbSet<TodoItem> TodoItems { get; set; }
    }
}

Додайте в appsettings.json підключення до SQLite:

"ConnectionStrings": {
  "DefaultConnection": "Data Source=todo.db"
}

Налаштуйте DI у Program.cs:

using Microsoft.EntityFrameworkCore;
using TodoMvcApp.Data;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddDbContext<AppDbContext>(options =>
    options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));

var app = builder.Build();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(name: "default", pattern: "{controller=Todo}/{action=Index}/{id?}");

app.Run();

4️⃣ Додавання контролера (Controller)

Файл: Controllers/TodoController.cs

using Microsoft.AspNetCore.Mvc;
using TodoMvcApp.Data;
using TodoMvcApp.Models;

namespace TodoMvcApp.Controllers
{
    public class TodoController : Controller
    {
        private readonly AppDbContext _context;

        public TodoController(AppDbContext context)
        {
            _context = context;
        }

        public IActionResult Index()
        {
            var todos = _context.TodoItems.ToList();
            return View(todos);
        }

        [HttpPost]
        public IActionResult Create(TodoItem todo)
        {
            if (ModelState.IsValid)
            {
                _context.TodoItems.Add(todo);
                _context.SaveChanges();
                return RedirectToAction("Index");
            }
            return View(todo);
        }

        [HttpPost]
        public IActionResult ToggleComplete(int id)
        {
            var todo = _context.TodoItems.Find(id);
            if (todo != null)
            {
                todo.IsCompleted = !todo.IsCompleted;
                _context.SaveChanges();
            }
            return RedirectToAction("Index");
        }

        public IActionResult Delete(int id)
        {
            var todo = _context.TodoItems.Find(id);
            if (todo != null)
            {
                _context.TodoItems.Remove(todo);
                _context.SaveChanges();
            }
            return RedirectToAction("Index");
        }
    }
}

5️⃣ Додавання представлення (View)

Файл: Views/Todo/Index.cshtml

@model IEnumerable<TodoMvcApp.Models.TodoItem>

<h2>To-Do List</h2>

<form asp-action="Create" method="post">
    <input type="text" name="Task" required />
    <button type="submit">Додати</button>
</form>

<table>
    <thead>
        <tr>
            <th>Завдання</th>
            <th>Статус</th>
            <th>Дії</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.Task</td>
                <td>
                    <form asp-action="ToggleComplete" method="post">
                        <input type="hidden" name="id" value="@item.Id" />
                        <button type="submit">@(item.IsCompleted ? "✔" : "✖")</button>
                    </form>
                </td>
                <td>
                    <a asp-action="Delete" asp-route-id="@item.Id">Видалити</a>
                </td>
            </tr>
        }
    </tbody>
</table>

6️⃣ Міграція бази даних

Виконайте у Терміналі:

dotnet ef migrations add InitialCreate
dotnet ef database update

7️⃣ Запуск проєкту

dotnet run

Відкрийте http://localhost:5000/Todo у браузері.

Готово! 🎉 Ви розробили To-Do List на основі ASP.NET MVC.

---

Використані джерела

• Helland, A., Durano, V. M., Chilberto, J. A., & Price, E. (2020). ASP.NET Core 5 for Beginners: Kick-start your ASP.NET web development journey with the help of step-by-step tutorials and examples. Packt Publishing.

• OpenAI

---

&copy 2025 Юрій Клебан + Open AI