Budowanie aplikacji typu CRUD przy pomocy ASP.NET Core MVC i EF Core – od zera do aplikacji uruchomionej na Azure

Poniższy tutorial jest zapisem procesu tworzenia aplikacji, którą pokazywałam podczas 29 spotkania Azuronet 26 lipca 2021 r.

Utworzenie projektu ASP.NET Core MVC

Najpierw musimy stworzyć nasz projekt. Otwieramy Visual Studio 2019 i wybieramy opcję Create a new project:

Create a new project

Spośród dostępnych szablonów wybieramy ten o nazwie ASP.NET Core Web App (Model-View-Controller) i klikamy przycisk Next:

Nadajemy nazwę naszemu projektowi, wskazujemy lokalizację i klikamy przycisk Next:

Add project's name

Wybieramy .NET 5.0 (Current) jako Target Framework, dla uproszczenia projektu odznaczamy wszystkie pozostałe checkbox’y i klikamy przycisk Create:

Target Framework

Poniżej widok utworzonego projektu:

Project was created

Dodanie Entity Framework Core do projektu

Utworzenie klas modelu

W oknie Solution Explorer prawym przyciskiem myszy klikamy folder Models ->Add -> Class. W oknie Add New Item – AzuronetBees.Web w polu tekstowym Name wpisujemy BreedOfBees, a potem klikamy Add:

Add model class

Do naszej klasy dodajemy kod widoczny poniżej. Jest to wyliczenie z nazwami ras pszczół z naszej pasieki:

W oknie Solution Explorer prawym przyciskiem myszy klikamy folder Models -> Add -> Class. W oknie Add New Item – AzuronetBees.Web w polu tekstowym Name wpisujemy Bee, a potem klikamy Add:

Add Bee model class

Do klasy Bee.cs dodajemy poniższy kod. Są to właściwości, które będą charakteryzowały poszczególne rodziny pszczele:

Added Bee class

W Solution Explorer klikamy prawym przyciskiem myszy folder Models -> Add -> Class. W oknie dialogowym Add New Item – AzuronetBees.Web w polu tekstowym Name wpisujemy Beehive, a potem klikamy przycisk Add:

Added Beehive class

Do klasy Beehive.cs dodajemy kod jak poniżej. Są to właściwości opisujące ule z naszej pasieki:

Stworzenie klasy, która dziedziczy z DbContext

Prawym przyciskiem myszy klikamy na projekcie AzuronetBees.Web i wybieramy Manage Nuget Packages…. Na zakładce Browse wyszukujemy pakiet Microsoft.EntityFrameworkCore i instalujemy:

Added Microsoft.EntityFrameworkCore

Następnie instalujemy pakiet Microsoft.EntityFrameworkCore.Sqlite:

Added Microsoft.EntityFrameworkCore.Sqlite

W Solution Explorer prawym przyciskim myszy klikamy AngreyBees.Web -> Add -> New Folder. Zmieniamy nazwę NewFolder na Data, a potem klikamy Enter:

Added Data folder

W Solution Explorer prawym przyciskiem myszy klikamy folder Data -> Add -> Class. W oknie Add New Item – AzuronetBees.Web w polu Name wpisujemy BeeContext, a potem klikamy Add:

Added BeeContext class

Do klasy BeeContext.cs dodajemy kod, aby wyglądał jak poniższy:

Added BeeContext class

Dodanie ustawień do Entity Framework Core SQLite

W Solution Explorer klikamy Startup.cs:

Startup class

Modyfikujemy kod w klasie Startup.cs, aby wyglądał jak poniżej:

Modified Startup class

Dodanie obrazków do folderu wwwroot

Prawym przyciskiem myszy klikamy na folderze wwwroot, potem wybieramy opcję Add -> New Folder i zmieniamy jego nazwę na images:

Added images folder

Kopiujemy zdjęcia naszych pszczół i wklejamy do nowo utworzonego folderu images:

Added files to images folder

Użycie metody OnModelCreating do wypełnienia bazy danych

W Solution Explorer, under Data klikamy klasę BeeContext.cs. W klasie BeeContext.cs dodajemy poniższy kod:

Added data
Właśnie dodaliśmy Entity Framework Core do naszej aplikacji.

Użycie Entity Framework Core do pobierania i przechowywania danych

Utworzenie repozytorium

W Solution Explorer, prawym przyciskiem myszy klikamy projekt AzuronetBees.Web –> Add, a potem klikamy New Folder. Zmieniamy nazwę NewFolder na Repositories, a potem naciskamy przycisk Enter:

Utworzenie repozytorium

W Solution Explorer, prawym przyciskiem myszy klikamy folder Repositories –> Add  –> New Item. W panelu ASP.NET Core klikamy Code, a potem, w panelu wynikowym, klikamy Interface. W polu Name wpisujemy IBeeRepository, a potem klikamy Add:

Creating repo

Do pliku IBeeRepository.cs dodajemy poniższy kod:

IBeeRepository

W Solution Explorer, prawy przyciskiem myszy klikamy na folderze Repositories –> Add –> Class. W oknie Add New Item – AzuronetBees.Web w polu tekstowym Name wpisujemy BeeRepository, a potem klikamy przycisk Add:

BeeRepository class

W klasie BeeRepository.cs dodajemy poniższy kod:

BeeRepository class

W Solution Explorer klikamy klasę Startup.cs i dodajemy w niej referencję do naszego repozytorium:

Added namespace

W klasie Startup.cs w metodzie ConfigureServices rejestrujemy naszą usługę:

Service registered

Dodanie metod akcji do kontrolera

