#08 Dodanie kontrolera i widoku | Kurs ASP.NET MVC 5

Mamy już model w naszej aplikacji ASP.NET MVC 5, który w przypadku pierwszego użycia zostanie odzwierciedlony w bazie danych. Przyszedł czas, aby napisać kontroler korzystający z naszej klasy, tym właśnie zajmiemy się w tym wpisie. Zaimplementujemy dwie akcje oraz współpracujące z nimi widoki. Jedna z akcji będzie umożliwiała wyświetlenie wszystkich rekordów tabeli, a druga zezwoli nam na dodanie danych do tej tabeli. Przed przeczytaniem artykułu polecam odświeżenie informacji na temat kontrolerów w artykule o modelu MVC w aplikacji ASP.NET MVC 5. Nieodłącznym tematem poruszanym przy kontrolerach jest routing. Na nasze szczęście mamy już to za sobą, jeśli ktoś ma intencję to polecam prześledzić odpowiednią część artykułu Life Cycle ASP.NET MVC 5.

Utworzenie kontrolera

Przyszedł czas na dodanie pierwszego kontrolera do naszego programu. Budowałem napięcie jak drogowcy nasze autostrady, ale czas rozwiązania nareszcie nadszedł 🙂 Klikamy prawym przyciskiem myszy na folder Controllers, następnie AddController. Z okna, które ukazało się naszym oczom wskazujemy pierwszą możliwość MVC5 Controller – Empty.

Dodanie kontrolera ASP.NET MVC 5

Dodanie kontrolera ASP.NET MVC 5

Następnie należy wybrać nazwę dla naszego kontrolera. Użytkownicy będą jej używać w adresie URL do wywołania akcji (www.jakasstrona.pl/Kontroler/jakasAkcja). Nikogo nie zaskoczę wybierając na nazwę kontrolera słówko Cars.

Nazywanie kontrolera ASP.NET MVC 5

Nazywanie kontrolera ASP.NET MVC 5

Otrzymaliśmy klasę dziedziczącą po Controller (jak każdy kontroler aplikacji ASP.NET MVC). Jak widzimy poniżej zawiera ona domyślnie akcję Index().

Skompilujmy naszą aplikację i wpiszmy w pole adresowe przeglądarki www.localhost.pl/:twójPort/Cars/Index. Jak się zapewne spodziewacie pojawia się nam… błąd. Dlaczego? Nie utworzyliśmy widoku dla naszej akcji. Musimy go utworzyć w Views/Cars. Katalog Cars przynajmniej w moim przypadku utworzył się automatycznie, jeśli się tak nie stało należy go utworzyć.

Struktura projektu ASP.NET MVC 5

Struktura projektu ASP.NET MVC 5

Utworzenie widoku dla akcji

Otwieramy nasz plik CarsController.cs klikamy prawym przyciskiem myszy na naszą akcję Index(), następnie Add View. W tym przykładzie zostawmy wszystko przy wartościach domyślnych, odznaczając jedynie Use a laout page.

Dodanie widoku ASP.NET MVC 5

Dodanie widoku ASP.NET MVC 5

Możemy teraz uruchomić naszą aplikację, przeglądarka wyświetla nam… pusta stronę HTML, tak pustą stronę. Dzieję się tak ponieważ to zawiera nasz plik .cshtml. Dodajmy jakiś tekst w body naszego widokuOdświeżamy stronę (w przypadku zmian w widoku nie musimy ponownie kompilować aplikacji), powinniśmy ujrzeć wprowadzone zmiany.

Przekazywanie danych do widoku

Przekazanie danych do widoku odbywa się najczęściej poprzez:

  • ViewData[„jakasZmienna”],
  • ViewBag.jakasZmienna,
  • Strongly typed view,
  • można jeszcze do tego zestawienia dodać dane zwracane przez akcję w intrukcji return.

ViewData, ViewBag

Wartości przekazywane są w najprostszy sposób, w przypadku ViewData w nawias klamrowy wpisujemy nazwę zmiennej, do której zostanie przypisana wartość po prawej stronie. Natomiast w przypadku ViewBag, definiujemy zmienne tak jakby były właściwościami klasy. ViewBag jest implementacją ViewData, przez co można odczytać tą samą zmienną za pomocą ViewBag, jeśli była definiowana za pomocą ViewData i na odwrót, ale jest to nieestetyczne. Za ich pomocą można przesyłać zarówno typy proste jak i złożone. Przykład implementacji w naszym kontrolerze:

Analogicznie w widoku korzystamy z przekazanych danych:

Strongly typed view

W tym podejściu każdy widok jest skojarzony z jakimś modelem, którego implementację otrzymuje od kontrolera. Nie ma w tym nic trudnego zmodyfikujmy naszą akcję kontrolera jak poniżej:

Ważne jest zauważenie, że obiekt klasy Cars został zwrócony do widoku, gdzie go przechwycimy. Aby skojarzyć widok z odpowiednim modelem i przechwycić ewentualny obiekt musimy na jego początku dodać linijkę:

Dzięki temu, że model jest wcześniej zdefiniowany w postaci klasy, znamy jego pola, środowisko zapewnia nam kontrolę typów, pracujemy w widoku na modelu jak na obiekcie.

Modyfikacja akcji Index()

W tym akapicie zmodyfikujemy tak akcję Index(), aby wykonywała to o czym pisałem we wstępie, mianowicie wyprowadzała wszystkie rekordy z tabeli Cars. Jak dowiedzieliśmy się wcześniej odpowiedzialną za zmiany oraz komunikację z naszą bazą danych jest utworzona przez nas w modelu Cars klasa CarDBCtxt:

