#9 Pierwsza aplikacja w ASP.NET MVC

Pierwsza aplikacja w ASP.NET MVC

Myślę, że doszliśmy już do takiego momentu kiedy będziemy w stanie napisać naszą pierwszą mini aplikację w ASP.NET MVC. Każda szanująca się firma powinna mieć na swojej stronie formularz zgłoszeniowy. I właśnie coś takiego zrobimy w ramach naszej pierwszej aplikacji. Bez zbędnych wstępów, zaczynamy.

Krótko opiszę co będziemy robić po kolei:

  • stworzymy nowy kontroler, który będzie „zarządzał” naszą aplikacją. W trakcie rozwoju naszego projektu będziemy dodawali do niego odpowiednie metody akcji,
  • stworzymy także kilka widoków do „komunikacji” z użytkownikiem,
  • napiszę także parę słów o kontroli poprawności danych w formularzu, jak dodawać dodatkowe komponenty do naszego projektu a także jak korzystać z zewnętrznych komponentów typu biblioteka Bootstrap.

Procedura – tworzenie nowego projektu ASP.NET MVC (WebApplication)

Tworzenie nowego projektu ASP.NET MVC (WebApplication) – krok po kroku

(procedury będę tworzył w sytuacji kiedy jakieś działania będziemy wykonywać cyklicznie.)

W tej procedurze pomocniczej opiszę jak utworzyć pusty projekt ASP.NET MVC – WebApplication

  1. Uruchom program Visual Studio Community 2015
    Standardowo na pulpicie znajduje się link

    Visual Studio Community 2015 skrót na pulpicie
    Visual Studio Community 2015 skrót na pulpicie

    opcjonalnie
    klikamy w menu Start (lewy dolny róg w oknie głównym systemu Windows) i w polu wyszukaj programy i pliki wpisujemy Visual Studio i klikamy w opcję Visual Studio 2015

    Uruchamianie Visual Studio 2015 z menu Start
    Uruchamianie Visual Studio 2015 z menu Start

    Po uruchomieniu Visual Studio 2015 zobaczymy „widok główny” aplikacji.

    Visual Studio "widok główny" aplikacji.
    Visual Studio „widok główny” aplikacji.
  2. Aby utworzyć nowy projekt możemy zrobić to na kilka sposobów
    Klikamy na link New Project w oknie głównym aplikacji

    Visual Studio - tworzenie nowego projektu.
    Visual Studio – tworzenie nowego projektu.

    lub wybieramy z menu File opcję New i następnie Project…

    Visual Studio - tworzenie nowego projektu.
    Visual Studio – tworzenie nowego projektu.

    albo możemy skorzystać ze skrótu klawiszowego Ctrl + Shift + N

  3. W oknie New Project z drzewa po lewej stronie wybieramy opcję Templates > Visual C# > Windows > Web. Następnie w środkowym oknie wybieramy opcję ASP.NET Web Application Visual C# i potwierdzamy nasz wybór klikając na przycisk OK

    Visual Studio - okno New Project.
    Visual Studio – okno New Project.
  4. Kolejny krok to wybór szablonu naszego projektu.
    Klikamy w ikonkę Empty później zaznaczamy checkbox przy modelu MVC i potwierdzamy nasz wybór klikając na przycisk OK

    Visual Studio - okno New ASP.NET Project.
    Visual Studio – okno New ASP.NET Project.
  5. W tym momencie Visual Studio tworzy nasz pusty projekt i jego utworzeniu zobaczymy „okno główne” naszego nowego projektu.

    Visual Studio - okno główne pustego projektu PierwszaAplikacja.
    Visual Studio – okno główne pustego projektu PierwszaAplikacja.

#8 Widok

Widok (ang. View)

Widok to jedna z trzech warstwa modelu MVC. W widoku definiujemy co i w jaki sposób będziemy prezentować użytkownikowi. To w widoku definiujemy dynamiczne zmienne które po wywołaniu widoku „uzupełniają się” danymi np. z bazy danych. Przykład prostego widoku, który wyświetla aktualną datę i godzinę. Cała treść, oprócz części pogrubionych, jest wygenerowana automatycznie przy pomocy Visual Studio.

