Wzorzec MVC w C#/.NET: Od Podstaw do Pierwszej Aplikacji

Cześć! Dzisiaj zapraszam Cię do zapoznania się z architekturą MVC (Model-View-Controller) w środowisku ASP.NET. Jeśli jesteś początkującym programistą .NET lub chcesz usystematyzować swoją wiedzę, to ten artykuł jest dla Ciebie. Pokażę Ci na prostym przykładzie, jak działa MVC w .NET, jak wygląda przepływ danych oraz na co warto zwrócić uwagę, rozpoczynając przygodę z tym wzorcem projektowym.

Czym jest MVC?

Struktura projektu w ASP.NET MVC

Pierwszy przykład w kodzie – prosta aplikacja MVC

1. Model

namespace MyMvcApp.Models
{
    public class Book
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
    }
}

Powyższy model reprezentuje obiekt książki z podstawowymi informacjami. W realnym projekcie to tutaj umieścisz też logikę biznesową, np. walidację danych czy metody do obsługi obiektu.

2. Kontroler

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

namespace MyMvcApp.Controllers
{
    public class BooksController : Controller
    {
        // Dla uproszczenia - "udajemy" bazę danych listą w pamięci:
        private static List<Book> _books = new List<Book>
        {
            new Book { Id = 1, Title = "C# 10 in a Nutshell", Author = "Joseph Albahari" },
            new Book { Id = 2, Title = "Pro ASP.NET Core MVC 6", Author = "Adam Freeman" }
        };

        public IActionResult Index()
        {
            // Zwracamy do widoku listę książek
            return View(_books);
        }

        // /Books/Details/1
        public IActionResult Details(int id)
        {
            // Szukamy książki w naszej liście
            var book = _books.Find(b => b.Id == id);
            if (book == null)
            {
                return NotFound();
            }

            return View(book);
        }

        [HttpGet]
        public IActionResult Create()
        {
            // Zwraca pusty formularz w widoku
            return View();
        }

        [HttpPost]
        public IActionResult Create(Book newBook)
        {
            // Symulujemy dodanie do bazy
            newBook.Id = _books.Count + 1;
            _books.Add(newBook);

            // Po dodaniu przekierowujemy do akcji Index, żeby zobaczyć listę książek
            return RedirectToAction(nameof(Index));
        }
    }
}

Omówmy pokrótce, co tu się dzieje:

    • Metoda Index() zwraca widok z listą dostępnych książek.
    • Metoda Details(int id) wyświetla szczegółowe dane o jednej książce.
    • Metoda Create() w trybie GET wyświetla formularz do dodania nowej książki.
    • Metoda Create(Book newBook) w trybie POST przyjmuje dane z formularza, tworzy obiekt w naszej "bazie" i przekierowuje do widoku Index.

3. Widoki

@model List<MyMvcApp.Models.Book>

@{
    ViewBag.Title = "Lista Książek";
}

<h1>@ViewBag.Title</h1>

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Tytuł</th>
            <th>Autor</th>
            <th>Akcje</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var book in Model)
        {
            <tr>
                <td>@book.Id</td>
                <td>@book.Title</td>
                <td>@book.Author</td>
                <td>
                    <a asp-controller="Books" asp-action="Details" asp-route-id="@book.Id">Szczegóły</a>
                </td>
            </tr>
        }
    </tbody>
</table>

<a asp-controller="Books" asp-action="Create">Dodaj nową książkę</a>

Widok Details.cshtml

@model MyMvcApp.Models.Book

@{
    ViewBag.Title = "Szczegóły Książki";
}

<h1>@ViewBag.Title</h1>
<div>
    <p><strong>Tytuł:</strong> @Model.Title</p>
    <p><strong>Autor:</strong> @Model.Author</p>
</div>

<a asp-controller="Books" asp-action="Index">Powrót do listy</a>

Widok Create.cshtml

@model MyMvcApp.Models.Book

@{
    ViewBag.Title = "Dodaj nową książkę";
}

<h1>@ViewBag.Title</h1>

<form asp-controller="Books" asp-action="Create" method="post">
    <div>
        <label for="Title">Tytuł</label>
        <input type="text" id="Title" name="Title" />
    </div>
    <div>
        <label for="Author">Autor</label>
        <input type="text" id="Author" name="Author" />
    </div>
    <button type="submit">Dodaj</button>
</form>

<a asp-controller="Books" asp-action="Index">Powrót do listy</a>

Po uruchomieniu aplikacji (np. pod adresem https://localhost:5001/Books) zobaczysz listę książek i możliwość dodawania kolejnych.

Jak wygląda przepływ żądania w MVC?

Podsumowanie