Przygotowanie projektu ASP.NET Core MVC od zera

Po co ci osobny kurs z ASP.NET Core MVC

Cześć, z tej strony Jarmatys. Witam cię w pierwszej lekcji kursu, w którym razem zbudujemy prostą aplikację webową w ASP.NET Core MVC. Zaczynamy od absolutnych podstaw — od pustej instalki Visual Studio do działającego projektu, który wyświetli coś w przeglądarce.

W tym wpisie pokażę ci, jak skonfigurować nowy projekt w Visual Studio 2019, omówimy strukturę katalogów typową dla wzorca Model-View-Controller, zajrzymy do domyślnego kontrolera i widoku, a na koniec uruchomimy aplikację na lokalnym serwerze IIS Express. Jeśli nigdy wcześniej nie dotykałeś ASP.NET Core, to jest dokładnie ten moment, żeby zacząć.

Kod z tej lekcji znajdziesz na GitHubie — polecam sklonować i zaglądać tam równolegle z czytaniem.

Tworzymy nowy projekt w Visual Studio 2019

Po uruchomieniu Visual Studio 2019 zobaczysz ekran startowy. Z prawej strony masz cztery opcje: sklonować repozytorium, otworzyć projekt, otworzyć folder lub utworzyć nowy projekt. Interesuje nas ta ostatnia.

Po kliknięciu pokaże się lista dostępnych szablonów. Możesz stąd zrobić aplikację konsolową (świetna na naukę C#), Blazora, Web API albo zwykłą webówkę. Wybieramy ASP.NET Core Web App (Model-View-Controller) — bo to właśnie ten wzorzec chcemy poznać.

Na następnym ekranie ustawiamy nazwę projektu, nazwę solucji oraz decydujemy, czy projekt i solucja mają siedzieć w tym samym folderze. W naszym przypadku zaznaczam opcję "Place solution and project in the same directory" — bo mamy tylko jeden projekt w tej solucji. Jeśli planujesz dokładać kolejne biblioteki czy moduły, zostaw to odznaczone, żeby mieć czystszą strukturę.

Na ostatnim ekranie wybierasz wersję .NET — u mnie to .NET 5.0. Zostawiamy domyślną konfigurację: bez autentykacji (żeby nie zaśmiecać projektu na start), z włączonym HTTPS, bez Dockera i bez hot reloadu. Klikasz Create i Visual Studio generuje dla ciebie boilerplate.

Jak wygląda solucja i struktura katalogów

Gdy projekt się załaduje, otwórz Solution Explorer. Solucja to taki worek na projekty — teraz siedzi w nim tylko jedna aplikacja webowa, ale mogłyby się tu znaleźć biblioteki klas, testy czy aplikacja konsolowa obsługująca backend.

Wejdźmy w sam projekt. Najważniejsze foldery to:

Models — tu trzymasz klasy reprezentujące dane (produkty, użytkowników, zamówienia).
Views — tu są widoki Razor (.cshtml), które renderują HTML.
Controllers — tu siedzą kontrolery, które łączą modele z widokami.
wwwroot — pliki statyczne: CSS, JS, biblioteki frontendowe, obrazki. Jeśli chcesz mieć images/, zakładasz go właśnie tutaj.

Dodatkowo w korzeniu projektu znajdziesz dwa kluczowe pliki: Program.cs i Startup.cs. To na nich zbudujemy konfigurację aplikacji — DI, middleware, routing. Wrócimy do nich w kolejnej lekcji, teraz skupiamy się na strukturze.

Model, kontroler i widok w praktyce

Zacznijmy od modelu. Wchodzisz w folder Models, klikasz prawym → Add → Class. Visual Studio wygeneruje ci pusty szkielet. Tworzymy prostą klasę Product, która będzie trzymała podstawowe informacje o produkcie:

namespace TestApp.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
    }
}

Skrót prop + Tab Tab w Visual Studio generuje ci gotową właściwość z getterem i setterem — bardzo przydatne, gdy dopiero zaczynasz. Model to właśnie taka klasa danych, którą będziemy przerzucać między kontrolerami a widokami.

Teraz kontroler. Domyślny HomeController wygląda mniej więcej tak:

using Microsoft.AspNetCore.Mvc;

namespace TestApp.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
    }
}