Listing 8.1. Prosty widok (o nazwie Index) do wyświetlenia aktualnej daty
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Aktualna Data</title>
</head>
<body>
    <div> 
        @ViewBag.PokazAktualnaDate
    </div>
</body>
</html>

Poniżej rysunek prezentujący efekt wywołania powyższego widoku w przeglądarce internetowej.

Widok wyświetlający aktualną datę.
Rysunek 8.1. Widok wyświetlający aktualną datę.

Żeby nasz widok mógł wyświetlić aktualną datę i godzinę musieliśmy w kontrolerze w odpowiedniej metodzie ,o takiej samej nazwie jak nasz widok (w tym przypadku jest to widok i metoda o nazwie Index), zdefiniować właściwość ViewBag.PokazAktualnaDate w zaprezentowany poniżej sposób.

ViewBag.PokazAktualnaDate = DateTime.Now;

Poniżej treść kontrolera Home i metody Index

Listing 8.2. Kod kontrolera Home i metody Index
public class HomeController : Controller 
{
    public ViewResult Index() 
        {
            ViewBag.PokazAktualnaDate = DateTime.Now;
            return View();
        }
}

Teraz „zdanie” wyjaśnienia jak to się dzieje, że w przeglądarce internetowej wyświetla się aktualna data i godzina.

