Archiwa tagu: kurs asp.net mvc

#9.5.4 Dopisujemy obsługę stworzonego formularza kontaktowego.

9.5.4 Dopisujemy obsługę stworzonego formularza kontaktowego.

W poprzedniej części stworzyliśmy formularz kontaktowy. Sprawdźmy więc czy możemy wpisać do niego jakieś dane i co się stanie jeśli klikniemy w przycisk „wyślij”? Przy otwartym pliku formcontact.cshtml wciskamy F5, wprowadzamy jakieś testowe dane do formularza i klikamy na przycisk „wyślij” (rysunek 9.5.4.1).

Kurs ASP.NET MVC 5. Wypełnienie formularza danymi i potwierdzamy przyciskiem „wyślij”.
Rysunek 9.5.4.1 Wypełnienie formularza danymi i potwierdzamy przyciskiem „wyślij”.

Po zatwierdzeniu wprowadzonych danych, pola formularza się czyszczą. Dlaczego tak się dzieje? Otóż dlatego, że nie dodaliśmy jeszcze obsługi naszego formularza. Kliknięcie w przycisk „wyślij” powoduje powrót do akcji FormContact() w naszym kontrolerze HomeController a ta akcja robi tylko jedną czynność a mianowicie wyświetla formularz FormContact.

W MVC możemy zdublować (przeciążyć) daną metodę akcji i w zależności od żądania (GET czy POST) możemy wykorzystać jedną lub drugą w zależności czy będziemy mieli do czynienia  z żądaniem GET czy z żądaniem POST. Standardowo kiedy korzystamy z metody pomocniczej Html.BeginForm() dane z formularza są przekazywane za pomocą metody POST. Żeby wiadomo było która metoda ma być wykonana przy jakim żądaniu, przed deklaracją danej metody dopisujemy [HttpGet] jeśli mamy do czynienia z żądaniem GET lub [HttpPost] jeśli mamy do czynienia z żądaniem POST. W kodzie powinno to wyglądać jak na rysunku poniżej.

Kurs ASP.NET MVC 5. Tworzenie dwóch metod FormContact dla żądania GET i POST.
Rysunek 9.5.4.2 Tworzenie dwóch metod FormContact dla żądania GET i POST.

Specjalnie na rysunku powyżej dałem dwa listingi z jedną różnicą. Na pierwszym listingu metody dla żądania GET i POST mają takie same nazwy i jedna (dla żądania POST) jest podkreślona. Na drugim listingu nie ma już podkreślenia, ale jest drobna różnica. Na drugim listingu metoda o nazwie FormContact posiada parametr i to właśnie różni obie metody i dlatego można metodę o takiej samej nazwie użyć dwa raz, co nazywamy przeciążeniem metody.

Ale żeby wszysto zadziałało musimy jeszcze dopisać jedną linijkę kodu przy deklaracjach using.

using PierwszaAplikacja.Models;

Dlaczego? Bo dopiero wtedy możemy widzieć i korzystać z naszych modeli (w naszym przypadku MFormContact).

Ale dalej metody dla żądań GET i POST robią to samo bo treści obu metod niczym się nie różnią. Zastanówmy się co ma robić nasza metoda dla żądania POST. Powinna przekazać nasze dane z formularza do widoku ale nie koniecznie domyślnego. Domyślny widok dla metody FormContact to FormContact.cshtml który generuje pusty formularz, dlatego do obsługi naszych danych z formularza wykorzystamy nowy widok o nazwie sendForm, który za chwilę stworzymy. Ale przed tym zmodyfikujemy metodę FormContact dla żądania POST aby przekierowywała nas na ten nowy widok. Poniżej zmodyfikowana metoda FormContact ([HttpPost]).

Kurs ASP.NET MVC. Zmodyfikowana metoda FormContact (HttpPost).
Rysunek 9.5.4.3 Zmodyfikowana metoda FormContact (HttpPost).

#10 Delegaty.

Delegaty to utworzone przez nas typy danych za pomocą których „wskazujemy” na odpowiednie metody które mają zostać wykonane w danym momencie. W tym momencie ktoś może powiedzieć, że można to zrobić korzystając z instrukcji warunkowych i ma rację, Delegaty są jednak lepsze przy bardziej rozbudowanych projektach. Moim zdaniem po bliższym poznaniu delegatów są one lepszym rozwiązaniem.

Spróbuję wytłumaczyć to bardziej szczegółowo. Wyobraź sobie taką sytuację, że podczas działania programu użytkownik może podjąć decyzję co do dalszego działania tego programu np. mamy program który realizuje podstawowe zadania kalkulatora.  Podajemy dwie liczby i możemy wybrać działanie jakie na zostać wykonane na tych dwóch liczbach. W momencie wyboru działania program nie wie jakie działanie wybierze użytkownik. To użytkownik podejmuje decyzję o wyborze działania i tutaj właśnie możemy użyć delegatów. Za ich pomocą możemy (w zależności od wyboru użytkownika)powiedzieć programowi która metoda powinna zostać wykonana.

Przykład deklaracji delegata:

public delegate int typDelegata = (int a);

Jak widać w powyższym przykładzie delegata deklarujemy przy pomocy słówka delegate. Zadeklarowaliśmy delegata o typie int z jednym parametrem także o typie int.

Ponadto możemy stworzyć obiekt o typie delegata, przykład poniżej.

typDelegata mojObiekt = new typDelegata(metoda1);

Jak widzimy w powyższym przykładzie stworzyliśmy obiekt o nazwie „mojObiekt” o typie „typDelegata” i jak parametr dodaliśmy nazwę metody do wykonania „metoda1”.

Dla pełnego zobrazowania działania naszego delegata prezentuję poniżej pełny kod programu.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Konsola
{
    class Program
    {
        public delegate int typDelegata (int a);
        static int metoda1(int a)
        {
            return a;
        }
        static int metoda2(int a)
        {
            return a + 10; ;
        }
        static void Main(string[] args)
        {
            typDelegata mojObjekt = new typDelegata(metoda1);

            Console.WriteLine("Wynik działania metody 1: " + mojObjekt(10));

            mojObjekt = metoda2;

            Console.WriteLine("Wynik działania metody 2: " + mojObjekt(10));

            Console.ReadKey();

        }
    }
}

Program jest bardzo prosty ale prezentuje działanie delegatów. Zadeklarowałem na samym początku delegata o nazwie „typDelegata” oraz dwie metody o nazwach „metoda1” i „metoda2”. Pierwsza metoda zwraca wartość parametru, a druga zwraca wartość parametru powiększonego o 10. W metodzie „Main” tworzymy obiekt „mojObiekt” i przypisujemy do niego metodę „metoda1”. Następnie na wyrzucamy na ekran konsoli wynik działania metody1, gdzie jako parametr delegata podajemy wartość 10. Następnie „łączymy” delegata z metodą2, gdzie jako parametr delegata podajemy wartość 10  i wyrzucamy na ekran konsoli efekt działania metody 2. Na ekranie powinniśmy otrzymać wynik jak poniżej.

Wynik działania metody 1: 10
Wynik działania metody 2: 20

I wszystko się zgadza metoda 1 miała nam zwrócić wartość parametru, czyli liczbę 10 a metoda 2 miała nam zwrócić wartość parametru powiększonego o 10, czyli wartość 20.

 

#9.5.3 Tworzymy pola formularza FormContact.

W pierwszej kolejności należy zmienić tytuł naszego formularza. Aby to zrobić w oknie głównym Visual Studio musimy mieć aktywny plik naszego widoku, czyli FormContact.cshtml. Jeśli nie widzimy tego kodu w powyższym oknie należy kliknąć na plik FormContact.cshtml w oknie Solution Explorer. Kod wygenerowany przy tworzeniu naszego widoku prezentuje poniższy listing 9.5.3.1.

Listing 9.5.3.1 Pierwotny kod wygenerowanego widoku FormContact.

@model PierwszaAplikacja.Models.MFormContact
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>FormContact</title>
</head>
<body>
    <div> 
    </div>
</body>
</html>

W pierwszej kolejności zmienimy tytuł naszego formularza, który mieści się między tagami <title> i </title>.

<title>Formularz kontaktowy </title>

Kolejnym krokiem jest utworzenie czterech pól formularza i przycisku którym będziemy zatwierdzali wprowadzone przez nas dane. Z rozdziału gdzie tworzyliśmy nasz model danych pamiętamy, że chcieliśmy aby nasz formularz zawierał następujące pola: kategoria, tytuł, autor i opis (takie właściwości metody MFormContact utworzyliśmy). O ile pola tytuł, autor i opis będą zwykłymi polami tekstowymi to pole kategoria będzie listą wyboru.

Na początek utworzymy nasze pola tekstowe. Do ich utworzenia wykorzystamy odpowiednią metodę pomocniczą Html, która wygeneruje nam odpowiednią kontrolkę <input>. W przypadku pól tekstowych będzie to metoda Html.TextBoxFor<>. Generalnie metody pomocnicze służą do generowania odpowiednich znaczników HTML.

<p>Tytuł: @Html.TextBoxFor( a => a.title )<p>

Jak widzimy w nawiasie po metodzie Html.TextBoxFor występuje nowa składnia a => a.title. Jest to wyrażenie lambda, które szerzej omówię w dalszej części kursu. Na chwilę obecną wystarczy wiedzieć, że wyrażenie lambda to funkcja anonimowa która służy do tworzenia typów delegatów lub typów drzewa wyrażeń. Składnia wyrażenia lambda to:

[parametry wejściowe] => (operator lambda) [wyrażenie lub instrukcja blokowa]

W naszym przypadku wyrażenie to będzie zwracało wartości z odpowiednich pól.

Zwróćmy uwagę, że nasz widok FormContact.cshtml oparliśmy na modelu MFormContact o czym mówi zapis na początku widoku @model PierwszaAplikacja.Models.MFormContact.

Tworząc wyrażenie lambda za metodą Html.TextBoxFor Visual Studio od razu wie, że odwołujemy się do naszego modelu MFormContact, co pokazje rysunek 9.5.3.1.

9.5.3.1 Tworzymy wyrażenie lambda.
9.5.3.1 Tworzymy wyrażenie lambda.

A dodając kropkę za naszym parametrem a = a. od razu odwołujemy się do właściwości naszego modelu, do pokazuje rysunek 9.5.3.2.

9.5.3.2 Tworzymy wyrażenie lambda.
9.5.3.2 Tworzymy wyrażenie lambda.

W ten sposób tworzymy nasze pola: tytuł, autor i opis.

Listing 9.5.3.2 Kod prezentujący pola tytuł, autor i opis.

<p>Tytuł: @Html.TextBoxFor(a => a.Title)</p>
<p>Autor: @Html.TextBoxFor(a => a.Author)</p>
<p>Opis:  @Html.TextBoxFor(a => a.Description)</p>

Kolejne potrzebne pole to pole kategoria które będzie listą rozwijalną z możliwością wyboru wybranej kategorii zgłoszenia. W tym celu wykorzystamy kolejną metodę pomocniczą Html.DropDownListFor. Na początku odwołamy się do właściwości category w naszym modelu MFormContact a później utworzymy tablicę gdzie będziemy przechowywali kolejne wartości naszej listy, co pokazuje listing 9.5.3.2.

Listing 9.5.3.3 Kod prezentujący pole kategoria.

<p>
Wybierz kategorię:
@Html.DropDownListFor(a => a.Category, new[]
{
new SelectListItem() {Text = "Pytanie o produkty/usługi."},
new SelectListItem() {Text = "Sprawy techniczne." },
new SelectListItem() {Text = "Biuro obslugi klienta." }
}   
)
</p>

Na koniec pozostało nam zdefiniowanie przycisku „wyślij”. W tym celu wygenerujemy kontrolkę input o typie submit, co pokazuje kolejny listing.

Listing 9.5.3.4 Definicja kontrolki input dla przycisku „wyślij”.

<input type=”submit” value=”wyślij”>

Definicję wszystkich pól „opakujemy” jeszcze w znacznik <form … > Treść formularza </form>. W tym celu skorzystamy z następnej metody pomocniczej a mianowicie Html.BeginForm, co pokazuje poniższy kod.

Listing 9.5.3.5 Wykorzystanie metody Html.BeginForm.

@using(Html.BeginForm())
{ 
…
Definicja pól i przycisków formularza
…      
}

Definicję całości formularza prezentuje poniższy listing.

Listing 9.5.3.6 Definicja całości formularza FormContact.cshtml.

@using(Html.BeginForm()){ 
<p>
Wybierz kategorię:
@Html.DropDownListFor(a => a.Category, new[]
{
new SelectListItem() {Text = "Pytanie o produkty/usługi."},
 ew SelectListItem() {Text = "Sprawy techniczne." },
new SelectListItem() {Text = "Biuro obslugi klienta." }
}   
)
</p>
<p>Tytuł: @Html.TextBoxFor(a=>a.Title)</p>
<p>Autor: @Html.TextBoxFor(a => a.Author)</p>
<p>Opis: @Html.TextBoxFor(a => a.Description)</p>
<input type=”submit” value=”wyślij”>
}

Po uruchomieniu projektu w przeglądarce internetowej powinniśmy zobaczyć poniższy ekran.

