#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.