Po uruchomieniu naszej aplikacji poprzez mechanizm rutingu przechodzimy do kontrolera Home i metody Index. Dlaczego właśnie do tego kontrolera i do tej metody? Ano dlatego, że domyślnie to właśnie kontroler Home i metoda Index są domyślnymi wartościami dla domyślnej ścieżki rutingu (patrz listing 1 z części #5 Ruting). Teraz popatrzmy co znajduje się w metodzie Index w naszym kontrolerze Home? Zadeklarowaliśmy tam właściwość ViewBag.PokazAktualnaDate która będzie przechowywała aktualną datę i godzinę w momencie wywołania oraz metodę View() która wywoła widok o nazwie Index, bo tak nazywa się nasza metoda w której wywołujemy metodę o nazwie View. Zgodnie z powyższym w naszej przeglądarce w momencie wywołania widoku Index pojawi się aktualna data i godzina.

#7 Model

Model (ang.model)

Modele to zdefiniowane przez nas klasy odzwierciedlające strukturę danych w naszym projekcie, powiedziałbym nawet, że opisują/przenoszą na grunt informatyczny kawałek rzeczywistości którą musimy oprogramować. Proste modele będą tylko reprezentować dane, które później mogą być wyświetlane użytkownikowi. Możemy jednak tworzyć bardziej rozbudowane modele które zawierają w sobie logikę biznesową naszej aplikacji, ale wszystko po kolei.

Model MVC. Interakcje.
Rysunek 7.1. Model MVC. Interakcje.

Przykład prostego modelu:

Opis: Chcielibyśmy stworzyć aplikację która m.in. zawiera formularz kontaktowy. Czyli do wysłania takiej wiadomości musi być stworzony formularz na stronie www, który zawiera najczęściej takie pola jak: imię i nazwisko lub nick, adres e-mail, temat zgłoszenia i opis problemu. W takiej sytuacji nasz model reprezentujący taki formularz mógłby wyglądać tak.

public class MojProgram
    {
        public string Name { get; set; }
        public string Email { get; set; }
        public string Title { get; set; }
        public string Description { get; set; }
    }

#6 Kontroler

Kontroler (ang. controller)

Kontrolery to nic innego jak klasy C# których zadaniem jest obsługa żądań użytkowników (zwykle dziedziczy po klasie System.Web.Mvc.Controller). Kontroler w pierwszej kolejności odbiera dane wejściowe od użytkownika następnie je przetwarza i analizuje.

Skoro kontroler to klasa, to w „środku” musi mieć jakieś metody. Wewnątrz kontrolera wszystkie metody publiczne nazywamy metodami akcji i to za ich pomoc możemy „sterować” aplikacją. Zgodnie z konwencją MVC, aby ułatwiać sobie życie, wszystkie kontrolery należy umieszczać w katalogu Controllers w naszym projekcie (w oknie Solution Explorer), który jest automatycznie tworzony wraz z naszym nowym projektem. Tak jak w życiu jeśli masz wypracowaną jakąś własną konwencję to możesz ją stosować ale zaleca się stosowanie tej ogólnie przyjętej. Jeśli chodzi o nazywanie kontrolerów to przyjęło się że do nazwy kontrolera dodajemy słówko Controller np. HomeController. Z resztą Visual Studio sam proponuje nam przy tworzeniu kontrolerów używanie właściwej konwencji, co obrazuje poniższy zrzut.

ASP.NET MVC Kontrolery
Obrazek 6.1. ASP.NET MVC Kontrolery (nazewnictwo kontrolerów).

 

Na co wpływa kontroler?
Kontroler wpływa zarówno na model i widok. Po analizie danych wejściowych może on np. zaktualizować model oraz odświeżyć widok. Można powiedzieć, że za pomocą kontrolera możemy kontrolować co się w aplikacji dzieje (za pomocą metod akcji które zawiera kontroler).

Jak tworzymy/dodajemy kontrolery do projektu?
W oknie Solution Explorer klikamy na folderze Controllers prawym przyciskiem myszy (zwanym dalej PPM) i z menu kontekstowego wybieramy opcję Add a następnie z kolejnego menu Controller.

Poniżej przykład kontrolera o nazwie HomeController, który zwraca widok metody Index

    public class HomeController : Controller
    {
        public ViewResult Index()
        {
            return View(); // zwraca widok dla metody Index
        }
    }

 

#5 Routing

Ruting (ang. Routing)

Jednym z podstawowych mechanizmów w technologii ASP.NET MVC jest mechanizm Routingu. To tu tak naprawdę wszystko się zaczyna. Jest to pierwsze miejsce gdzie następuje przetwarzanie żądania które jest wysyłane do serwera. Routing odpowiada za przekierowanie żądania użytkownika wysłane z przeglądarki do odpowiedniego kontrolera i odpowiedniej metody, która będzie odpowiedzialna za obsłużenie tego żądania.

Nasz aplikacja, po otrzymaniu żądania, pierwsze co robi to sprawdza czy w pliku RouteConfig.cs, znajdującego się w katalogu App_Start naszego projektu, jest ścieżka do odpowiedniego kontrolera i metody. Lokalizację pliku RouteConfig.cs przedstawia obrazek poniżej.

RouteConfig. Lokalizacja pliku w Solution Explorer.
Obrazek 1. RouteConfig. Lokalizacja pliku w Solution Explorer.

 

Zobaczmy co zawiera plik RouteConfig.cs. Możemy go podejrzeć klikając na ten plik lewym przyciskiem myszy (dalej lewy przycisk myszy będziemy w skrócie nazywać LPM).

ASP.NET MCV zawartość RouteConfig.cs
Obrazek 2. ASP.NET MCV zawartość RouteConfig.cs

powyższy kod do pobrania tutaj listing 01. RouteConfig.cs

Zwróćmy uwagę na tą część

routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { 
                     controller = "Home", 
                     action = "Index", 
                     id = UrlParameter.Optional }
            );

wiersz name: „Default” informuje aplikację, że jest to domyślna trasa. Jeżeli w adresie URL nie wpiszemy jaki kontroler i jaką metodę chcemy wywołać to zostanie wywołany kontroler Home o czy mówi ten fragment controller = „Home” oraz metoda Index o czym mówi ten fragment action = „Index”. Zwróćmy uwagę na fragment url:”{controller}/{action}/{id}”. Opisuje on możliwą do podania strukturę adresu URL. Po wpisaniu adresu strony (naszej aplikacji) możemy podać z jaki kontroler i jaką metodę chcemy wywołać np. URL http://localhost:50181/home/index mówi tyle, że chcemy wywołać metodę Index z kontrolera Home.

Więcej o tworzeniu tras w dalszej części kursu.


Nysa.Anonco.Pl : darmowe ogłoszenia drobne, wyniki lotto, cytaty, powiedzenia, kawały i wiele innych

#4 Visual Studio Community 2015 podstawowe modułu.

Visual Studio Community 2015 – podstawowe moduły

W poprzedniej części instalowaliśmy Visual Studio Community 2015. Teraz uruchomimy to narzędzie i omówię jego główne modułu z których będziemy korzystali.
Po uruchomieniu Visual Studio zobaczymy ekran jak na obrazku poniżej.

Visual Studio Community 2015 - widok główny.
Obrazek 1. Visual Studio Community 2015 – widok główny.

 

Na początku stworzymy pusty projekt abym mógł opisać poszczególne moduły/okienka Visual Studio 2015.

Aby utworzyć nowy pusty projekt możemy w głównym widoku kliknąć na link New Project lub na pasku menu wybrać opcję File później New i później Project lub wykorzystać skrót klawiszowy Ctrl+Shift+N.

Po wybraniu któregoś z ww. sposobów otworzy się okno o nazwie New Project i z drzewka po lewej stronie wybieramy opcję Templates > Visual C# > Web i w okienku po prawej wybieramy opcję ASP.NET Web Application (obrazek 2).

Visual Studio 2015 - tworzenie nowego projektu.
Obrazek 2. Visual Studio 2015 – tworzenie nowego projektu.

W oknie tym możemy także wpisać nazwę naszego projektu (pole Name) oraz lokalizację plików naszego projektu (pole Location). Po wybraniu i wpisaniu wszystkich danych klikamy na przycisk OK w prawym dolnym rogu.

Kolejny krok to wybranie szablonu naszej aplikacji. My wybieramy szablon Empty i zaznaczamy checkbox przy słówku MVC poniżej, zgodnie z obrazkiem 3 i klikamy na przycisk OK.

Visual Studio 2015 - wybór szabony projektu.
Obrazek 3. Visual Studio 2015 – wybór szablonu projektu.

 

Następny obrazek pokazuje widok główny po stworzeniu nowego pustego projektu MVC.

Visual Studio 2015 - widok nowego pustego projektu MVC.
Obrazek 4. Visual Studio 2015 – widok nowego pustego projektu MVC.

 

Po utworzeniu nowego projektu mogę pokazać Wam gdzie znajdują się główne modułu do zarządzania naszym projektem.

Pierwszy z nich to Solution Explorer (obrazek 5) który znajduje się po prawej stronie okna głównego. To za jego pomocą możemy zarządzać strukturą naszego projektu. To w nim dodajemy nowe elementy lub usuwamy niepotrzebne np. foldery, klasy, kontrolery itd.

Solution Explorer w Visual Studio 2015.
Obrazek 5. Solution Explorer w Visual Studio 2015.

Jeśli nie mamy „na wierzchu” tego elementu możemy skorzystać ze skrótu klawiszowego Ctrl+Alt+L lub z menu View wybrać opcję Solution Explorer.

Kolejnym elementem w widoku głównym aplikacji jest okno „główne” gdzie będziemy edytować pliki naszego projektu. Kliknijmy dla zobrazowania w plik Global.asax w Solution Explorerze i zobaczymy, ze w oknie „główny” pojawiła się treść tego pliku. W tym momencie możemy edytować zawartość tego pliku (obrazek 6).

Visual Studio 2015 okno "główne".
Obrazek 6. Visual Studio 2015 okno „główne”.

 

Po lewej okna głównego aplikacji możemy zauważyć napis Server Explorer po jego kliknięciu rozwinie się dodatkowe okienko o tej nazwie. Za pomocą Server Explorera będziemy mogli dodawać źródła danych do naszego projektu. Będziemy mogli także zarządzać naszą bazą danych. Ja bym to określił jako mini SQL Server. Po podłączeniu się ze źródłem danych będziemy mogli nawigować po wybranej bazie danych, przeglądać tabele, tworzyć nowe lub modyfikować istniejące, ale o tym później.

Server Explorer w Visual Studio 2015.
Obrazek 7. Server Explorer w Visual Studio 2015.

 

Na sam początek myślę, że wystarczy w trakcie dalszej nauki będziemy poznawać nowe elementy Visual Studio 2015.

 

Poniżej przydatne skróty klawiszowe w Visual Studio Community 2015.

