4 – Práce s formuláři

 
 

 

Formulář je část dokumentu HTML, ve které jsou umístěny prvky pro vstup uživatele, například textová pole, zaškrtávací políčka, přepínače nebo rozevírací seznamy. Formuláře slouží k získání a zpracování vstupu uživatele.

Co se naučíte:

V této kapitole budou představeny následující principy programování pomocí technologie ASP.NET:

 

 

Vytvoření jednoduchého formuláře HTML

  1. Vytvořte nový web.
  2. V kořenové složce vytvořte webovou stránku s názvem Form.cshtml a zadejte následující kód značkovacího jazyka:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Customer Form</title> 
        </head> 
        <body> 
          <form method="post" action=""> 
            <fieldset> 
              <legend>Add Customer</legend> 
              <div> 
                <label for="CompanyName">Company Name:</label> 
                <input type="text" name="CompanyName" value="" /> 
              </div> 
              <div> 
                <label for="ContactName">Contact Name:</label> 
                <input type="text" name="ContactName" value="" /> 
              </div> 
              <div> 
                <label for="Employees">Employee Count:</label> 
                <input type="text" name="Employees" value="" /> 
              </div> 
              <div> 
                <label> </label> 
                <input type="submit" value="Submit" class="submit" /> 
              </div> 
            </fieldset> 
          </form> 
        </body> 
    </html>
  3. Spusťte stránku v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.) Bude zobrazen jednoduchý formulář se třemi vstupními poli a tlačítkem Submit (Odeslat).

    ch04_forms-1

    Pokud v této fázi kliknete na tlačítko Submit (Odeslat), nic se nestane. Formulář bude užitečný až po přidání kódu, který bude spouštěn na serveru.

Čtení vstupu uživatele z formuláře

Pro zpracování formuláře přidáme kód, který přečte odeslané hodnoty polí a něco s nimi provede. Tento postup ukazuje, jak číst hodnoty polí a zobrazit na stránce vstup uživatele. (V aplikacích používaných v běžném provozu se obecně se vstupem uživatele provádějí zajímavější věci. K tomu se dostaneme v kapitole zabývající se prací s databázemi.)

  1. Do horní části souboru Form.cshtml zadejte následující kód:
    @{ 
        if (IsPost) { 
            string companyname = Request["companyname"]; 
            string contactname = Request["contactname"]; 
            int employeecount = Request["employees"].AsInt(); 
     
            <text> 
              You entered: <br /> 
              Company Name: @companyname <br /> 
              Contact Name: @contactname <br /> 
              Employee Count: @employeecount <br /> 
            </text> 
        } 
    }

    Stránka funguje tak, že když si uživatel poprvé stránku vyžádá, je zobrazen jen prázdný formulář. Uživatel (což budete vy) formulář vyplní a poté klikne na tlačítko Submit (Odeslat). Tím dojde k zaslání vstupu uživatele na server (pomocí metody post). Požadavek je doručen stejné stránce (tedy Form.cshtml), protože jsme při vytvoření formuláře v rámci předchozího postupu ponechali atribut action (akce) elementu form prázdný:

    <form method="post" action="">

    Když teď stránku odešlete, jsou zadané hodnoty zobrazeny hned nad formulářem:

    ch04_forms-2

    Prohlédněte si kód stránky. Nejprve pomocí metody IsPost (Je požadavek Post) zjistíme, zda stránka byla zaslána jako požadavek post, čili zda uživatel klikl na tlačítko Submit. Pokud se jedná o požadavek post, metoda IsPost vrací hodnotu true (pravda). Jedná se o standardní způsob, jak ve webových stránkách ASP.NET zjistit, zda pracujeme s počátečním požadavkem (požadavkem GET), nebo se zpětným vystavením (požadavkem POST). (Více informací o požadavcích GET a POST najdete na postranním panelu „Metody GET a POST protokolu HTTP a vlastnost IsPost“ v kapitole 2: úvod do programování webů ASP.NET s použitím syntaxe Razor.)

    Jako další krok získáme z objektu Request (Požadavek) hodnoty vyplněné uživatelem a uložíme je do proměnných pro pozdější použití. Objekt Request obsahuje všechny hodnoty zaslané spolu se stránkou. Každou z nich určuje její klíč. Klíč odpovídá atributu name (název) pole formuláře, který chceme přečíst. Pokud například chceme číst hodnotu z textového pole companyname (Název společnosti), použijeme výraz Request["companyname"].

    Hodnoty polí formuláře jsou v objektu Request uloženy jako řetězce. Pokud s hodnotou potřebujeme pracovat jako s číslem, datem nebo jiným typem, musíme ji převést z řetězce na tento typ. V našem příkladu převádíme na celé číslo hodnotu pole employees (zaměstnanci), obsahujícího počet zaměstnanců, pomocí metody AsInt (Jako integer) objektu Request .

  2. Spusťte stránku v prohlížeči, vyplňte pole ve formuláři a klikněte na tlačítko Submit (Odeslat). Stránka zobrazí vámi zadané hodnoty.

    ch04_forms-3