9.5.3.3 Widok formularza FormContact w przeglądarce.
9.5.3.3 Widok formularza FormContact w przeglądarce.

Jeżeli podejrzymy źródło strony zobaczymy, że wszystkie metody pomocnicze HTML zostały zamienione na odpowiednie znaczniki HTML, co prezentuję poniżej.

Listing 9.5.3.7 Kod prezentujący źródło strony formularza FormContact.

<form action="/Home/FormContact" method="post">        <p>
            Wybierz kategorię:
            <select id="Category" name="Category"><option>Pytanie o produkty/usługi.</option>
<option>Sprawy techniczne.</option>
<option>Biuro obslugi klienta.</option>
</select>
        </p>
        <p>Tytuł: <input id="Title" name="Title" type="text" value="" /></p>
        <p>Autor: <input id="Author" name="Author" type="text" value="" /></p>
        <p>Opis: <input id="Description" name="Description" type="text" value="" /></p>
</form>

Na tym zakończymy tworzenie naszego formularza kontaktowego.

Dalsze części rozdziału 9 w przygotowaniu :)

#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.5.1 Tworzymy model danych dla formularza kontaktowego.

Na początku zajmiemy się modelem danych, którego później użyjemy do kilku rzeczy m.in. pomocniczo do tworzenia nowego widoku formularza kontaktowego utworzonego na podstawie naszego modelu danych. Ale po kolei.

Utworzymy w naszym projekcie nowy model. W tym celu w oknie Solution Explorer na katalogu Models klikamy na PPM i z menu wybieramy opcję Add i później Class. Możemy także w tym samym oknie kliknąć raz LPM (lewy przycisk myszy) na katalogu Models (tak aby go podświetlić) i wybrać skrót klawiszowy Shift + Alt + C. Efekt będzie ten sam i na ekranie pojawi się okienko Add New Item (rysunek 9.5.1.1).

9.5.1.1 Okno Add New Item - tworzenie nowej klasy.modelu MFormContact.
9.5.1.1 Okno Add New Item – tworzenie nowej klasy.modelu MFormContact.

Nasz model będzie klasą C# więc wybieramy pierwszą opcję, następnie w poku Name wpisujemy nazwę naszego modelu, czyli MFormContact.cs i potwierdzamy wszystko klikając w przycisk OK.

Nasz nowo utworzony model możemy zobaczyć w oknie Solution Explorer (rysunek 9.5.3).

9.5.1.2 Nowy model MFormContact w oknie Solution Explorer.
9.5.1.2 Nowy model MFormContact w oknie Solution Explorer.

Zobaczmy teraz jego treść (rysunek 9.5.4). W tym celu klikamy właśnie na tym pliku MFormContact.cs LPM w oknie Solution Explorer.

Listing 9.5.1.1 Kod modelu danych FormContact

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PierwszaAplikacja.Models
{
    public class MFormContact
    {
    }
}

Teraz należy go zmodyfikować zgodnie z naszymi potrzebami. Wcześniej mówiłem już, że model danych opisuje kawałek rzeczywistości, który można oprogramować. Na początku musimy określić, jakie dane będzie zawierał nasz formularz kontaktowy i wtedy odpowiednio przenieść to na grunt informatyki.

Moim zdaniem każdy formularz kontaktowy powinien bezwzględnie zawierać takie pola jak:

  • kategorię zgłoszenia,
  • tytuł zgłoszenia,
  • autor zgłoszenia,
  • treść zgłoszenia.

i to właśnie będziemy chcieli teraz oprogramować. Znając już założenia (co ma zawierać nasz formularz kontaktowy) możemy przystąpić do modyfikacji kodu modelu (listing 9.5.1.2). Zmodyfikowany kod jest pogrubiony.

Listing 9.5.1.2 Właściwości modelu MFormContact

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PierwszaAplikacja.Models
{
    public class MFormContact
    {
        public string Category { get; set; }
        public string Title { get; set; }
        public string Author { get; set; }
        public string Description { get; set;  }
    }
}

Model mamy już przygotowany. Będziemy go później wykorzystywać np. do tworzenia widoków.

#9.5 Tworzenie formularza kontaktowego i wszystkich komponentów potrzebnych do jego obsługi.