Ctrl+Shift+N utworzenie nowego projektu
Ctrl+Alt+L przejście do elementu Solution Explorer
Ctrl+Alt+S przejście do elementu Server Explorer

następny wpis: #5 Routing

#3 Visual Studio Community 2015 instalacja narzędzia.

Visual Studio Community 2015 – instalacja

Aby móc „bawić” się technologią ASP.NET musimy na początku zainstalować narzędzie Visual Studio. Ponieważ w tym kursie będziemy korzystali z wersji Visual Studio Community 2015 przeprowadzę Was krok po kroku przez proces instalacji właśnie tej wersji VS.

W poprzedniej części pisałem, że plik ISO (który ściągnęliśmy z Internetu) możemy nagrać na płytę DVD lub wykorzystać emulator DVD-ROMu i „zamontować” w nim nasz plik ISO. W systemie Windows będzie on wtedy widoczny tak jakbyśmy włożyli nasze DVD z Visual Studio do napędu DVD-ROM (obrazek 1).

Visual Studio instalacja - uruchomienie instalatora narzędzia.
Obrazek 1. Visual Studio instalacja – uruchomienie instalatora narzędzia.

W celu uruchomienia instalacji wybieramy stację DVD-ROM z Visual Studio i klikamy x2 na plik vs_community.exe.

Po uruchomieniu instalacji powita nas ekran powitalny (obrazek 2).

Visual studio instalacja - ekran powitalny.
Obrazek 2. Visual studio instalacja – ekran powitalny.

 

Po zniknięciu ekranu pojawi się nowe okno gdzie będziemy mogli wybrać miejsce instalacji Visual Studio, część Choose your installation location oraz typ instalacji, część Choose your type of installation. Jeżeli chodzi o lokalizację to proszę nie sugerujcie się lokalizacją z obrazka z uwagi na to, że jest to moja wybrana lokalizacja. Wy możecie zostawić lokalizację domyślną na dysk C. Natomiast jeżeli chodzi o typ instalacji wybieramy opcję Default i klikamy na przycisk Install, zgodnie z obrazkiem 3 (pamiętaj oczywiście musisz mieć uprawnienia administratora na danej maszynie aby móc zainstalować Visual Studio).

Visual Studio 2015 instalacja - wybór lokalizacji i typu instalacji.
Obrazek 3. Visual Studio 2015 instalacja – wybór lokalizacji i typu instalacji.

 

W tym momencie następuje tak naprawdę instalacja oprogramowania Visual Studio 2015 na Twojej maszynie. Wraz z trwaniem procesu instalacji instalator informuje nas co w danym momencie robi, jaki moduł aktualnie jest instalowany (obrazek 4). Na zrzucie widzimy, że instalator w momencie zrzutu ekranu tworzył punkt przywracania systemu (Creating a system restore point…).

Visual Studio 2015 instalacja.
Obrazek 4. Visual Studio 2015 instalacja.

 

Kolejny zrzut ekranu z instalacji (obrazek 5).

Visual Studio 2015 proces instalacji.
Obrazek 5. Visual Studio 2015 proces instalacji.

 

Po instalacji pojawia się ekran z informacją o prawidłowym przebiegu procesu instalacji (obrazek 6). Aby uruchomić Visual Studio 2015 klikamy w przycisk lauch.

Visual Studio 2015 zakończenie instalacja.
Obrazek 6. Visual Studio 2015 zakończenie instalacja.

 

Na kolejnym obrazku widać uruchomione Visual Studio Community 2015.

W kolejnej części będę omawiał podstawowe moduły Visual Studio 2015.
#kurs ASP.NET MVC #4 Visual Studio Community 2015 podstawowe modułu – tutorial kurs

#2 Visual Studio, narzędzie wspomagające tworzenie projektów w ASP.NET MVC

Visual Studio Community 2015

Do tworzenia naszych projektów (aplikacji) będzie nam potrzebne jakieś narzędzie które nam w tym pomoże. W trakcie tego kursu będę korzystał z narzędzia Visual Studio Community 2015 które można pobrać ze stron Microsoftu tutaj. Po kliknięciu w link powinno przekierować Cię na stronę z Visual Studio i automatycznie powinno rozpocząć się ściąganie pliku vs_community_ENU.exe. Jest to plik uruchamiający internetową instalację narzędzia Visual Studio (w chwili tworzeni kursu jest to wersja Visual Studio Community 2015).

