ASP.NET MVC 4 Widok

1 Zaawansowane programowanie internetowe inter Instrukcja nr 4

1. Cel zajęć Celem lem zajęć jest zapoznanie się z metodami tworzenia widoków w ASP.NET MVC

2. Wprowadzenie Na poprzednich zajęciach stworzyliśmy prostą aplikację pokazującą podstawowe elementy Framework ASP.NET MVC. Dane pomiędzy kontrolerem, a widokiem przekazywane były za pomocą słownika ViewData. Metoda ta, choć prosta ma szereg wad. Po pierwsze, wymaga generowania rowania dużej liczby linii kodu. Po drugie kluczem w słowniku jest łańcuch znaków, więc na etapie kompilacji nie ma możliwości, aby sprawdzić, czy nie pomyliliśmy się przy wprowadzaniu klucza w widoku lub w kontrolerze. Po trzecie słownik ten jako dane przechowuje echowuje obiekty typu object, co wymaga dokonania odpowiedniego rzutowania, poprawności którego również nie jesteśmy wstanie sprawdzić na etapie kompilacji. Po czwarte metoda ta nie pozwala na wykorzystanie możliwości Frameworka ASP.NET MVC w zakresie automatycznego omatycznego generowania widoków. Na dzisiejszych zajęciach poznamy takie elementy platformy ASP.NET MVC jak: • • • •

Widoki o ścisłej kontroli typów (Strongly-Type (Strongly Views) Widoki częściowe o ścisłej kontroli typów (Strongly-Type (Strongly Type Partial Views) Szablony Helpery

3. Zadanie Proszę przebudować aplikację, która była utworzona na poprzednich zajęciach, tak aby wykorzystywała elementy widoków wspomnianych w poprzednim punkcie. W tym celu należy wykonać odpowiednie kroki:

I. Przygotowanie projektu a) Otwieramy projekt przygotowany na poprzednich zajęciach. b) Otwieramy okno Solution Explorer i usuwamy z niego wszystkie elementy jakie w znajdują się w katalogach Views/Osoba oraz Views/Telefon. W tym celu należy zaznaczyć wszystkie pliki znajdujące się w tych katalogach i nacisnąć n klawisz Del.

2 Zaawansowane programowanie internetowe inter Instrukcja nr 4

II. Przygotowanie kontrolera a) Otwieramy kontroler OsobaController i ze wszystkich metod usuwamy odwołania do słownika ViewData, w rezultacie powinniśmy otrzymać kod (pokazane są tylko te metody, które uległy modyfikacji): public ActionResult Index() { return View(); } public ActionResult Details(int id) { OsobaModel osoba = _osoby.ZwrocOsobyWgID(id); return View(); } public ActionResult Edit(int id) { OsobaModel osoba = _osoby.ZwrocOsobyWgID(id); return View(); } b) Następnie dalej modyfikujemy te metody, tak aby otrzymać następujący kod: public ActionResult Index() { List List > dane = _osoby.ZwrocOsoby(); return View(dane); } public ActionResult Details(int id) { OsobaModel osoba = _osoby.ZwrocOsobyWgID(id); osoby.ZwrocOsobyWgID(id); List List > numeryTelefonow = _telefony.PobierzTelefonyDlaOsoby(id); return View( new SzczegolyOsoby { Osoba = osoba, NumeryTelefonow = numeryTelefonow }); } public ActionResult Edit(int id) { OsobaModel osoba = _osoby.ZwrocOsobyWgID(id); return View(osoba); } W kodzie tym należy zwrócić uwagę na następujące elementy:
przekazanie obiektów modelu następuje nie poprzez słownik ViewData, ViewData lecz bezpośrednio do widoku (z wykorzystaniem odpowiedniej, przeciążonej wersji metody View(). Pozwoli to na bezpośrednie odwoływanie się do obiektu (czy jak w tym przypadku kolekcji obiektów) w widoku. 3 Zaawansowane programowanie internetowe inter Instrukcja nr 4



W przypadku metody Details chcemy, aby na jednym jednym formularzu wyświetlały się jednocześnie informacje o osobie oraz jej numery telefonów. Ponieważ do widoku można przekazać tylko jeden obiekt, konieczne jest utworzenie nowej klasy (w tym przypadku SzczegolyOsoby), Szczegoly ), która będzie łączyła informacje o osobie ie z jej numerami telefonów. Ustawiając odpowiednie właściwości tej metody jesteśmy wstanie przekazać do widoku pojedynczy obiekt zawierający wszystkie wymagane informacje.

Powyższy kod oczywiście się nie skompiluje ponieważ nie istnieje klasa SzczegolyOsoby. Szczegoly Aby to zmienić do katalogu Models dodajemy nową klasę, która będzie zawierała poniższy kod: public class SzczegolyOsoby { public OsobaModel Osoba { get; set; } public List List > NumeryTelefonow { get; set; } }

III. Stworzenie widoków dla akcji Index, Create, Edit Po poprawieniu kontrolera, możemy przygotować odpowiednie widoki dla poszczególnych akcji. a) Podobnie jak w poprzednim tygodniu klikamy prawym klawiszem myszy wewnątrz metody Index i wybieramy opcję Add View. View b) W wyświetlonym oknie dialogowym ustawiamy opcje jak pokazano na rysunku poniżej:

