ASP.NET MVC - Modely a kontaktný formulár

V tomto dieli si ukážeme ako vytvoriť kontaktný formulár. Najprv vytvoríme vlastný model, ktorý obohatíme atribúty. Nakoniec si vysvetlíme čo je to scaffolding a povieme rozdiel medzi HTTP GET a HTTP POST metódami.

Pozn. pre začínajúcich .NETaře vo VS: Keď napíšete do kódu meno nejakej triedy, nemusí byť obsiahnutá v mennom priestore, ktorý máte načítaný. Keď nemáte nejaký using, tak stačí napísať presne názov triedy, nabehnúť na neho myškou a pridať daný using pomocou ikony, ktorá sa v tú chvíľu zobrazí. Alebo lepšia metóda bez myšky je dať CTRL +. a dať enter. Ale to už je na vás, ako veľkí kamaráti s Visual Studiom ste vy Píšem to preto, lebo sa nechcem zdržiavať u každého Using, ktorý musíte pridať.

Vytvorenie projektu

Vytvoríme si teda nový projekt typu ASP.NET MVC 4 Web Application, pomenujeme ho MvcContactForm. Klikneme na OK a vyberieme template (šablónu) projektu. Minule sme mali Empty projekt, tak dnes vytvoríme Basic. View Engine necháme Razor a unit testy zatiaľ nepotrebujeme. Môžeme teda kliknúť znovu na OK.

Vygeneroval sa nám nový projekt. Je o niečo rozsiahlejšie než ten Empty, navyše obsahuje BundleConfig (vysvetlím v ďalších dieloch) a v priečinku Content obsahuje už nejaké defaultný CSS + obrázky. Tento diel ale nie je o CSS, takže mi do neho nejako razantne zasahovať nebudeme. Hlavne sa nám vygenerovali scripty na validáciu. Nakoniec je tu navyše Shared zložka, kde je layout stránky. S tým sa spája ešte _ViewStart súbor, o ktorom si niečo povieme v ďalších dieloch.

Vytvorenie kontroleru a pohľadu

Pridáme si klasicky nejaký defaultný kontrolér ak tomu pohľad. Pridáme si teda nový kontrolér s menom HomeController (pravým na priečinok Controllers -> Add -> Controller). Premenujte si meno na HomeController a kliknite na Add.

Vygenerovala sa nám Index metóda, takže si k nej pridáme pohľad (pravým do kódu metódy Index -> Add View). Necháme ho takto a klikneme na Add. Teraz môžete spustiť váš server (F5) a mala by na vás vykuknúť stránka s Indexom. Zatiaľ nič nové, že?

Vytvorenie modelu

Vypneme Debugging a vytvoríme si náš prvý model. Bude to model, v ktorom by sme chceli previesť informáciu o tom, ako nás užívateľ chcel kontaktovať.

Klikneme teda pravým na priečinok Models, klikneme pravým a dáme Add -> Class. Pomenujeme jej ako ContactModel a klikneme na Add.

Teraz našej triede (modelu) pridáme pár vlastností. Chcel by som vedieť ako sa volá, dátum odoslania, mail a text správy. Pridáme teda tieto 4 vlastnosti. Pre kontrolu, kód vyzerá takto:

public string Name { get; set; }
public DateTime Date { get; set; }
public string Email { get; set; }
public string Message { get; set; }

V našom HomeControlleru vytvoríme teda metódu ContactForm, ktorá nám vráti pohľad presne pre tento model. Aby sme nemuseli zbytočne písať rôzne textové polia, popisky a tlačidlo na odoslanie, tak si to necháme vygenerovať. Tomuto sa hovorí scaffolding. Jednoducho prídete, poviete tu máš model, Vygeneruj mi pre neho stránku, ktorá bude editovať tieto údaje. To znamená, že vy nech vytvoríte akýkoľvek model, tak nemusíte písať žiadny HTML kód! To je prvá výhoda, ktorú som ja zaznamenal. Aby som vás len neunavovalo, tak si ukážeme, ako je to jednoduché. Aby som nezabudol. Metóda ContactForm v HomeControlleru bude vyzerať takto:

public ActionResult ContactForm()
{
    return View();
}

To nám ale vytvorí len prázdnu stránku, využijeme teda scaffolding a vygenerujeme si formulár.

Teraz k našej metóde pridáme aj pohľad. Zaškrtneme Create a strongly-typed view a v Model class vyberieme ContactModel (MvcContactFor­m.Models) (Pozn .: Ak ho tam nemáte, tak si rebuildněte váš projekt. Chýba tam, pretože projekt jednoducho nevie, že tam ten model je, zatiaľ ste ho vytvorili na disku a objavil sa v projekte, ale to je všetko). Nakoniec u Scaffold template vyberieme Create a môžeme kliknúť na Add.

Vygeneroval sa nám HTML kód s pár kúskami C# kódu v Razor syntax (všade kde je zavináč)