Mamy już stworzoną stronę główną (widok Index). Teraz przyszedł czas na stworzenie formularza kontaktowego, do którego będziemy przechodzić poprzez link ze strony głównej. W tym celu musimy wykonać następujące czynności:

  • stworzyć model danych dla naszego formularza,
  • zmodyfikować stronę główną (widok Index) poprzez umieszczenia na niej odpowiedniej treści oraz linku do widoku formularza,
  • utworzyć nową metodę akcji, która będzie zarządzała nowym widokiem formularza (kontroler Home),
  • stworzyć nowy widok formularza, który będzie oparty na stworzonym wcześniej modelu danych.

W tym rozdziale będę korzystał czasami z gotowego kodu bez szczegółowego wyjaśnienia, ponieważ pewne zagadnienia będę opisywał szczegółowo w dalszej części kursu.

#9.4 Dodajemy dynamiczną treść do widoku.

Dodawania do naszego widoku statycznej i dynamicznej treści.

Teraz chcielibyśmy dodać do naszego widoku jakąś treść. I o ile ze statyczną treścią nie ma większego problemu to dynamiczną musimy jakoś wygenerować i przesłać do widoku. Generowanie dynamicznej treści wykonuje się w kontrolerze, ale jeszcze później musimy w jakiś sposób przekazać ją do widoku?

Żeby zobaczyć jakikolwiek efekt zmodyfikujemy troszeczkę nasz nowo utworzony widok, ale także nasz kontroler Home. Wstawimy na naszą stronę główną (widok: Index) jakąś treść. Dodamy treść „Witaj! Znajdujesz się na stronie głównej.” i w następnym wierszu dodamy aktualną datę i godzinę.

Tekst statyczny, który będzie się pokazywał na stronie Index możemy wpisać bezpośrednio w pliku widoku Index. Natomiast dynamiczną część, czyli aktualna datę i godzinę, musimy wygenerować w kontrolerze i później przekazać ją do widoku. I tym się zajmiemy w pierwszej kolejności. Nasz kontroler Home należy zmodyfikować zgodnie z listingiem 9.4.1, pogrubioną czcionką zaznaczona zmodyfikowana treść kontrolera.

Listing 9.4.1 Modyfikacja kontrolera Home.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PierwszaAplikacja.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ViewResult Index()
        {
            ViewBag.DataGodzina = DateTime.Now;
            return View();
        }
    }
}

Do przechowania i przekazania daty i godziny z kontrolera do widoku użyjemy dynamicznego obiektu ViewBag, do którego możemy stworzyć właściwość DataGodzina (nazwa naszej właściwości jest dowolna) i do tej właściwości przypiszemy wartość aktualnej daty i godziny dzięki poleceniu DateTime.Now. Stworzenie właściwości DataGodzina dla obiektu ViewBag i przypisanie do niej wartości aktualnej daty i godziny wygląda następująco.

 

	ViewBag.DataGodzina = DateTime.Now;

Za pomocą obiektu ViewBag aktualną datę i godzinę możemy przekazać do naszego widoku Index. W tym celu modyfikujemy nasz widok Index. Pogrubioną czcionką zaznaczona jest zmodyfikowana część kodu.

Listing 9.4.2 Modyfikacja widoku Index.

 @{
    Layout = null;
}
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
    <title>Strona główna</title>
</head>
<body>
    <div> 
            Witam ! <br>
            Aktualna data i godzina: @ViewBag.DataGodzina
    </div>
</body>
</html>

Jak widać kawałek kodu @ViewBag.DataGodzina służy do wywołania właściwości DataGodzina obiektu ViewBag. W tym właśnie miejscu w przeglądarce internetowej pojawi się aktualna data i godzina. Żeby zobaczyć efekt naszych działań uruchamiamy nasz projekt (F5), co prezentuje rysunek 9.4.1.

9.4.1 Widok projektu w przeglądarce internetowej po modyfikacjach kontrolera i widoku._
9.4.1 Widok projektu w przeglądarce internetowej po modyfikacjach kontrolera i widoku._

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

#9.2 Tworzymy nowy kontroler – HomeController

Tworzymy nowy kontroler o nazwie Home (HomeController).

Wiemy już jak stworzyć nowy pusty projekt. Zerknijmy teraz do modułu Solution Explorer i zerknijmy do katalogów Controllers i Views. Widzimy tam, że narazie nie mamy stworzonych żadnych kontrolerów i widoków.

PierwszaAplikacja - Solution Explorer.
Rysunek 9.2.1. PierwszaAplikacja – Solution Explorer.

Po uruchomieniu projektu w takim momencie otrzymamy błąd w przeglądarce (Rysunek 9.2.2).