Zwróć uwagę na dwie rzeczy. Po pierwsze — nazwa kończy się na Controller. Na tej podstawie framework dopasowuje trasy URL (np. /Home/Index trafia właśnie tutaj). Po drugie — dziedziczenie po klasie Controller daje ci dostęp do całej funkcjonalności: renderowania widoków, zwracania JSON-a, przekierowań i tak dalej.

Metoda Index() zwraca View(), co oznacza: "znajdź widok o nazwie Index w folderze Views/Home i wyrenderuj go". Struktura widoków jest hierarchiczna — każdy kontroler ma swój podfolder w Views.

Widoki Razor i współdzielony layout

Otwórz Views/Home/Index.cshtml. Zobaczysz tam mix HTML-a i składni Razor — poznasz ją po znaku @. Razor pozwala wpleść logikę C# bezpośrednio w widok: warunki, pętle, zmienne.

@{
    var content = "Cześć, to jest treść strony!";
}

<h1>@ViewData["Title"]</h1>
<p>@content</p>

Zadeklarowaną w bloku @{ ... } zmienną wypluwasz w HTML-u poprzedzając ją @. Możesz też tworzyć większe bloki logiki, używać if-ów i foreach-y — wrócimy do tego w kolejnych lekcjach.

Najciekawsza jest jednak sekcja Shared, a konkretnie _Layout.cshtml. To wspólny szkielet dla wszystkich widoków — nagłówek, menu, stopka. Nie chcesz przecież kopiować struktury <html> i <head> do każdego widoku osobno.

<!DOCTYPE html>
<html>
<head>
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
    <header>...menu...</header>
    <main>
        @RenderBody()
    </main>
    <footer>...</footer>
</body>
</html>

Kluczowe jest wywołanie @RenderBody() — w to miejsce framework wrzuci zawartość konkretnego widoku (np. Index.cshtml), który został wywołany przez kontroler. Layout spina się z widokiem w pliku _ViewStart.cshtml, który ustawia domyślny layout dla wszystkich widoków w projekcie.

Plik _ViewStart.cshtml to magiczne miejsce, które mówi każdemu widokowi: "użyj tego layoutu, chyba że ktoś nadpisze". Możesz dowolny widok wskoczyć i wskazać własny layout — przyda się to np. przy stronie logowania.

W praktyce: użytkownik wchodzi na /, framework kieruje go do HomeController.Index(), ten zwraca widok Index.cshtml, który zostaje wklejony w @RenderBody() layoutu. I dopiero tak złożony HTML leci do przeglądarki.

Uruchamiamy aplikację na IIS Express

Zielona strzałka u góry Visual Studio uruchamia projekt. Domyślnie idzie to przez IIS Express — lekki serwer deweloperski, który chodzi na twojej lokalnej maszynie. Nie myl go z pełnoprawnym IIS-em produkcyjnym — to tylko narzędzie do developmentu.

Po kliknięciu odpala się twoja domyślna przeglądarka (u mnie Firefox) i pokazuje wygenerowany przez Visual Studio boilerplate. Masz już skonfigurowane podstawowe style Bootstrapa, routing, layout i wszystko, co potrzebne, żeby od razu zacząć kodować.

Jeśli dodałeś wcześniej zmienną w widoku Index.cshtml i kawałek tekstu, zobaczysz je w środku strony — dokładnie w miejscu @RenderBody(). Menu, stopka i nagłówek siedzą w layoucie, więc na każdej podstronie wyglądają tak samo. Zmiana podstrony zmienia tylko zawartość środka.

Taka jest idea MVC: layout nie zmienia się między podstronami, zmienia się tylko to, co w nim wyrenderuje kontroler. Masz dzięki temu czystą separację, którą łatwo utrzymać przy dużych aplikacjach.

Co dalej?

To by było na tyle w pierwszej lekcji. Masz gotowy projekt, rozumiesz strukturę folderów, wiesz, jak łączą się model, widok i kontroler, i potrafisz uruchomić aplikację lokalnie. To solidna baza.

W kolejnej lekcji wejdziemy głębiej w Program.cs i Startup.cs, pokażę ci, jak działa middleware, routing i dependency injection — czyli to, co sprawia, że ASP.NET Core naprawdę śmiga. Jeśli masz pytania, wrzuć je w komentarzach pod filmem na YouTubie — rozwiejemy wszystkie wątpliwości.

Do zobaczenia w następnym odcinku.