Co to jest ASP.NET Core Web App
Jest to aplikacja webowa realizowana w technologii .NET. W naszym przypadku stworzymy aplikację opartą o wzorzec MVC.
MVC jest modelem architektonicznym opracowanym głównie dla aplikacji z interfejsem użytkownika. Główną częścią wzorca jest model, który symbolizuje logikę biznesową aplikacji, użytkownik wysyła komunikaty i dane poprzez kontroler, który modyfikuje dane oraz zarządza odświeżaniem widoków. Widok odpowiada za wyświetlenie danych użytkownikowi.
Tworzenie projektu
Projekt aplikacji webowej tworzymy poprzez standardowy dialog File / New / Project… Na górze wybieramy filtr C# | Windows | Web
Z listy projektów wybieramy ASP.NET Core Web App (Model-View-Controller). Możemy wybierać jeden z wielu podobnych projektów. Każdy projekt zaczynający się ASP.NET Core Web będzie projektem bardzo podobnym tylko z nieco inną konfiguracją. Dla naszych potrzeb wybieramy ten z dopiskiem Model-View-Controller. Podajemy nazwę naszej aplikacji.
Na ostatnim oknie wybieramy Authenication type: Individual Accounts. Dzięki temu użyjemy Microsoft Identity, który zapewni nam rejestrację, logowanie użytkownika bez napisania jednej linii kodu.
Update-Database Microsoft Identity
W nowo utworzonym projekcie z włączonym Microsoft Identity musimy wykonać aktualiację bazy danych, która wykona migracje dodane do projektu i przygotuje nam bazę danych do pracy z Microsoft Identiy. Otwieramy Package Manager Console i wpisujemy polecenie: Update-Database
Migracje dodane do projektu zostają wykonane i baza danych jest przygotowana do pracy z Microsoft Identity
Uruchomienie aplikacji
Uruchamiamy aplikację poprzez F5 albo przycisk na pasku. Otwiera się okno przeglądarki z uruchomioną aplikacją webową. Po uruchomieniu klikamy w menu na Register i rejestrujemy konto nowego użytkownika. Podajemy email oraz hasło.
Aplikacja nie posiada skonfigurowanego wysyłania maili, więc na ekranie pojawia się treść wiadomości, którą normalnie otrzymalibyśmy pocztą. Potwierdzamy klikając w link nasz adres email i logujemy się normalnie na stronie.
Po zalogowaniu możemy zarządzać swoim kontem, możemy edytować dane w profilu, zmienić email, i hasło. Możemy skonfigurować aplikację do logowania poprzez FB i Goole. Microsoft Identity jest też przygotowane do włączenia Two-Factor authentication. Możemy również usunąć swoje dane z aplikacji.
W pierwszej kolejności możemy zmienić menu zalogowanego użytkownika, wchodzimy do pliku z widokiem layoutu i zmieniamy napis Hello nazwa użytkownika na Profile. Przeładowujemy stronę za pomocą mechanizmu Hot Reload Alt+F10 aby przeładować zmiany na stronie.
Jak działa MVC
Kluczowym elementem z punktu widzenia developera jest kontroler. Łączy on routing czyli adres URL z odpowiednim kontrolerem i metodą kontrolera. ASP.NET robi to automatycznie. Po utworzeniu klasy, której nazwa kończy się na Controller, np HomeController, automatycznie włączony zostaje routing Home i możemy wpisywać linki w adresie z Home. Następny parametr URL to akcja kontrolera, czyli metoda w klasie kontrolera. Domyślnie jak nie podamy w URL akcji, to wykonana zostanie metoda Index. ASP.NET automatycznie zamienia nam link URL na odpowiednią metodę i klasę w projekcie. W ten sposób przenosimy się z poziomu przeglądarki na poziom programowania C#.
Nowa tabela w bazie danych
Do naszej strony dodamy nową tabelę w bazie danych, która będzie przechowywała przykładowe elementy, które nazwiemy WorkItem. Jest to dowolna przykładowa nazwa, załóżmy że tworzymy aplikację do zarządzania zadaniami w pracy. Tworzymy nową klasę WorkItem.cs w folderze Data. Klasę opisujemy artrubutem [Table], dzięki czemu .NET będzie wiedział, że jest to tabela w bazie danych. W klasie WorkItem dodajemy 3 właściwości Id, Name i Description. Id opisujemy atrybutem [Key] oraz atrybutem [DatabaseGenerated(DatabaseGeneratedOption.Identity)]. W ten sposób właściwość Id stanie się kluczem głównym tabeli i będzie się automatycznie numerowało. Dla Name i Description ustalamy długość maksymalną, dodatkowo name oznaczamy [Required], będzie ono wymagane i nie będzie można dodać danych do tabeli bez podania Name.
Dodajemy migracje i aktualizujemy bazę
Po utworzeniu klasy tabeli otwieramy Package Manager Console i wykonujemy polecenie Add-Migration WorkItems. Spowoduje to utworzenie migracji. .NET automatycznie odszuka w projekcie wszystkie zmiany związane z bazą danych i wygeneruje plik migracji. Nazwa pliku migracji będzie zawierała WorkItems, ponieważ tak podaliśmy w poleceniu.
Następnie dodajemy nową właściwość DbSet<WorkItems> WorkItems do klasy ApplicationDbContext.cs jest to kontekst bazy danych, który możemy używać w dowolnym miejscu w naszej aplikacji w celu używania bazy danych.
Po zmianach na pliku kontekstu dodajemy kolejną migrację za pomocą polecenia Add-Migration WorkItemsDbContext. Tworzymy drugą migrację związaną ze zmianami w kontekście bazy danych.
Po utworzeniu migracji pozostaje nam tylko wykonać aktualizację bazy danych i dodanie zmian do bazy danych.
Edycja danych w tabeli
Otwieramy panel SQL Serve Object Explorer, znajdujemy naszą nowo dodaną tabelę i dodajemy dwa wiersze do naszej tabeli. Wstawiamy dwa przykładowe zadania.
Tworzenie nowego kontrolera
Klikamy prawym klawiszem w folder Controllers i dodajemy nowy kontroller MVC Controller – Empty. Visual Studio generuje nam pusty plik kontrolera. Zawiera on tylko metodę Index, która jest domyślna dla kontrolera. Chcemy korzystać w tym kontrolerze z bazy danych, więc wstrzykujemy kontekst bazy danych poprzez Dependency Injection. Dodajmy właściwość dbContext i dodajemy parametr do konstruktora w kontrolerze. Używamy kontekstu do pobrania z bazy danych WorkItems, cała operacja sprowadza się do jednej linii kodu. Pobrane elementy przekazujemy do metody View, która przekaże pobrane dane do widoku.
Tworzenie nowego widoku
Widoki dla kontrolera muszą znajdować się w folderze Views w podfolderze takim samym jak nazwa kontrolera. W naszym przypadku to będzie WorkItems. Do każdej akcji kontrolera (metody), tworzymy odpowiedni plik cshtml z widokiem. W naszym przypadku mamy tylko akcję Index, więc dodajmy pusty template Razor dla naszego widoku.
Dodajemy w pliku informacje o typie modelu, który przychodzi z kontrolera, następnie tworzymy prostą tabelę w html, która będzie zawierała elementy WorkItem. Nagłówek tabeli to zwykły html, natomiast wiersze zostaną utworzone poprzez pętle for, którą osadzamy w kodzie HTML i korzystamy z modelu, aby pobrać właściwości konkretnego elementu.
Dodawanie pozycji w menu
Menu możemy edytować zmieniając treść widoku _Layout.cshtml w podfolderze Shared. Znajduje się tam cały układ strony. Możemy go zamienić na inny, albo zmodyfikować wg uznania.
Prezentacja nowej funkcjonalności
Uruchamiamy projekt i klikamy w menu na WorkItems. Pojawia nam się strona z elementami pobranymi z bazy danych z tabeli WorkItems.
Autoryzacja dla zalogowanych użytkowników
W celu zabezpieczenia wybranej akcji dla zalogowanych użytkowników dodajemy do niej adnotację [Authorize]. Możemy też dodać taką adnotację do całej klasy kontrolera, wtedy wszystkie metody w kontrolerze będą dostępne tylko dla zalogowanych użytkowników. Jeśli spróbujemy wejść na taką stronę jako niezalogowany użytkownik, zostaniemy przekierowani na stronę logowania.
Autoryzacja dla użytkowników z odpowiedniej grupy / roli
W celu dodania dostępu do metody dla wybranej grupy użytkowników korzystamy z ról aplikacji. Dopisujemy do adnotacji jakie role są uprawnione do dostępu [Authorize(Roles=”User”)].
Następnie edytujemy tabele w bazie danych i dodajemy nową rolę Admin do tabeli AspNetRoles. Sprawdzamy Id naszego użytkownika w tabeli AspNetUsers. Jest to GUID, kopiujemy go i tworzymy wiersz w tabeli AspNetUserRoles, gdzie podajemy Id użytkownika Id roli, którą mu przypisujemy.
Włączamy również obsługę ról w konfiguracji aplikacji w pliku Program.cs Domyślnie role są wyłączone. Dodajemy linijkę AddRoles<IdentityRole> w odpowiednim miejscu.
Uruchamiamy projekt, ja mamy dodane w kontrolerze User, to widzimy WorkItems, ale jak włączmy metodę tylko dla adminów, to dostajemy komunikat o braku uprawnień
Zapraszam Cię do zasubskrybowania i regularnego oglądania kanału szkolaprogramowania.com. Regularnie pojawiają się na nim wartościowe filmy, które pomogą Ci w zdobywaniu wiedzy i rozwijaniu umiejętności jako programista .NET. Codzienne regularne pogłębianie wiedzy pomoże Ci zdobyć umiejętności, które są bardzo przydatne w życiu zawodowym.
To wszystko w tym odcinku, dziękuję za to, że poświęciłeś swój czas, pozdrawiam – CZEŚĆ