Práce s formuláři HTML na webech ASP.NET Web Pages (Razor)

Článek
07/13/2023

Tento článek popisuje, jak zpracovat formulář HTML (s textovými poli a tlačítky) při práci na webu ASP.NET Web Pages (Razor).

Co se naučíte:

Jak vytvořit formulář HTML.

Jak číst vstup uživatele z formuláře.

Postup ověření vstupu uživatele

Jak obnovit hodnoty formuláře po odeslání stránky.

Toto jsou ASP.NET programovací koncepty představené v tomto článku:

Objekt Request

Ověření vstupu.

Kódování HTML.

Verze softwaru použité v kurzu

ASP.NET Webové stránky (Razor) 3

Tento kurz funguje také s webovými stránkami ASP.NET 2.

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

Vytvořte nový web.

V kořenové složce vytvořte webovou stránku s názvem Form.cshtml a zadejte následující kód:

<!DOCTYPE html>
<html>
    <head>
        <title>Customer Form</title>
    </head>
    <body>
      <form method="post" >
        <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>&nbsp;</label>
            <input type="submit" value="Submit" class="submit" />
          </div>
        </fieldset>
      </form>
    </body>
</html>

Spusťte stránku v prohlížeči. (V nástroji WebMatrix klikněte v pracovním prostoru Soubory pravým tlačítkem na soubor a pak vyberte Spustit v prohlížeči.) Zobrazí se jednoduchý formulář se třemi vstupními poli a tlačítkem Odeslat .

Pokud v tomto okamžiku kliknete na tlačítko Odeslat , nic se nestane. Aby byl formulář užitečný, musíte přidat kód, který poběží na serveru.

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

Ke zpracování formuláře přidáte kód, který přečte hodnoty odeslaných polí a něco s nimi provede. Tento postup ukazuje, jak číst pole a zobrazit vstup uživatele na stránce. (V produkční aplikaci obvykle děláte zajímavější věci s uživatelským vstupem. Uděláte to v článku o práci s databázemi.)

V horní části souboru Form.cshtml zadejte následující kód:
```
@{
    if (IsPost) {
        string companyname = Request.Form["companyname"];
        string contactname = Request.Form["contactname"];
        int employeecount = Request.Form["employees"].AsInt();

        <text>
          You entered: <br />
          Company Name: @companyname <br />
          Contact Name: @contactname <br />
          Employee Count: @employeecount <br />
        </text>
    }
}
```
Když uživatel poprvé požádá o stránku, zobrazí se pouze prázdný formulář. Uživatel (kterým budete vy) vyplní formulář a potom klikne na Odeslat. Tím se odešle (publikuje) uživatelský vstup na server. Ve výchozím nastavení přejde požadavek na stejnou stránku (konkrétně Form.cshtml).

Když tentokrát stránku odešlete, zobrazí se hodnoty, které jste zadali, přímo nad formulářem:

Podívejte se na kód stránky. Nejprve pomocí IsPost metody určíte, jestli se stránka publikuje – tedy jestli uživatel klikl na tlačítko Odeslat . Pokud se jedná o příspěvek, IsPost vrátí hodnotu true. Jedná se o standardní způsob ASP.NET webových stránek, který umožňuje určit, jestli pracujete s počátečním požadavkem (požadavek GET) nebo postbackem (požadavek POST). (Další informace o rutinách GET a POST najdete na bočním panelu HTTP GET a POST a vlastnost IsPost v úvodu k programování webových stránek ASP.NET pomocí syntaxe Razor.)

Dále získáte hodnoty, které uživatel vyplnil, z objektu Request.Form a vložíte je do proměnných pro pozdější použití. Objekt Request.Form obsahuje všechny hodnoty, které byly odeslány se stránkou, každou identifikovanou klíčem. Klíč je ekvivalentem atributu name pole formuláře, které chcete přečíst. Pokud chcete například přečíst companyname pole (textové pole), použijte Request.Form["companyname"].