Zaznaczenie pola „Create a strongly-typed strongly typed view” oznacza, że chcemy stworzyć widok o ścisłej kontroli typów. Wymaga to wybrania z listy rozwijanej „View data class” wybrania odpowiedniej klasy modelu w tym przypadku „OsobaModel”. 4 Zaawansowane programowanie internetowe inter Instrukcja nr 4

Dodatkowo możemy określić czy chcemy, aby Visual Studio automatycznie wygenerował kod widoku za nas (wybierając odpowiedni rodzaj widoku z kolejnej listy rozwijanej), czy też nie (wybierając (wybierając pozycję „Empty”). c)

Klikając przycisk Add zostanie dla nas wygenerowany widok, którego kod przedstawiony jest poniżej:

runat Index runat Index ID Imie DrugieImie DrugieImie Nazwisko Nazwisko | | %>

Powyższy kod jest w zasadzie kompletnym kodem naszego widoku, należy jedynie wypełnić pola, które są zaznaczone jako komentarz. W polach tych podajemy jaka wartość ma być przekazana do akcji Edit, Details i Delete jako wartość identyfikująca konkretny rekord. rekord. We wszystkich trzech miejscach zamiast komentarza podajemy: id=item.ID.

5 Zaawansowane programowanie internetowe inter Instrukcja nr 4

d) Jak łatwo zauważyć w widoku tym generowana jest tabela, która w pierwszym wierszu będzie zawierała nagłówki odpowiednich kolumn. Wyświetlane wartości zostały wygenerowane na podstawie podstawie nazw właściwości klasy, którą wybraliśmy w oknie dialogowym opisywanym w punkcie b). Jednak czasem będziemy chcieli, aby wartości te były inne niż automatycznie wygenerowane (np. w przypadku kolumny „DrugieImie” było by dobrze, aby oba wyrazy były napisane osobno i bez błędu. Niestety zmianę tę należy wykonać ręcznie. Dodatkowo można usunąć kolumnę ID, gdyż wartość ta nie ma znaczenia dla użytkownika. e) Warto również zwrócić uwagę na wykorzystaną w tym widoku metodę Html.ActionLink Jest to jedna z tzw. Helperów, czyli metod, których Html.ActionLink. któ zadaniem jest uproszczenie generowania odpowiedniego kodu HTML, w tym przypadku odnośnika do odpowiedniej akcji w naszej aplikacji. W dalszej części zajęć spotkamy się jeszcze z kilkoma metodami z tej klasy, jednak proszę o bardziej szczegółowe zapoznanie się z tymi metodami na podstawie dokumentacji lub informacji w Internecie. f) Zanim stworzymy widoki dla akcji Create i Edit dokonajmy pewnej zmiany klasy OsobaModel zgodnie z kodem przedstawionym poniżej: clas OsobaModel public class { public int ID { get; set; } public string Imie { get; set; } [DisplayName DisplayName("Drugie imię")] public string DrugieImie { get; set; ; } public string Nazwisko { get; set; } } Zmiana ta pozwoli, aby w kolejno utworzonych widokach, dla właściwości DrugieImie etykieta była generowana nie na podstawie jej nazwy, tylko na podstawie tekstu podanego w atrybucie DisplayName. Atrybut ten wymaga dołączenia do pliku z klasą OsobaModel prz przestrzeni nazw: System.ComponentModel. g) Tworzymy dwa nowe widoki odpowiednio dla akcji Create i Edit. W oknie dialogowym również zaznaczamy opcję „Create a strongly-typed strongly view”, jako model wybieramy klasę OsobaModel, OsobaModel, a na liście rozwijanej „View content” zaznaczamy opcję odpowiadającą tworzonemu widokowi. h) Jeżeli przyjrzymy się jaki kod został dla nas wygenerowany zobaczymy, cały zestaw metod z klasy Html, które mają pomóc w generowaniu formularza na podstawie przekazanego obiektu. Jakie funkcje pełnią poszczególne poszczególne metody można się łatwo domyślić na podstawie ich nazw. i) Z obu tych widoków usuwamy kod dotyczący zmian parametru ID: class model.ID) %> class model.ID) %> model.ID) %>

6 Zaawansowane programowanie internetowe inter Instrukcja nr 4

