ASP.NET MVC #1 – Konfiguracja

Poprzedni wpis był jedynie wstępem i zarysem do całej serii. Dzisiaj już na serio rozpoczyna się kurs.

W pierwszej części kursu ASP.NET MVC powiem co nieco o sprawie podstawowej czyli o konfiguracji środowiska. Pokażę jak utworzyć projekt. Co w nim poustawiać. Oraz krótko powiem co gdzie się znajduje.

1. Nowy projekt

Bez zbędnego przeciągania zaczynamy.

Uruchom Visual Studio.

Aby utworzyć nowy projekt wybierz „New project…” na karcie startowej, albo z górnego menu wybierz „File->New->Project…„. Powinieneś zobaczyć okno pokazane poniżej.

Tutaj odnajdź pozycję „ASP.NET Web Application (.NET Framework)„. Możesz zawęzić poszukiwania wybierając po lewej stronie kategorię „Web” :)

Wpisz nazwę aplikacji w pole „Name:„. U mnie to będzie „ToDo” w miejscu „WebApplication1„. Wybierz też folder, w którym zapisany będzie projekt.

Teraz można kliknąć „Ok” i przejść dalej.

W tym momencie powinieneś zobaczyć takie okno:

Domyślnie wybrane jest to co nas interesuje, a więc szablon dla aplikacji „MVC„, biblioteki „MVC” (podkreślenie po lewej stronie u dołu) i autentykacja użytkowników za pomocą zwykłych kont zakładanych w aplikacji (podkreślenie prawej stronie). Klikając „Change Authentication” możesz zobaczyć jakie jeszcze możliwości logowania się w aplikacji udostępnia framework.

Kliknij „Ok„.

Po chwili zobaczysz, że framework gratuluje Ci utworzenia projektu. Po prawej (mówię o moim przypadku i domyślnym ustawieniu IDE) mamy widok plików i katalogów naszego projektu.

2. Struktura projektu

Czas zająć się folderami widocznymi w Solution Explorerze.

Na pierwszy rzut oka może się wydawać, że jest tego sporo jak na dopiero co utworzony projekt jednak bez obaw, wszystko po to, żeby potem było prościej.

Jeśli chodzi o pozycje, które nas jakkolwiek interesują to podzieliłem je na dwie kategorie i prezentują się one następująco:

2.1 Elementy konfiguracji

• Properties – klikając dwukrotnie na tą pozycję otwierasz opcje projektu, do których możesz się też dostać z górnego menu. Dodatkowo jeśli rozwinie się ten wpis to można się dostać do pliku .cs, w którym jest możliwość wpisania takich informacji jak wersja aplikacji czy autor.
• References – w tym miejscu, po rozwinięciu, masz listę wszystkich dodanych do projektu referencji, czy to do zewnętrznych bibliotek czy innych projektów w solucji. Możesz tam sprawdzić zarówno to czy jakaś biblioteka na pewno jest dodana, jak również podejrzeć jej wersję (klikając daną pozycję w zakładce Properties wyświetlona zostanie m.in. wersja biblioteki).
• App_Data – folder ten przeznaczony jest głównie na przechowywanie baz danych w postaci pliku. Jeśli nie możesz albo nie potrzebujesz korzystać z normalnej bazy SQL Server czy Oracle to możesz tutaj wstawić pliki jakiejś kompaktowej bazy.
• App_Start – w tym folderze znajdują się pliki związane ze startem aplikacji. Np. konfiguracja routingu czy bundlingu. Jeśli jakaś konfiguracja jest wywoływana przy starcie aplikacji to kod za nią odpowiedzialny powinien wylądować w tym miejscu.
• Global.asax – plik, w którym znajduje się metoda uruchamiana podczas startu aplikacji. Tutaj wywoływane są konfiguracje wspomniane w punkcie 4.
• packages.config – plik XML zawierający listę wszystkich zainstalowanych paczek (bibliotek)
• Web.config – plik konfiguracyjny naszej aplikacji. Na początku niewiele będziesz z niego korzystał jednak im dalej tym częściej tam się zagląda. W tym miejscu zapisywany jest np. connection string do bazy danych.