Hodnoty formuláře jsou uloženy v objektu Request.Form jako řetězce. Pokud tedy potřebujete pracovat s hodnotou jako číslem, datem nebo jiným typem, musíte ji převést z řetězce na tento typ. V tomto příkladu AsInt se metoda Request.Form používá k převodu hodnoty pole employees (které obsahuje počet zaměstnanců) na celé číslo.
Spusťte stránku v prohlížeči, vyplňte pole formuláře a klikněte na Odeslat. Stránka zobrazí hodnoty, které jste zadali.

Tip

Kódování HTML pro vzhled a zabezpečení

Html má speciální použití pro znaky, jako jsou <, >a &. Pokud se tyto speciální znaky zobrazují tam, kde se neočekávají, můžou zničit vzhled a funkčnost webové stránky. Prohlížeč například interpretuje < znak (pokud není následovaný mezerou) jako začátek elementu HTML, například <b> nebo <input ...>. Pokud prohlížeč element nerozpozná, jednoduše zahodí řetězec, který začíná < , dokud nedosáhne něčeho, co znovu rozpozná. Je zřejmé, že to může mít za následek nějaké divné vykreslování na stránce.

Kódování HTML nahrazuje tyto vyhrazené znaky kódem, který prohlížeče interpretují jako správný symbol. Například znak < se nahradí znakem < a > znak se nahradí znakem >. Prohlížeč vykreslí tyto náhradní řetězce jako znaky, které chcete zobrazit.

Kódování HTML je vhodné použít pokaždé, když zobrazíte řetězce (vstup), které jste získali od uživatele. Pokud to neuděláte, může se uživatel pokusit získat vaši webovou stránku, aby spustil škodlivý skript nebo udělal něco jiného, co by ohrozilo zabezpečení webu nebo to prostě není to, co máte v úmyslu. (To je zvlášť důležité, pokud vezmete uživatelský vstup, uložíte někam a pak ho později zobrazíte – například jako komentář blogu, recenzi uživatelem nebo něco podobného.)

Chcete-li těmto problémům předejít, ASP.NET webové stránky automaticky kóduje veškerý textový obsah, který vypíšete z kódu, kód HTML. Když například zobrazíte obsah proměnné nebo výrazu pomocí kódu, jako @MyVarje , ASP.NET Webové stránky automaticky zakódují výstup.

Ověřování vstupu uživatele

Uživatelé dělají chyby. Požádáte je, aby vyplnili pole, a oni na to zapomenou, nebo je požádáte, aby zadali počet zaměstnanců a oni místo toho zadají jméno. Abyste se ujistili, že byl formulář před jeho zpracováním vyplněn správně, ověřte vstup uživatele.

Tento postup ukazuje, jak ověřit všechna tři pole formuláře, abyste měli jistotu, že je uživatel nenechal prázdná. Zkontrolujete také, že hodnota počtu zaměstnanců je číslo. Pokud dojde k chybám, zobrazí se chybová zpráva s informacemi o tom, jaké hodnoty neprošly ověřením.

V souboru Form.cshtml nahraďte první blok kódu následujícím kódem:

@{
    Validation.RequireField("companyname", "Company name is required.");
    Validation.RequireField("contactname", "Contact name is required.");
    Validation.RequireField("employees", "Employee count is required.");
    Validation.Add("employees", Validator.Integer());

    if (IsPost)  {
        var companyname = Request.Form["companyname"];
        var contactname = Request.Form["contactname"];
        var employeecount = Request.Form["employees"];
        if(Validation.IsValid()){
            <text>
              You entered: <br />
              Company Name: @companyname <br />
              Contact Name: @contactname <br />
              Employee Count: @employeecount <br />
            </text>
        }
    }
}

Pokud chcete ověřit vstup uživatele, použijte pomocnou rutinu Validation . Požadovaná pole zaregistrujete voláním Validation.RequireFieldmetody . Další typy ověření zaregistrujete voláním Validation.Add a zadáním pole, které chcete ověřit, a typu ověření, které se má provést.