IV. Stworzenie widoku dla akcji Details Tworzenie widoku dla akcji Details będzie się trochę różniło od poprzednio utworzonych widoków. Spowodowane jest to faktem wykorzystania klasy modelu, którego właściwości nie są typu prostego, jak w poprzednich punktach, lecz typów złożonych. a) Klikamy prawym przyciskiem myszy wewnątrz metody Details i z menu kontekstowego wybieramy opcję Add View. b) W wyświetlonym oknie dialogowym zaznaczamy opcję „Create a strongly-typed strongly view”, jako model wybieramy klasę SzczegolyOsoby, Szczegoly , a na liście rozwijanej „View „ content” zaznaczamy opcję Details. c) Po kliknięciu przycisku Add, wygenerowany zostanie dla nas widok, lecz jak łatwo można zauważyć nie będzie on wyświetlał żadnych użytecznych informacji. Jest to spowodowane faktem, że ASP.NET MVC nie potrafi wygenerować wygenero widoku na podstawie modelu złożonego. Fakt ten wykorzystamy jednak do przedstawienia sposobu tworzenia widoków częściowych i szablonów. d) Najpierw stwórzmy szablon wyświetlania danych dla klasy OsobaModel. W tym celu otwórzmy okno Solution Explorer i w katalogu katalogu Views/Shared stwórzmy nowy katalog: DisplayTemplates. e) Klikamy na tym katalogu prawym przyciskiem myszy i wybieramy opcję Add>View. f) W wyświetlonym oknie dialogowym wybieramy opcje tak jak pokazano na rysunku poniżej. ej. Ważne jest aby nazwa widoku była była taka sama jak nazwa klasy modelu na podstawie, której będzie on wygenerowany.

g)

Po kliknięciu przycisku Add wygenerowany zostanie dla nas widok częściowy o następującym kodzie: 7

Zaawansowane programowanie internetowe inter Instrukcja nr 4

Fields ID class Imie class DrugieImie class Nazwisko class %> > |

h) Z wygenerowanego kodu usuwamy następujące linie: •

ID class

W tym przypadku, podobnie jak przy poprzednich widokach nie chcemy wyświetlać wy użytkownikowi identyfikatora. •

|

W tym przypadku nie chcemy dawać możliwości przejścia do edycji osoby z tego widoku (no chyba, że ktoś chce ☺,, to wtedy należy zmienić fragment zaznaczony jako komentarz, tak jak to robiliśmy wcześniej). Odnośnik do listy osób również nie jest nam w tym szablonie potrzebny, ponieważ taki odnośnik będzie znajdował się bezpośrednio na stronie, na której ten szablon będzie wykorzystany. orzystany. i)

j)

Stwórzmy teraz widok częściowy, który będzie wyświetlał numery telefonów użytkownika. W tym celu w oknie Solution Explorer klikamy prawym przyciskiem myszy na katalogu View/Shared i wybieramy opcję Add>View. W oknie dialogowym ustawiamy odpowiednie odpowiednie opcje zgodnie z rysunkiem przedstawionym poniżej:

8 Zaawansowane programowanie internetowe inter Instrukcja nr 4

k)

l)

Po kliknięciu przycisku Add wygenerowany zostanie dla nas widok częściowy, z którego wyrzucamy kolumnę ID oraz uzupełniamy kod metod Html.ActionLink, Html.ActionLink podobnie jak przy tworzeniu widoku dla akcji Index. Gdy mamy już wygenerowane odpowiednie szablony i widoki częściowe możemy wrócić do naszego widoku Details i zmodyfikować go zgodnie z kodem przedstawionym poniżej:

="server"> Details > Szczegóły Szczegóły x.Osoba) %> > Numery telefonów: >

Należy zwrócić uwagę na wykorzystanie w kodzie dwóch metod z klasy Html: DisplayFor oraz Partial. Metoda DisplayFor służy do wyświetlenia szablonu dla właściwości przekazanej jako parametr. Metoda Metoda ta na podstawie typu właściwości przekazanej do funkcji jako parametr decyduje, który szablon wybrać, dlatego konieczne było nazwanie szablonu dokładnie tak samo jak klasy, dla dla której był wygenerowany. 9 Zaawansowane programowanie internetowe inter Instrukcja nr 4

Metoda Partial służy do wstawienia w miejsce wywołania kodu widoku częściowego. Wykorzystana wersja tej metody, jako pierwszy parametr przyjmuje nazwę widoku częściowego, a jako drugi obiekt, który ma dostarczyć dane konieczne koniecz do jego wygenerowania.

V. Zadania do samodzielnego wykonania 1.

Proszę zaprogramować brakujące akcje kontrolera i silnie typowane widoki. a. W przypadku widoku dla akcji Delete, kontrolera OsobaController można posłużyć się stworzonym szablonem. b. Ponieważ dodawanie, usuwanie i edycja numerów telefonów będą obsługiwane przez kontroler TelefonController, konieczne będzie zmodyfikowanie utworzonego widoku częściowego. Modyfikacji wymaga metoda Html.ActionLink, która powinna wskazywać na odpowiedni kontroler kon (TelegonController), a domyślnie generuje ona link do kontrolera, z którego wywołany został widok. W celu wygenerowania poprawnego odnośnika należy wykorzystać inną wersję tej metody, która przyjmuje 5 parametrów: • Generowany tekst odnośnika (typu string) st • Nazwę akcji (typu string) • Nazwę kontrolera (typu string) • Parametry przekazane przez link (typu object) • Atrybuty HTML, które mają być ustawione dla odnośnika (typu object). W naszym przypadku wywołanie może mieć następującą postać: Html.ActionLink( ”Edit”, ”Edit”, ”TelefonController”, new { id = item.ID}, null);

10 Zaawansowane programowanie internetowe inter Instrukcja nr 4