@using (Html.BeginForm()) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>ContactModel</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Date)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Date)
            @Html.ValidationMessageFor(model => model.Date)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Email)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Message)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Message)
            @Html.ValidationMessageFor(model => model.Message)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}

Čo aký kód robí vysvetľovať nebudem. Keď si nabehnete myškou na danú metódu, tak je vysvetlená. Takže by som to len zbytočne prekladal, ale aby ste pochopili princíp toho generovanie, tak sa jednoducho vezme každá vlastnosť a vygeneruje sa label (krok) pre danú vlastnosť, ďalej sa vygeneruje editor a popri tom ešte validačný hláška.

Prejdeme teda na stránku

http://localhost:28573/home/contactform

(Vy máte port iný) a vidíme, že sa nám vygeneroval formulár. Všimnite si, že som nenapísal absolútne nič a mám fungujúce formulár (z časti). Skúste si vyplniť rôzne polia, niektoré nevyplniť a odoslať.

Všimli ste si, že sa odoslal, aj keď ste potrebné nevyplnili mail a nič sa nepotvrdilo? Pridáme teda atribúty k nášmu modelu.

public class ContactModel
{
        [Required]
        [MinLength(3)]
        public string Name { get; set; }

        [ScaffoldColumn(false)]
        public DateTime Date { get; set; }

        [Required]
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }

        [Required]
        [DataType(DataType.MultilineText)]
        public string Message { get; set; }
}

Popis atribútov:

[Required]  // Nám říká, že musí něco obsahovat ( != null)
[Required(ErrorMessage="Required")] // Nastaví, že nesmí být políčko prázdné i s chybovou hláškou (Změní tu defaultní na tu naši)
[MinLength(3)] // Minimálni délka 3
[ScaffoldColumn(false)] // Ignoruje scaffolding - negeneruje to pro ně pole (jsou skryté, jako třeba datum vytvoření
[DataType(DataType.EmailAddress)] // Požaduje emailovou adresu
[EmailAddress] // Jinačí zápis atributu o řádek výše
[DataType(DataType.MultilineText)] // Více řádkový textbox
[Range(1,500)] // Hodnota musí být mezi 1 a 500 (číselně)

Rebuildneme projekt a skúsme odoslať prázdne položky teraz. Vygenerovali sa nám jQuery scripty, aby sa náš kód zvalidoval a potom až odoslal. Takže by to nemalo byť možné.

Dúfam, že ste si všimli, že som vyplnil, že dátum nebude vyplňovať užívateľ. Takže buď si vyhľadáte v ContactForm.cshtml kód pre dátum a zmažete (tá rýchlejší variant) a alebo celý súbor zmažete a vytvoríme nový. Alebo si to vygenerujeme zakaždým pomocou Html.EditorForModel metódy. Skúste si schválne nechať ten starý a pod to napísať generovací metódu a uvidíte výsledok. (Nezabudnite na to, že pri vkladaní kódu musíte napísať razor syntax - @ !!!)

Toto riešenie je dobré, keď sa hráte s tým, čo by mal model obsahovať, že toto sa vám nepáči a tak ďalej. Keď to už potom máte napojené na databázu, tak tam vzniknú menšie problémy, ktoré idú ale elegantne vyriešiť, takže sa nebojte.

Zatiaľ teda vieme odoslať formulár, teraz si ho vyzdvihneme a spracujeme.

Vytvoríme si teda metódu s rovnakým názvom a ako parameter odovzdáme náš model. Opýtame sa či je model validný a keď áno, tak presmerujeme používateľov na indexovú stránku. Inak sa vrátime späť. Kód teda bude vyzerať takto.

public ActionResult ContactForm(ContactModel model)
{
    if (ModelState.IsValid)
    {
        // přidáme model do databáze
        return RedirectToAction("Index", "Home");
    }
    return View();
}

Keď sa teraz pokúsite dostať na stránku, tak vám vyskočí chyba. Ak sa pýtate prečo, tak máte 2 metódy s rovnakým názvom. C# jednoducho nevie akú metódu má použiť. Ak poznáte rozdiel medzi HTTP GET a HTTP POST, tak asi viete prečo. Pre ostatných to jednoducho vysvetlím.

Vy, keď požadujete po serveru zobraziť nejakú stránku, tak je to práve GET. Takže všetky metódy majú atribút [HttpGet], ale je tam generovaný už implicitne. Pravý opak od toho je POST, to znamená, že vy niečo (dáta) chcete odoslať servera. Pridáme teda atribút [HttpPost] pred našou druhou metódu. Pokojne si môžete pridať aj [HttpGet] nad tú prvú Keď teraz odošlete validný dáta, presmeruje vás to na / home / index. Implementovať odoslanie na server budeme v ďalších dieloch. Chcel som v tomto diele prebrať aj layout (statickú časť stránky), ale som obmedzený znaky, tak sa máte aspoň na čo tešiť. Zdrojové kódy nájdete pod článkom.