W Solution Explorer rozwijamy Controllers, a potem prawym przyciskiem myszy klikamy HomeController.cs i zmieniamy jego nazwę na BeeController.cs:

BeeController

W klasie BeeController.cs modyfikujemy kod jak poniżej:

BeeController

Użycie Entity Framework Core do pobierania danych

W kontrolerze BeeController.cs w metodzie akcji Index dodajemy poniższy kod:

Index action method

W kontrolerze BeeController.cs dodajemy metodę akcji Details:

Details action method

W kontrolerze BeeController.cs dodajemy metodę akcji PopulateBeehivesDropDownList:

PopulateBeehivesDropDownList

Manipulowanie danymi przy użyciu Entity Framework Core

W kontrolerze BeeController.cs dodajemy poniższy kod. Odpowiada on za nasze metody CRUD, czyli tworzenie nowych rodzin, edycję, przeglądanie i usuwanie:

CRUD action methods

Dodanie i modyfikacja widoków

Do folderu css w folderze wwwroot dodajemy plik bee-styles.css. Dodajemy do pliku kod jak poniżej:

CSS file

W Solution Explorer rozwijamy folder Views, a potem prawym przyciskiem myszy klikamy folder Home i zmieniamy jego nazwę na Bee:

Bee view

Otwieramy plik z widokiem Index i modyfikujemy kod jak w tym pliku:

Bee view

Prawym przyciskiem myszy klikamy na folderze Bee -> Add -> View…. Wybieramy opcję Razor View i klikamy przycisk Add:

Added Razor View

Nadajemy nazwę Create naszemu widokowi i klikamy przycisk Add. Teraz modyfikujemy domyślną zawartość naszego widoku jak w tym pliku:

Create view

W podobny sposób dodajemy widok Delete i modyfikujemy jego kod jak w tym pliku:

Delete view

Teraz dodajemy widok Details z kodem jak w tym pliku:

Details view

Na końcu dodajemy widok Edit z kodem jak w tym pliku:

Edit view

Przechodzimy do klasy Startup.cs i modyfikujemy domyślny routing jak poniżej:

Modified Startup class

Uruchomienie aplikacji

W menu FILE klikamy Save All. W menu DEBUG klikamy Start Without Debugging.

W Microsoft Edge, klikamy przycisk Dodaj rodzinę.

Uwaga: przeglądarka wyświetla akcję Create wewnątrz kontrolera BeeController:

Main page

Main page

Przeglądarka przenosi Nas na stronę Dodaj rodzinę pszczelą do pasieki:

Create new object page

Wypełniamy pola danymi i klikamy przycisk Zapisz zmiany:

Added new object

Nowa rodzina pszczela została dodana do naszej pasieki:

Added new object

Wybieramy pszczołę Gema i klikamy link Szczegóły. Przeglądamy szczegóły rodziny pszczelej i klikamy link Powrót do strony głównej:

New object's details

Na stronie Witamy w Pasiece na Roztoczu, wybieramy rodzinę Gema i potem klikamy link Edycja:

Object edited

Na stronie Edytuj rodzinę pszczelą, zmieniamy ocenę ogólną z 9 na 8 i klikamy przycisk Zapisz zmiany:

Object edited

Na stronie Witamy w Pasiece na Roztoczu, wybieramy pszczołę Gema i klikamy link Szczegóły:

Edit confirmed

Sprawdzamy, czy zmiany zostały zapisane i klikamy link Powrót do strony głównej. Na stronie Witamy w Pasiece na Roztoczu, wybieramy rodzinę Gema, a następnie klikamy przycisk Usuwanie:

Delete object

Na stronie Czy na pewno chcesz usunąć tą rodzinę pszczelą? Klikamy przycisk Usuń:

Delete confirmed

Na stronie Witamy w Pasiece na Roztoczu weryfikujemy, że rodzina pszczela została usunięta:

Main page

Zamykamy przeglądarkę.

Wdrażanie aplikacji na platformie Azure

Klikamy prawym przyciskiem myszy na projekcie w Solution Explorer i wybieramy polecenie Publish…. W oknie dialogowym Publish wybieramy pozycję Azure, a potem klikamy przycisk Next:

Publish Azure

W oknie dialogowym Publish wybieramy Azure App Service (Windows), a następnie klikamy przycisk Next:

Azure App Service

W oknie dialogowym Publish wybieramy subskrypcję i klikamy znak + obok App Service instances:

App service instances

W oknie dialogowym App Service (Windows) podajemy nazwę, wybieramy subskrypcję i albo tworzymy nową albo wybieramy istniejącą grupę zasobów:

App Service (Windows)

Klikamy link New obok pola Hosting Plan. Mamy do wyboru kilka różnych planów hostingowych. Wypełniamy pola i klikamy przycisk OK:

Hosting plan

W oknie dialogowym App Service (Windows) sprawdzamy poprawność wprowadzonych danych i klikamy przycisk Create:

New hosting plan created

Po zakończeniu tworzenia okno dialogowe jest automatycznie zamykane i zostajemy ponownie przeniesieni do okna dialogowego Publish. Możemy zobaczyć, że wszystkie nasze zmiany zostały zastosowane. Klikamy przycisk Zakończ.

Publish confirmed

Następnie zostanie wyświetlona strona Podsumowania profilu publikowania. Na tej stronie klikamy przycisk Publish:

Publish confirmed

Visual Studio publikuje aplikację na platformie Azure:

Publish to Azure

Po zakończeniu wdrażania aplikacja zostanie otwarta w przeglądarce i wskazuje na adres Azure’owy:

Application on Azure ready to use

Kod do utworzonej tutaj aplikacji znajduje się na Githubie.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *