Archiwa tagu: mvc widok

#9.5.2 Tworzymy nowy widok i metodę akcji FormContact.

W tym podrozdziale stworzymy nowy widok oparty na naszym modelu. Będzie on prezentować wszystkie pola, które będziemy wykorzystywać w formularzu kontaktowym. Na początku jednak stworzymy metodę akcji FormContact w kontrolerze Home, która początkowo będzie zwracała nam widok FormContact, który stworzymy za chwilę na podstawie naszej metody. Przechodzimy do naszego kontrolera Home i dopisujemy do niego poniższy kod.

public ViewResult FormContact()
        {
            return View();
        }

Następnie tworzymy nowy widok o nazwie FormContact na podstawie naszego wcześniej utworzonego modelu MFromContact. W tym celu klikamy prawy przyciskiem myszy na nazwie naszej metody FormContact i z menu kontekstowego wybieramy opcję Add View …

9.5.2.1 Tworzymy nowy widok o nazwie FormContact.
9.5.2.1 Tworzymy nowy widok o nazwie FormContact.

W kolejnym oknie dialogowym Add View w polu Template wybieramy opcję Empty a w polu Model class wybieramy opcję MFormContact (PierwszaAplikacja.Models) i potwierdzamy wszystko przyciskiem OK, co obrazuje rysunek poniżej.

9.5.2.2 Dodawanie nowego widoku do projektu.
9.5.2.2 Dodawanie nowego widoku do projektu.

Utworzony widok powinien pojawić się w oknie Solution Explorer w części Views -> Home co obrazuje kolejny rysunek.

9.5.2.3 Nowo utworzony widok FormContact.
9.5.2.3 Nowo utworzony widok FormContact.

Po uruchomieniu naszego projektu w tym momencie nie zobaczymy jeszcze żadnego efektu z uwagi na fakt, że utworzyliśmy pusty widok. W kolejnym wpisie utworzymy pola naszego formularza.

#9.3 Tworzymy nowy widok o nazwie Index

Tworzymy nowy widok o nazwie Index

W poprzednim podrozdziale (9.2 Tworzymy nowy kontroler „HomeController”) utworzyliśmy pierwszy kontroler w naszym projekcie a mino to projekt w dalszym ciągu „wyrzuca” błąd. Tak jak już pisałem błąd ten jest spowodowany tym, że nie mamy utworzonego w naszym projekcie żadnego widoku (w naszym przypadku brak widoku o nazwie Index bo takiego właśnie widoku szuka kompilator). Przyszedł więc czas na stworzenie nowego pierwszego widoku.

Utworzyć widok możemy na dwa sposoby:

Sposób 1

Klikamy prawym przyciskiem myszy (PPM) na nazwie metody akcji Index, w kontrolerze Home, i z rozwiniętego menu wybieramy opcję Add View.

Rysunek 9.3.1. Tworzymy nowy widok o nazwie Index.
Rysunek 9.3.1. Tworzymy nowy widok o nazwie Index.

W oknie Add View konfigurujemy widok i potwierdzamy ustawienia.

Rysunek 9.3.2 Okno Add View, konfiguracja nowego widoku.
Rysunek 9.3.2 Okno Add View, konfiguracja nowego widoku.

Z uwagi na fakt, że tworzyliśmy widok klikając na metodzie Index Visual Studio automatycznie nazwał ten widok tak jak metoda dla której tworzymy ten widok, czyli Index. W polu szablon (template) wybieramy Empty (without model) i potwierdzamy przyciskiem Add. Opcję Empty (without model) wybieramy dlatego, widok Index będzie naszą stroną startową. Nie będzie ona prezentowała żadnych danych z modelu, dlatego korzystamy z ww. opcji.

Teraz przejdźmy do okna Solution Explorer i zobaczymy tam, że w folderze Views > Home utworzony został widok o nazwie Index.

Rysunek 9.3.3 Utworzony nowy widok w oknie Solution Explorer.
Rysunek 9.3.3 Utworzony nowy widok w oknie Solution Explorer.

Treść nowo utworzonego widoku możemy zobaczyć klikając na plik Index.cshtml.

Listing 9.3.1 Kod nowo utworzonego widoku o nazwie Index.

 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>


Kiedy uruchomimy nasz projekt w przeglądarce internetowej zobaczymy pustą stronę. Pustą dlatego, że nie umieściliśmy w niej żadnej treści. O tym, że uruchomiony jest widok Index świadczy tytuł strony i adres wyświetlany przez przeglądarkę (Rysunek 9.3.3).

Rysunek 9.3.4 Uruchomiony widok Index w przeglądarce internetowej.
Rysunek 9.3.4 Uruchomiony widok Index w przeglądarce internetowej.