#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 :)