Kódování HTML pro zajištění vzhledu a zabezpečení

V jazyce HTML mají znaky jako například <, > nebo & speciální použití. Pokud by se tyto speciální znaky objevily na neočekávaném místě, mohly by narušit vzhled a funkčnost webové stránky. Prohlížeč například interpretuje znak < (pokud po něm nenásleduje mezera) jako začátek elementu jazyka HTML, například <b> nebo <input ...>. Pokud prohlížeč element nerozpozná, řetězec začínající znakem < jednoduše vynechá, dokud nenarazí na něco, co opět dokáže rozpoznat. To může samozřejmě způsobit podivné vykreslení stránky.

Kódování HTML tyto vyhrazené znaky nahrazuje kódem, který je prohlížeči interpretován jako správný symbol. Znak < je například nahrazen kódem &lt; a znak > kódem &gt;. Prohlížeč tyto nahrazené řetězce vykreslí jako znaky, které chceme vidět.

Kódování HTML je vhodné používat vždy, když chcete zobrazit řetězce (vstup) pocházející od uživatele. Pokud to neuděláte, uživatel se může pokusit přimět vaši webovou stránku, aby spustila škodlivý skript nebo provedla něco, co by poškodilo zabezpečení vašeho webu, nebo se prostě nezobrazila tak, jak jste zamýšleli. (To je obzvlášť důležité, pokud přebíráte vstup uživatele, někam ho ukládáte a následně jej zobrazujete – například jako komentář blogu, recenzi uživatele nebo něco podobného.)

Ověření vstupu uživatele

Uživatelé dělají chyby. Požádáte je, aby vyplnili určité pole, a oni to zapomenou udělat. Nebo je požádáte, aby zadali počet zaměstnanců, a oni místo toho zadají jméno. Jistotu, že byl formulář vyplněn správně, získáte před jeho zpracováním tak, že vstup uživatele ověříte.

