W poprzednich dwóch wpisał pokazałem jak można stworzyć model oraz kontroler dla naszej przykładowej aplikacji ASP.NET MVC 2. W tym wpisie chciałbym pokazać jak stworzyć widoki dla księgi gości. Widoki tutaj przedstawione będę dość proste. W późniejszej części serii artykułów postaram się je bardziej rozbudować.
Tak jak wcześniej opisywałem sposób działania aplikacji ASP.NET MVC jest następujący: użytkownik wysyła jakieś żądanie do serwera www, następnie jest wybierany kontroler oraz akcja, która ma się wykonać. Sama akcja na ogół wyciąga jakieś dane z modelu oraz wyświetla odpowiedni widok. Domyślna konwencja przyjętą w ASP.NET MVC zakłada, że domyślnie wyświetlany jest widok z katalogu Views, katalogu odpowiedniego dla kontrolera oraz identycznej nazwie jak akcja. Dla przykładu, jeśli mamy kontroler GuestBookController, a w nim akcję Index, to domyślnie dla tej akacji (gdy wywołamy metodę View) zostanie użyty widok Index z katalogu Views\GuestBook. Metoda View ma kilka przeciążonych metod i nie musimy koniecznie korzystać z powyższej konwencji i możemy wyświetlić dowolny widok. Ale zaproponowane rozwiązanie jest wygodne.
Jak zatem wygenerować widok dla określonej akcji? Na szczęście Visual Studio bardzo nam w tym pomaga i większość rzeczy robi za nas. Ady dodać widok do akcji Index kontrolera GuestBookController, wystarczy w ciele akcji kliknąć prawym klawiszem myszy i wybrać Add View. Poniżej znajduje się okno jak wyświetli się nam w celu dodania nowego widoku:
A w nim możemy ustawić kilka właściwości, które spowodują różne wygenerowanie nam widoku. Możemy sobie nadać własną nazwę widoku, najlepiej pozostawić domyślnie wygenerowaną. W większości wypadku warto sobie zaznaczyć checkboxa Create a strongly-typed view. Opcja ta spowoduje je nasz widok będzie silnie typowany, a z listy poniżej możemy sobie wybrać klasę z jaką chcemy pracować. W przykładzie jest to klasa GuestBook, która została wygenerowana przez Linq To Sql. Co nam to daje? Po pierwsze to, że możemy skorzystać sobie z predefiniowanych szablonów widoku (na rysunku jest to widok List), dzięki czemu Visual Studio na podstawie obiektu wygeneruje nam odpowiedni widok dla każdej publicznej właściwości naszego obiektu. W przykładzie będzie to tabela, której kolumnami będą właściwości naszego obiektu GuestBook. Dostępne szablony zostaną opisane w dalszej części artykułu.
Ostatnim elementem jaki możemy zdefiniować dla nowego widoku to, czy ma korzystać z master page, a jeśli tak to jakiego.
Po kliknięciu Add, Visual Studio wygeneruje nowy widok dla akcji Index. I jak można zobaczyć Visual Studio wygenerowało nam kod, który spowoduje wyświetlenie tabeli na stronie. Co widać poniżej na listingu:
1: <h2>Index</h2>
2:
3: <table>
4: <tr>
5: <th></th>
6: <th>
7: Id
8: </th>
9: <th>
10: Nick
11: </th>
12: <th>
13: Text
14: </th>
15: <th>
16: Email
17: </th>
18: <th>
19: AddDate
20: </th>
21: </tr>
22:
23: <% 1: foreach (var item in Model) { %>
24:
25: <tr>
26: <td>
27: <% 1: : Html.ActionLink("Edit", "Edit", new { id=item.Id }) %> |
28: <% 1: : Html.ActionLink("Details", "Details", new { id=item.Id })%> |
29: <% 1: : Html.ActionLink("Delete", "Delete", new { id=item.Id })%>
30: </td>
31: <td>
32: <% 1: : item.Id
%>
33: </td>
34: <td>
35: <% 1: : item.Nick
%>
36: </td>
37: <td>
38: <% 1: : item.Text
%>
39: </td>
40: <td>
41: <% 1: : item.Email
%>
42: </td>
43: <td>
44: <% 1: : String.Format("{0:g}", item.AddDate) %>
45: </td>
46: </tr>
47:
48: <% 1: }
%>
49:
50: </table>
51:
52: <p>
53: <% 1: : Html.ActionLink("Create New", "Create") %>
54: </p>
W oczy się rzuca, że html jest przeplatany na zmianę z znacznikami <% %>. W znacznikach tych możemy zawierać kod c#, który zostanie wykonany podczas generowania widoku. Znacznik ten ma dwie postacie: <% %> oraz <%: %>. Pierwsza służy do kodu, który nie zwraca nic do generowanego htmla (na przykład może być to kod jakieś pętli). Drugi służy do przekazania do htmla jakiegoś ciągu znaków. W przykładzie może być to np. wygenerowany link do jakiegoś akcji przez metodę ActionLink klasy Html. O klasie Html będzie dokładniej w jednym z późniejszych artykułów serii.
Mając już tak wygenerowany widok pozostaje zobaczyć nam, czy wszystko działa ok. W tym celu uruchamiamy aplikację za pomocą klawiszu F5. Po uruchomieniu zobaczymy stronę główną naszej aplikacji, która została wygenerowana przez Visual Studio podczas tworzenia aplikacji ASP.NET MVC 2.
Jak w takim razie zobaczyć to co zrobiliśmy? Domyślna konwencja mówi, że aby wykonać jakąś akcję z kontrolera należy użyć adresu url o podanej budowie: adres.strony.pl/kontroler/akcja. Gdzie za kontroler wpisujemy nazwę kontrolera (bez końcówki Controller), a za akcję nazwę żądanej akcji. I tak url adres.strony.pl/GuestBook/Index spowoduje wyświetlenie wcześniej wygenerowanego widoku tabeli wszystkich wpisów w księdze gości. Mechanizm ten nazywa się routingiem. Dokładniej routing opiszę w jednym z kolejnych artykułów.
Po wyświetleniu akcji Index z kontrolera GuestBookController zobaczymy taki widok i ile wcześniej nic nie dodaliśmy do bazy danych.
Jak widać lista wpisów jest pusta. Natomiast tabela zawiera wszystkie kolumny z naszej tabeli z bazy danych. Dodatkowo został dodany link Create New, który spowoduje wykonanie akcji Create (związanej z żądaniem get, czyli wyświetlenie formularza dodania nowego wpisu) z kontrolera GuestBookController. Kliknięcie w ten link teraz spowoduje wyświetlenie wyjątku, który informuje, że nie ma wygenerowanego widoku dla akcji Create. Dlatego przejdźmy teraz do jego wygenerowania.
Widok dla akcji Create generuje się podobnie jak dla akcji Index. Tylko z tą różnicą, że zamiast wybrania szablonu List, wystarczy wybrać szablon Create. W wygenerowanym widoku warto wykonać kilka zmian:
- Usunąć z formularza wpisanie przez użytkownika Id oraz daty dodania
- Dla pola Text zmienić generowany textbox na TextArea
Po tych zmianach kod widoku powinien wyglądać tak:
1: <h2>Create</h2>
2:
3: <% using (Html.BeginForm()) {%>
4: <%: Html.ValidationSummary(true) %>
5:
6: <fieldset>
7: <legend>Fields</legend>
8:
9: <div class="editor-label">
10: <%: Html.LabelFor(model => model.Nick) %>
11: </div>
12: <div class="editor-field">
13: <%: Html.TextBoxFor(model => model.Nick) %>
14: <%: Html.ValidationMessageFor(model => model.Nick) %>
15: </div>
16:
17: <div class="editor-label">
18: <%: Html.LabelFor(model => model.Text) %>
19: </div>
20: <div class="editor-field">
21: <%: Html.TextAreaFor(model => model.Text) %>
22: <%: Html.ValidationMessageFor(model => model.Text) %>
23: </div>
24:
25: <div class="editor-label">
26: <%: Html.LabelFor(model => model.Email) %>
27: </div>
28: <div class="editor-field">
29: <%: Html.TextBoxFor(model => model.Email) %>
30: <%: Html.ValidationMessageFor(model => model.Email) %>
31: </div>
32:
33: <p>
34: <input type="submit" value="Create" />
35: </p>
36: </fieldset>
37:
38: <% } %>
39:
40: <div>
41: <%: Html.ActionLink("Back to List", "Index") %>
42: </div>
Natomiast widok po wyświetleniu powinien wyglądać mniej więcej tak:
Na razie nie ma walidacji i jak klikniemy w przycisk Create to wyświetli się nam informacje o błędzie. Walidację dodamy później w jednym z kolejnych artykułów.
Gdy wypełnimy poprawnie formularz oraz klikniemy w przycisk Create to nasz wpis zostanie dodany do bazy danych, co zobaczymy na liście wszystkich wpisów, wygenerowanej przez akcję Index kontrolera GuestBook.
Pozostałe widoki generuje się analogicznie do dwóch powyższych, z tą różnicą, że korzysta się z różnych szablonów. Dostępne szablony to:
- Create – tworzy formularz do dodania nowego obiektu
- Delete – formularz, w którym użytkownik potwierdza, że chce usunąć dany obiekt
- Details – szczegółowe informacje o obiekcie (tylko do odczytu)
- Edit – formularz do edycji obiektu
- Empty – pusty widok
- List – tabela z listą obiektów (kolumny to ich właściwości)
Tags: asp.net mvc,
mvc,
widok
Categories: Techniczne
197109af-5505-4fce-9075-bfa59cccb048|3|4.0