W celu zapewnienia owej komunikacji w kontrolerze Cars utworzymy obiekt klasy CarDBCtxt:

Mamy już naszego posłańca, wyślijmy go do tabeli po jej wszystkie wiersze. Zmodyfikujmy akcję Index() jak poniżej, żądamy od tabeli Cars jej całej zawartości, którą przekażemy do widoku naszej akcji:

Pozostało nam teraz tylko obsłużyć odpowiednio przekazaną listę (ToList()) w widoku. Będę chciał iterować po przekazanej liście za pomocą pętli foreach, aby to sobie umożliwić poinformuję już na wstępie widok, że ma kontakt z obiektem implementującym interfejs IEnumerable (ToList()):

Następnie utworzę prymitywną tabelę, w której wypiszę ID Model każdej krotki z tabeli. Podobnie jak w ostatnim przykładzie tutaj także wykorzystujemy strongly typed view, spróbujcie sami to napisać i zobaczcie jak bardzo ułatwia to programowanie.

Uff, piszę ten artykuł po kilkunastogodzinnej przerwie, mam nadzieję, że da się coś z tego wynieść 🙂 Podsumowując wszystko, co do tej pory zrobiliśmy wiemy jak dodawać kontroler, widok, wymieniać dane pomiędzy widokiem, a kontrolerem, w końcu mamy kontroler i widok, który obsypuje nas zawartością klasy Cars, no właśnie zawartością :). Udowodnijmy sobie, że to co zrobiliśmy, działa, dodajmy jeszcze jedną akcję, która wprowadzi wersy do tabeli Cars.

Dodanie akcji Create()

Zanim dodamy ową akcję chce poruszyć temat przekazywania parametrów do kontrolera i możliwości ich odbioru.

Przekazanie parametrów do kontrolera

Jednym ze sposobów w jaki możemy przesłać parametr do kontrolera jest podanie parametru w adresie URL np. www.jakasStrona.pl/kontroler/akcja/parametrZapewnia nam to domyślna reguła routingu. Dodajmy własną regułę, która będzie wykorzystywana, gdy przekażemy dwa parametry po kontrolerze i akcji www.jakasStrona.pl/kontroler/akcja/parametr1/parametr2:

 Odbieranie parametrów przez kontroler

Parametry przechwycone przez powyższą regułę routingu możemy wykorzystać w akcji kontrolera. Dodajemy listę parametrów, tak jakbyśmy definiowali zwykła metodę z parametrami.

Utwórzmy teraz akcję, która odpowiedzialna będzie za dodanie danych do tabeli. Nazwijmy ja Create(). Zastanówmy się jak działa dodawanie danych poprzez formularz. Najpierw użytkownikowi wyświetla się formularz, który otrzymuje po wpisaniu adresu www.jakasStrona.pl/jakisKontroler/chcedodacdane. Użytkownik wysyła żądanie tradycyjną metodą GET, że chce otrzymać formularz do wypełnienia, otrzymuje to dzięki pierwszej naszej akcji, która wywoływana jest przy odbiorze żądania wysłanego metodą GET. Załóżmy, że wypełnia poprawnie wszystkie dane i co dalej? Klika button „submit” lub podobne i wysyła dane poprzez metodę POST, przetwarzaniem tego żądania zajmuje się nasza druga akcja Create(), oznaczona jest nawet właściwością [HttpPost]. Przedstawia to poniższy kod, który objaśniłem w komentarzach:

 Dodanie widoku dla kontrolera Create()

Pozostała nam już ostatnia rzecz do zrobienia, dla utworzonej akcji dodajmy widok. Zajmie nam to dosłownie chwilkę, ponieważ skorzystamy z kreatora. Klikamy prawym przyciskiem myszy na akcję Create(), po czym tradycyjnie już wybieramy Add View. Wypełnijmy pola formularza jak na obrazku poniżej (View name: Create, Template: Create, Model class: Car (Samochody.Model), Data context class: CarDBCtxt (Samochody.Models)). Zaznaczmy także Use a layout page, dzięki temu nasz widok zostanie ułożony według szablonu znajdującego się w Shared/_Layout.cshtml.

Dodanie widoku ASP.NET MVC 5

Dodanie widoku ASP.NET MVC 5

Możemy teraz wreszcie przetestować naszą aplikację, skompilujmy projekt i wpiszmy w adres przeglądarki localhost:jakisPort/Cars/Create. Wpiszmy poprawne dane i sprawdźmy jaki będzie wynik. Działa! Zobaczmy jak modyfikuje nam wygląd szablon dołączany do widoku znajdującego się w pliku Create.cshtml, a jak to wygląda, gdy nie dołączyliśmy owego szablonu (Index.cshtml).

Jako, że wyszedł trochę przydługawy artykuł wrzucam kolejno całe pliki Create.cshtml oraz CarsController.cs.

 

Podsumowanie

Przebrnęliśmy przez dodawanie kontrolera, akcji oraz widoków. Wiemy jak przesłać dane do widoku, jak je odebrać, nauczyliśmy się korzystać z półautomatycznych narzędzi wbudowanych w Visual Studio. Prawie bym zapomniał, wreszcie do akcji wkroczyło Entity Framework i utworzyło nam bazę w App_Data, aby zobaczyć plik bazy danych trzeba kliknąć w ikonkę w Solution Explorer Show All Files. W następnym artykule dodamy kontroler używając narzędzia Entity Framework.

Baza w App_Data

Baza w App_Data

Wpis jest cześcią cyklu Kurs ASP.NET MVC 5.

Dodaj komentarz