Condividi tramite

Uso dei moduli HTML nei siti Pagine Web ASP.NET (Razor)

  • Articolo

di Tom FitzMacken

Questo articolo descrive come elaborare un modulo HTML (con caselle di testo e pulsanti) quando si lavora in un sito Web Pagine Web ASP.NET (Razor).

Cosa si apprenderà:

  • Come creare un modulo HTML.
  • Come leggere l'input utente dal modulo.
  • Come convalidare l'input utente.
  • Come ripristinare i valori del modulo dopo l'invio della pagina.

Questi sono i concetti di programmazione ASP.NET introdotti nell'articolo:

  • Oggetto Request.
  • Convalida dell'input.
  • Codifica HTML.

Versioni software usate nell'esercitazione

  • Pagine Web ASP.NET (Razor) 3

Questa esercitazione funziona anche con Pagine Web ASP.NET 2.

Creazione di un modulo HTML semplice

  1. Creare un nuovo sito Web.

  2. Nella cartella radice creare una pagina Web denominata Form.cshtml e immettere il markup seguente:

    <!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>

  3. Avviare la pagina nel browser. In WebMatrix, nell'area di lavoro File fare clic con il pulsante destro del mouse sul file e quindi scegliere Avvia nel browser. Viene visualizzato un modulo semplice con tre campi di input e viene visualizzato un pulsante Invia .

    Screenshot di un modulo con tre caselle di testo.

    A questo punto, se si fa clic sul pulsante Invia , non accade nulla. Per rendere utile il modulo, è necessario aggiungere un codice che verrà eseguito nel server.

Lettura dell'input utente dal modulo

Per elaborare il modulo, aggiungere codice che legge i valori di campo inviati e esegue un'operazione con loro. Questa procedura illustra come leggere i campi e visualizzare l'input dell'utente nella pagina. In un'applicazione di produzione, in genere si fanno più interessanti operazioni con l'input utente. Questa operazione verrà eseguita nell'articolo relativo all'uso dei database.

  1. Nella parte superiore del file Form.cshtml immettere il codice seguente:

    @{
    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>
    }
}

    Quando l'utente richiede prima la pagina, viene visualizzato solo il modulo vuoto. L'utente (che sarà) compila il modulo e quindi fa clic su Invia. Questo invia (post) l'input dell'utente al server. Per impostazione predefinita, la richiesta passa alla stessa pagina (ovvero Form.cshtml).

    Quando si invia la pagina questa volta, i valori immessi vengono visualizzati appena sopra il modulo:

    Screenshot che mostra i valori immessi nella pagina.

    Esaminare il codice per la pagina. Per prima cosa si usa il IsPost metodo per determinare se la pagina viene pubblicata, ovvero se un utente ha fatto clic sul pulsante Invia . Se si tratta di un post, IsPost restituisce true. Si tratta del modo standard in Pagine Web ASP.NET per determinare se si usa una richiesta iniziale (una richiesta GET) o un postback (una richiesta POST). Per altre informazioni su GET e POST, vedere la barra laterale "HTTP GET e POST e la proprietà IsPost" in Introduzione alla programmazione Pagine Web ASP.NET usando la sintassi Razor.

    Successivamente, si ottengono i valori compilati dall'utente dall'oggetto Request.Form e li si inserisce in variabili per un secondo momento. L'oggetto Request.Form contiene tutti i valori inviati con la pagina, ognuno identificato da una chiave. La chiave è l'equivalente all'attributo name del campo modulo da leggere. Ad esempio, per leggere il companyname campo (casella di testo), si usa Request.Form["companyname"].

    I valori del modulo vengono archiviati nell'oggetto Request.Form come stringhe. Pertanto, quando è necessario usare un valore come numero o una data o un altro tipo, è necessario convertirlo da una stringa a tale tipo. Nell'esempio viene usato il AsInt metodo dell'oggetto Request.Form per convertire il valore del campo dipendenti (che contiene un conteggio dei dipendenti) in un numero intero.

  2. Avviare la pagina nel browser, compilare i campi del modulo e fare clic su Invia. Nella pagina vengono visualizzati i valori immessi.

Suggerimento

Codifica HTML per aspetto e sicurezza

HTML ha usi speciali per i caratteri come <, >e &. Se questi caratteri speciali vengono visualizzati dove non sono previsti, possono rovinare l'aspetto e la funzionalità della pagina Web. Ad esempio, il browser interpreta il < carattere (a meno che non sia seguito da uno spazio) come inizio di un elemento HTML, ad <b> esempio o <input ...>. Se il browser non riconosce l'elemento, rimuove semplicemente la stringa che inizia < con finché non raggiunge qualcosa che riconosce di nuovo. Ovviamente, questo può comportare un rendering strano nella pagina.

La codifica HTML sostituisce questi caratteri riservati con un codice che i browser interpretano come simbolo corretto. Ad esempio, il < carattere viene sostituito con &lt; e il > carattere viene sostituito con &gt;. Il browser esegue il rendering di queste stringhe di sostituzione come caratteri da visualizzare.

È consigliabile usare la codifica HTML ogni volta che si visualizzano stringhe (input) ottenute da un utente. In caso contrario, un utente può provare a ottenere la pagina Web per eseguire uno script dannoso o fare qualcosa di altro che compromette la sicurezza del sito o che non è solo quello che si intende. Questo è particolarmente importante se si accetta l'input dell'utente, archiviarlo in un posto e quindi visualizzarlo in un secondo momento, ad esempio come commento di blog, revisione utente o qualcosa di simile.

Per evitare questi problemi, Pagine Web ASP.NET codifica automaticamente html qualsiasi contenuto di testo restituito dal codice. Ad esempio, quando si visualizza il contenuto di una variabile o di un'espressione usando il codice, @MyVarad esempio , Pagine Web ASP.NET codifica automaticamente l'output.

Convalida dell'input utente

Gli utenti fanno errori. Si chiede loro di compilare un campo e si dimentica di o si chiede loro di immettere il numero di dipendenti e digitano invece un nome. Per assicurarsi che un modulo sia stato compilato correttamente prima di elaborarlo, convalidare l'input dell'utente.

Questa procedura illustra come convalidare tutti e tre i campi del modulo per assicurarsi che l'utente non li abbia lasciati vuoti. Si verifica anche che il valore del conteggio dei dipendenti sia un numero. Se si verificano errori, verrà visualizzato un messaggio di errore che indica all'utente quali valori non hanno superato la convalida.

  1. Nel file Form.cshtml sostituire il primo blocco di codice con il codice seguente:

    @{
    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>
        }
    }
}

    Per convalidare l'input utente, usare l'helper Validation . Registrare i campi obbligatori chiamando Validation.RequireField. Si registrano altri tipi di convalida chiamando Validation.Add e specificando il campo da convalidare e il tipo di convalida da eseguire.

    Quando viene eseguita la pagina, ASP.NET esegue tutte le operazioni di convalida. È possibile controllare i risultati chiamando Validation.IsValid, che restituisce true se tutto è passato e false se qualsiasi campo ha avuto esito negativo. In genere, si chiama Validation.IsValid prima di eseguire qualsiasi elaborazione sull'input dell'utente.

  2. Aggiornare l'elemento <body> aggiungendo tre chiamate al Html.ValidationMessage metodo, come illustrato di seguito:

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

    Per visualizzare i messaggi di errore di convalida, è possibile chiamare Html.ValidationMessage e passa il nome del campo per cui si vuole il messaggio.

  3. Eseguire la pagina. Lasciare vuoti i campi e fare clic su Invia. Vengono visualizzati messaggi di errore.

    Screenshot che mostra i messaggi di errore visualizzati se l'input utente non passa la convalida.

  4. Aggiungere una stringa (ad esempio ,"ABC") al campo Conteggio dipendenti e fare di nuovo clic su Invia . Questa volta viene visualizzato un errore che indica che la stringa non è nel formato corretto, ovvero un intero.

    Screenshot che mostra i messaggi di errore visualizzati se gli utenti immettono una stringa per il campo Dipendenti.

Pagine Web ASP.NET offre altre opzioni per convalidare l'input utente, inclusa la possibilità di eseguire automaticamente la convalida usando lo script client, in modo che gli utenti ottengano un feedback immediato nel browser. Per altre informazioni, vedere la sezione Risorse aggiuntive .

Ripristino dei valori del modulo dopo il postback

Quando è stata testata la pagina nella sezione precedente, potrebbe essere stato notato che se si è verificato un errore di convalida, tutto ciò che è stato immesso (non solo i dati non validi) è andato e si è dovuto immettere nuovamente i valori per tutti i campi. Questo illustra un punto importante: quando si invia una pagina, lo si elabora e quindi si esegue di nuovo il rendering della pagina, la pagina viene ricreata da zero. Come si è visto, ciò significa che tutti i valori presenti nella pagina quando è stato inviato vengono persi.

È tuttavia possibile risolvere questo problema facilmente. È possibile accedere ai valori inviati (nell'oggetto Request.Form , in modo da poter riempire tali valori nei campi del modulo quando viene eseguito il rendering della pagina.

  1. Nel file Form.cshtml sostituire gli value attributi degli <input> elementi usando l'attributo 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>

    L'attributo value degli <input> elementi è stato impostato per leggere dinamicamente il valore del campo dall'oggetto Request.Form . La prima volta che viene richiesta la pagina, i valori dell'oggetto Request.Form sono tutti vuoti. Questo è corretto, perché in questo modo il modulo è vuoto.

  2. Avviare la pagina nel browser, compilare i campi del modulo o lasciarli vuoti e fare clic su Invia. Viene visualizzata una pagina che mostra i valori inviati.

    form-5

Risorse aggiuntive