Visual Studio - pierwsze uruchomienie pustego projektu "PierwszyProjekt".
Rysunek 9.2.2 Visual Studio – pierwsze uruchomienie pustego projektu „PierwszaAplikacja”.

Dlaczego otrzymamy taki błąd? Bo wybraliśmy szablon Empty i jeszcze nic nie dodaliśmy do naszego projektu.

W pierwszej kolejności dodamy kontroler o nazwie Home. W oknie Solution Explorer klikamy PPM na folderze Controllers i z rozwijalnego menu wybieramy opcję Add a później Controller.

Tworzymy nowy kontroler Home.
Rysunek 9.2.3. Tworzymy nowy kontroler Home.

Pojawia się okno z możliwością wyboru typu kontrolera. W naszym przykładzie wybieramy Empty i klikamy na OK.

Wybieramy typ kontrollera Home.
Rysunek 9.2.4. Wybieramy typ kontrolera Home.

Zgodnie z konwencją MVC nazwy kontrolerom nadajemy dodając do nazwy słówko Controller (jak poniżej).

9.2.5. Kontroler Home - nadawanie nazwy.
Rysunek 9.2.5. Kontroler Home – nadawanie nazwy.

W takie prosty sposób stworzyliśmy nasz pierwszy kontroler o nazwie Home i możemy go zobaczyć w oknie Solution Explorer’a w folderze Controllers.

9.2.6. HomeController.
Rysunek 9.2.6. HomeController.

Jeżeli klikniemy na niego w oknie głównym zobaczymy zawartość naszego kontrolera.

9.2.7. Zawartość kontrolera Home.
Rysunek 9.2.7. Zawartość kontrolera Home.

No dobrze, mamy nasz kontroler i co się teraz stanie jak uruchomimy nasz projekt (wciskamy F5)?

9.2.8. Błąd widoku kontrolera.
Rysunek 9.2.8. Błąd widoku kontrolera.

No nie! Znowu błąd?

Błąd występuje dlatego, że nie mamy jeszcze utworzonego widoku, który chcemy wyświetlić. W chwili uruchomienia projektu, uruchamiamy metodę Index z kontrolera Home. Dlaczego? Bo w domyślnej ścieżce rutingu (pamiętamy: plik RouteConfig.cs w folderze App_Start) jest zapis.

 routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );

Czyli na początku próbujemy uruchomić metodę Index z kontrolera Home. A ta metoda zawiera metodę View() która zwraca nam odpowiedni widok. Zgodnie z konwencją MVC kompilator szuka widoku o takiej samej nazwie jak nasza metoda akcji, czyli szuka widoku o nazwie Index, a takiego widoku na razie nie ma. Stąd ten błąd. Ale spokojnie w kolejnych częściach kursu utworzymy odpowiedni widok.

Ostatnim działaniem w tym podrozdziale będzie lekka modyfikacja metody Index według poniższego listingu.
Listing 9.3.1 Modyfikacja metody Index w kontrolerze HomeController (zmodyfikowana część jest pogrubiona).

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PierwszaAplikacja.Controllers
{
   public class HomeController : Controller
   {
       // GET: Home
       public ViewResult Index()
       {
           return View();
       }
   }
}

Różnica między użyciem ActionResult na ViewResult zostanie wyjaśnione w dalszej części kursu. Na tą chwilę wyjaśnię tylko tyle, że metoda ViewResult() dziedziczy po metodzie ActionResult().

 

#9.1 Tworzymy pusty projekt ASP.NET MVC Web Application

Tworzymy pusty projekt ASP.NET Web Application w Visual Studio.

W tym celu skorzystamy z procedury tworzenia nowego projektu która opisałem tutaj. W tym miejscu wypunktuję tylko kroki jakie musimy wykonać aby utworzyć nowy pusty projekt, a jeśli chcesz zapoznać się z tematem bardziej szczegółowo kliknij w link do procedury.

1.1. Kliknij w link Visual Studio 2015 (standardowo znajduje się na pulpicie).

1.2. Po otwarciu się aplikacji wybierz kombinację klawiszy Ctrl + Shift + N.

1.3. Z drzewka po lewej wybierz opcję Templates > Visual C# > Windows > Web a później wybierz opcję ASP.NET Web Application Visual C# z okna po środku i potwierdzasz przyciskiem OK.

1.4. Wybieramy szablon Empty, zaklikujemy opcję MVC poniżej okna z szablonami i potwierdzasz przyciskiem OK.

1.5. I już mamy utworzony nowy pusty projekt ASP.NET MVC.