Jeśli chcielibyśmy ściągnąć cały obraz w postaci pliku ISO można to zrobić tutaj. Po kliknięciu na link pojawi się okienko Otwieranie vs_community.exe (obrazek 1). W okienku tym wybieramy przycisk Anuluj, w przeciwnym przypadku zapiszemy plik instalatora sieciowego.

Visual Studio Community 2015 instalacja.
Obrazek 1. Visual Studio Community 2015 instalacja.

 

Po wybraniu przycisku Anuluj wrócimy do przeglądarki internetowej i wybieramy link click me jak na obrazku 2.

Visual Studio 2015 downloading
Obrazek 2. Visual Studio 2015 downloading

 

Następnie przejdziemy do strony (obrazek 3) gdzie mamy możliwość wyboru plików do pobrania. My wybieramy drugą opcję vs2015.com_enu.iso i klikamy na link click me.

Visual Studio 2015 downloading.
Obrazek 3. Visual Studio 2015 downloading.

 

W kolejnym oknie (obrazek 4) wybieramy opcję zapisz i klikamy w OK

Instalacja Visual Studio 2015
Obrazek 4. Instalacja Visual Studio 2015

 

a następnie wybieramy lokalizację (wskazujemy miejsce na dysku twardym) dla naszego pliku ISO (obrazek 5).

Wybór lokalizacji pliku.
Obrazek 5. Wybór lokalizacji pliku.

 

Po kliknięciu w przycisk zapisz automatycznie rozpoczyna się pobieranie pliku ISO z Internetu. Po jego zakończeniu mamy dwie opcje. Możemy nasz obraz ISO nagrać na płytę DVD i później otworzyć ją za pomocą DVD-ROM’u, albo skorzystać z jakiegoś programu emulującego DVD-ROM i zmontować w nim plik ISO.

Proces instalacji narzędzia Visual Studio Community 2015 przedstawia następny wpis
#kurs ASP.NET MVC #3 Visual Studio Community 2015 instalacja narzędzia

Aby zapoznać się z podstawowymi modułami Visual Studio Community 2015 zajrzyj do kolejnej części
#kurs ASP.NET MVC #4 Visual Studio Community 2015 podstawowe modułu

#1 Co to jest ASP.NET? I z czym to się je?

Co to jest ASP.NET

Niestety kilka suchych faktów należy podać :) Postaram się jednak zrobić to „w pigułce”. Więc do dzieła!

Co to jest w ogóle ASP.NET?

Jest to zbiór technologii zaprojektowanych przez firmę Microsoft służących głównie do budowy aplikacji internetowych. Możemy wyróżnić tutaj generalnie trzy technologie: Web Forms, Web Pages i właśnie MVC, którą to technologią zajmiemy się w przedmiotowym kursie.

Co oznacza skrót MVC?

Skrót ten oznacza Model-Widok-Kontroler (ang. Model-View-Controller). Jest to wzorzec projektowy za pomocą którego organizujemy strukturę naszej aplikacji. Model ten przewiduje podział aplikacji na trzy części:

  • Model – organizuje/zawiera logikę biznesową naszej aplikacji (PAMIĘTAJ: MODEL==LOGIKA BIZNESOWA)
  • Widok – definiuje co i w jaki sposób ma być wyświetlone użytkownikowi, tzw warstwa prezentacji (innymi słowy widok jest odpowiedzialny za prezentację użytkownikowi wyników działania logiki biznesowej)
  • Kontroler – zapewnia komunikację z użytkownikiem (obsługuje żądania użytkowników i przekierowuje/deleguje je do odpowiednich metod modelu), aktualizuje model i odświeża widoki.

W kolejnych częściach kursu będziemy rozwijać naszą wiedzę na ten temat.

Przejdź do kolejnej lekcji kursu
#kurs ASP.NET MVC #2 Visual Studio, narzędzie wspomagające tworzenie projektów w ASP.NET MVC