2.2 Elementy logiki i treści

• Content – ten katalog przeznaczony jest na pliki zawartości takie jak style CSS czy obrazki używane na stronie. Jeśli masz jakieś ikonki albo dopisujesz nowe style to będziesz je wrzucał w to miejsce. Jednak polecam w takim wypadku utworzyć podfoldery typu „css”, „img” itd., pozwoli to zachować większy porządek przy rosnącej ilości plików.
• Controllers – Jeden z folderów, z którymi będziesz miał do czynienia najczęściej. W nim znajdują się kontrolery aplikacji MVC. Dodając kolejne strony będziesz dodawał nowe kontrolery, albo modyfikował istniejące.
• fonts – jak sama nazwa wskazuje tutaj lecą pliki z fontami, których używasz w swoim layoucie.
• Models – modele w MVC. O modelach powiem trochę więcej w kolejnych częściach, ale w dużym skrócie tutaj znajdować się będą pliki reprezentujące dane w aplikacji.
• Scripts – kolejny folder, którego nazwa w sumie mówi wszystko. Jest to miejsce zawierające skrypty JS.
• Views – folder z widokami, w końcu coś trzeba użytkownikowi kiedyś wyświetlić. O widokach będzie też później. Struktura katalogów tutaj związana jest z kontrolerami i akcjami w nich zawartymi.
• favicon.ico – ikona wyświetlana np. na karcie przeglądarki.

3. Pierwsze uruchomienie

Właściwie w tym momencie można spokojnie uruchomić projekt. Jednak zanim to zrobisz polecam ustawić jedną rzecz. Otwórz ustawienia projektu. Przejdź do pozycji „Web„. W polu „Project Url” zmień port na jakiś łatwy do zapamiętania, np. „8100„. Dzięki temu chcąc ręcznie wpisać adres w przeglądarce nie będziesz musiał sprawdzać jaki to do cholery port był ;)

Zapisz zmiany.

W górnej części Visual Studio, za pomocą zaznaczonego niżej trójkącika wybierz przeglądarkę, w której uruchomiona zostanie aplikacja. W moim wypadku jest to Google Chrome.

Nareszcie pora na to na co czekałeś zapewne od początku – pierwsze uruchomienie. Kliknij przycisk z nazwą wybranej przeglądarki i chwilę poczekaj. Po zbudowaniu projektu zostanie otworzona nowa karta w Twojej przeglądarce, a w niej ujrzysz domyślną stronę, dodawaną wraz z szablonem aplikacji ASP.NET MVC.

Gratulacje. Właśnie uruchomiłeś swój pierwszy, działający projekt webowy :)

Chcąc zatrzymać aplikację i wrócić do edycji kodu wystarczy, że w górnej części Visual Studio klikniesz czerwony kwadracik.

Dużym plusem działania na podstawie szablonu jest to, że po pierwsze mamy od razu gotowy do uruchomienia przykład. Po drugie są już dodane właściwie wszystkie potrzebne na początku biblioteki takie jak Entity Framework czy Bootstrap.

4. Podsumowanie

W tej części pokazałem Ci jak utworzyć projekt i omówiłem strukturę jego folderów.

Podejście prezentowane przeze mnie w tym kursie jest najbliższe temu, które dostajemy na start podczas tworzenia nowego projektu. W przyszłości zapewne poznasz inne sposoby organizacji aplikacji MVC. Jednak zanim do tego dojdzie warto poznać jak to wszystko działa w podstawowej wersji, przewidzianej przez twórców biblioteki. Dlatego jeśli ktoś Ci pokaże, że ma np. inną strukturę katalogów w swoim projekcie ASP.NET MVC to nie znaczy, że robi coś nie tak, po prostu wybrał inną drogę, być może miał ku temu powody ;)

W następnej części zajmiemy się już kodem naszej aplikacji. Wejdziemy w świat widoków i kontrolerów.