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