Tento postup ukazuje, jak ověřit všechny tři pole formuláře a ujistit se, že je uživatel neponechal prázdné. Můžete také zkontrolovat, zda hodnota pole s počtem zaměstnanců představuje číslo. Pokud se vyskytnou chyby, zobrazíme chybovou zprávu pro uživatele s upozorněním na hodnoty, které byly při ověření zamítnuty.

  1. Nahraďte první blok kódu v souboru Form.cshtml následujícím kódem:
    @{ 
        if (IsPost)  { 
            var errors = false; 
            var companyname = Request["companyname"]; 
            if (companyname.IsEmpty()) { 
                errors = true; 
                @:Company name is required.<br /> 
            } 
            var contactname = Request["contactname"]; 
            if (contactname.IsEmpty()) { 
                errors = true; 
                @:Contact name is required.<br /> 
            } 
            var employeecount = 0; 
            if (Request["employees"].IsInt()) { 
                employeecount = Request["employees"].AsInt(); 
            } else { 
                errors = true; 
                @:Employee count must be a number.<br /> 
            } 
            if (errors == false) { 
                <text> 
                  You entered: <br /> 
                  Company Name: @companyname <br /> 
                  Contact Name: @contactname <br /> 
                  Employee Count: @employeecount <br /> 
                </text> 
            }    } 
    }

    Tento kód se podobá nahrazenému kódu, ale existuje mezi nimi několik rozdílů. Prvním rozdílem je, že kód inicializuje proměnnou s názvem errors (chyby) na hodnotu false (nepravda). Tuto proměnnou nastavíme na hodnotu true (pravda) v případě, že nebude splněn některý z ověřovacích testů.

    Při každém načtení hodnoty pole formuláře kód provádí ověřovací test. Pole companyname (název společnosti) a contactname (jméno kontaktu) jsou ověřena voláním funkce IsEmpty (Je prázdné). Pokud tento test není splněn (tzn. pokud funkce IsEmpty vrátí hodnotu true), kód nastaví proměnnou errors na hodnotu true a je zobrazena příslušná chybová zpráva.

    V dalším kroku ověřujeme, zda pro pole employees obsahující počet zaměstnanců uživatel zadal číselnou hodnotu (celé číslo). K tomu slouží volání funkce IsInt (Je celé číslo). Tato funkce vrací hodnotu true, pokud je možné testovanou hodnotu převést z řetězce na celé číslo. (A samozřejmě hodnotu false, pokud hodnotu není možné převést.) Pamatujte, že všechny hodnoty v objektu Request (Požadavek) jsou řetězce. V tomto příkladu na tom nezáleží, ale pokud byste s hodnotou chtěli provádět matematické operace, hodnota by musela být převedena na číslo.

    Pokud funkce IsInt zjistí, že hodnota představuje celé číslo, nastavíme proměnnou employeecount (počet zaměstnanců) na tuto hodnotu. Než to provedeme, musíme ale hodnotu převést na celé číslo, protože při inicializaci proměnné employeecount byl použit datový typ int. Lze vysledovat určité schéma: funkce IsInt zjistí, zda se jedná o celé číslo. Funkce AsInt na dalším řádku provede samotný převod. A pokud funkce IsInt nevrátí hodnotu true, příkazy v bloku else nastaví proměnnou errors na hodnotu true.

    Na závěr po provedení všech testů kód zjistí, zda je proměnná errors (chyby) stále nastavena na hodnotu false. Pokud ano, kód zobrazí blok textu obsahující hodnoty zadané uživatelem. Spusťte stránku v prohlížeči, ponechte pole ve formuláři prázdná a klikněte na tlačítko Submit (Odeslat). Budou zobrazeny chyby.

    ch04_forms-4

  2. Zadejte hodnoty do polí formuláře a pak klikněte na tlačítko Submit (Odeslat). Bude zobrazena stránka s odeslanými hodnotami, tak jako dříve.

Obnovení hodnot formuláře po zpětném vystavení

Při testování stránky v předchozí části jste si možná všimli, že pokud došlo k chybě ověření, vše, co jste zadali, zmizelo (nejen neplatná data) a museli jste znovu zadat hodnoty pro všechna pole. To dokládá jednu důležitou skutečnost: při odeslání stránky, jejím zpracování a opětovném vykreslení je stránka znovu vytvořena zcela od začátku. Jak jste viděli, znamená to, že jsou ztraceny veškeré hodnoty, které byly na stránce při jejím odeslání.

To lze ale snadno napravit. K zadaným hodnotám máme přístup (v objektu Request), a proto můžeme při vykreslení stránky tyto hodnoty ve formuláři opět vyplnit.

  1. Nahraďte výchozí stránku v souboru Form.cshtml následujícím kódem značkovacího jazyka:
    <!DOCTYPE html> 
    <html> 
        <head> 
            <title>Customer Form</title> 
        </head> 
        <body> 
          <form method="post" action=""> 
            <fieldset> 
              <legend>Add Customer</legend> 
              <div> 
                <label for="CompanyName">Company Name:</label> 
                <input type="text" name="CompanyName" 
                       value="@Request["companyname"]" /> 
              </div> 
              <div> 
                <label for="ContactName">Contact Name:</label> 
                <input type="text" name="ContactName" 
                       value="@Request["contactname"]" /> 
              </div> 
              <div> 
                <label for="Employees">Employee Count:</label> 
                <input type="text" name="Employees" value="@Request["employees"]" /> 
              </div> 
              <div> 
                <label> </label> 
                <input type="submit" value="Submit" class="submit" /> 
              </div> 
            </fieldset> 
          </form> 
        </body> 
    </html>

    Atribut value (hodnota) je u vstupních elementů <input> nastaven tak, aby dynamicky četl hodnoty polí z objektu Request (Požadavek). Při prvním vyžádání stránky jsou všechny hodnoty v objektu Request prázdné. To je v pořádku, protože takto formulář zůstane prázdný.

  2. Spusťte stránku v prohlížeči, vyplňte pole ve formuláři nebo je ponechte prázdná a klikněte na tlačítko Submit (Odeslat). Bude zobrazena stránka s odeslanými hodnotami.

    ch04_forms-5

Další materiály