Když se stránka spustí, ASP.NET provede veškeré ověření za vás. Výsledky můžete zkontrolovat voláním Validation.IsValidmetody , která vrátí hodnotu true, pokud vše proběhlo úspěšně, a hodnotu false, pokud se ověření některého pole nezdařilo. Obvykle voláte Validation.IsValid před provedením jakéhokoli zpracování uživatelského vstupu.

<body> Aktualizujte element přidáním tří volání do Html.ValidationMessage metody následujícím způsobem:

<body>
  <form method="post">
    <fieldset>
      <legend>Add Customer</legend>
      <div>
         <label for="CompanyName">Company Name:</label>
         <input type="text" name="CompanyName" value="" />
         @Html.ValidationMessage("companyname")
      </div>
      <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName" value="" />
         @Html.ValidationMessage("contactname")
      </div>
      <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees" value="" />
         @Html.ValidationMessage("employees")
      </div>
      <div>
         <label>&nbsp;</label>
         <input type="submit" value="Submit" class="submit" />
      </div>
    </fieldset>
  </form>
</body>

Chcete-li zobrazit chybové zprávy ověřování, můžete volat html.ValidationMessage a předejte mu název pole, pro které chcete zprávu zobrazit.

Spusťte stránku. Nechejte pole prázdná a klikněte na Odeslat. Zobrazí se chybové zprávy.
Do pole Employee Count (Počet zaměstnanců) přidejte řetězec (například "ABC") a znovu klikněte na Submit (Odeslat). Tentokrát se zobrazí chyba, která značí, že řetězec není ve správném formátu, konkrétně celé číslo.

ASP.NET webové stránky poskytují více možností pro ověření vstupu uživatele, včetně možnosti automatického ověření pomocí klientského skriptu, aby uživatelé získali okamžitou zpětnou vazbu v prohlížeči. Další informace najdete později v části Další zdroje informací.

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

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šechno, co jste zadali (nejen neplatná data), zmizelo a museli jste znovu zadat hodnoty pro všechna pole. To ukazuje důležitý bod: když odešlete stránku, zpracujete ji a pak ji znovu vykreslíte, stránka se znovu vytvoří od začátku. Jak jste viděli, znamená to, že všechny hodnoty, které byly na stránce při odeslání, se ztratí.

Můžete to ale snadno opravit. Máte přístup k hodnotám, které byly odeslány (v objektu Request.Form ), takže tyto hodnoty můžete při vykreslení stránky vyplnit zpět do polí formuláře.

V souboru Form.cshtml nahraďte value atributy elementů <input> pomocí atributu value .:

<!DOCTYPE html>
<html>
  <head>
    <title>Customer Form</title>
  </head>
  <body>
    <form method="post">
      <fieldset>
        <legend>Add Customer</legend>
        <div>
          <label for="CompanyName">Company Name:</label>
          <input type="text" name="CompanyName"
                 value="@Request.Form["companyname"]"  />
          @Html.ValidationMessage("companyname")
        </div>
        <div>
         <label for="ContactName">Contact Name:</label>
         <input type="text" name="ContactName"
                value="@Request.Form["contactname"]" />
         @Html.ValidationMessage("contactname")
        </div>
        <div>
         <label for="Employees">Employee Count:</label>
         <input type="text" name="Employees"
                value="@Request.Form["employees"]" />
         @Html.ValidationMessage("employees")
        </div>
        <div>
          <label>&nbsp;</label>
          <input type="submit" value="Submit" class="submit" />
        </div>
    </fieldset>
  </form>
</body>

Atribut value elementů <input> byl nastaven tak, aby dynamicky načítal hodnotu pole z objektu Request.Form . Při prvním vyžádání stránky jsou všechny hodnoty v objektu Request.Form prázdné. To je v pořádku, protože tímto způsobem je formulář prázdný.

Spusťte stránku v prohlížeči, vyplňte pole formuláře nebo je nechte prázdná a klikněte na Odeslat. Zobrazí se stránka s odeslanými hodnotami.

Sdílet prostřednictvím