Compartir a través de

Trabajar con formularios HTML en sitios de ASP.NET Web Pages (Razor)

  • Artículo

por Tom FitzMacken

Este artículo describe cómo procesar un formulario HTML (con cuadros de texto y botones) cuando trabaja en un sitio web de ASP.NET Web Pages (Razor).

Aprenderá lo siguiente:

  • Crear un formulario HTML.
  • Leer la entrada del usuario desde el formulario.
  • Validar los datos introducidos por el usuario.
  • Restaurar los valores del formulario después de enviar la página.

Los conceptos de programación ASP.NET presentados en el artículo son:

  • Objeto Request.
  • Validación de entrada.
  • Codificación HTML.

Versiones de software usadas en el tutorial

  • ASP.NET Web Pages (Razor) 3

Este tutorial también funciona con ASP.NET Web Pages 2.

Creación de un formulario HTML sencillo

  1. Cree un sitio web.

  2. En la carpeta raíz, cree una página web con el nombre Form.cshtml y escriba el código de marcado siguiente:

    <!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. Inicie la página en el explorador. (En WebMatrix, en el área de trabajo deArchivos, haga clic con el botón derecho en el archivo y seleccione Iniciar en el explorador.) Se muestra un formulario sencillo con tres campos de entrada y un botón Enviar.

    Screenshot of a form with three text boxes.

    Por ahora, si hace clic en el botón Enviar, no ocurre nada. Para que el formulario sirva, debe agregar código que se ejecutará en el servidor.

Lectura de la entrada del usuario desde el formulario

Para procesar el formulario, se agrega código que lea los valores de campo enviados y haga algo con ellos. Este procedimiento le muestra cómo leer los campos y ver la entrada del usuario en la página. (En una aplicación de producción, por lo normal, se hacen cosas más interesantes con la entrada del usuario, pero nos encargaremos de eso en el artículo sobre cómo trabajar con bases de datos.)

  1. En la parte superior del archivo Form.cshtml, escriba el siguiente código:

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

    Cuando el usuario solicite la página por primera vez, tan solo se muestra el formulario vacío. El usuario (en este caso, usted) rellena el formulario y, a continuación, hace clic en Enviar. Esto envía (publica, lo que en el código se muestra como post) la entrada del usuario al servidor. De forma predeterminada, la solicitud va a la misma página (es decir, Form.cshtml).

    Al enviar la página esta vez, los valores que escribió se muestran justo encima del formulario:

    Screenshot that shows the values you have entered displayed on the page.

    Examine el código de la página. En primer lugar, usa el método IsPost para determinar si la página se está publicando, es decir, si un usuario ha hecho clic en el botón Enviar. Si se trata de una publicación, IsPost devuelve true. Esta es la forma estándar de ASP.NET Web Pages de determinar si se trabaja con una solicitud inicial (una solicitud GET) o un postback (una solicitud POST). (Para obtener más información sobre GET y POST, consulte en la barra lateral "HTTP GET y POST y la propiedad IsPost" en Introduction a la programación de ASP.NET Web Pages con la sintaxis Razor.)

    A continuación, obtendrá los valores que el usuario introdujo en el objeto Request.Form y los colocará en variables para después. El objeto Request.Form contiene todos los valores que se enviaron con la página, cada uno identificado por una clave. La clave es equivalente al atributo name del campo de formulario que desea leer. Por ejemplo, para leer el campo companyname (cuadro de texto), use Request.Form["companyname"].

    Los valores del formulario se almacenan en el objeto Request.Form en forma de cadenas. Por tanto, cuando tenga que trabajar con un valor como un número o una fecha u otro tipo, debe convertirlo de una cadena a ese tipo. En el ejemplo, el método AsInt de Request.Form se usa para convertir el valor del campo "empleados", "employees" en el código, (que contiene un recuento de empleados) en un entero.

  2. Inicie la página en el explorador, rellene los campos de formulario y haga clic en Enviar. La página muestra los valores especificados.

Sugerencia

Codificación HTML para apariencia y seguridad

HTML tiene usos especiales para caracteres como <, >y &. Si estos caracteres especiales aparecen en sitios no esperados, pueden arruinar la apariencia y funcionalidad de la página web. Por ejemplo, el explorador interpreta el carácter < (a menos que vaya seguido de un espacio) como el principio de un elemento HTML, como <b> o <input ...>. Si el explorador no reconoce el elemento, sencillamente descarta la cadena que comienza con < hasta que alcanza algo que vuelve a reconocer. Como es lógico, esto puede dar lugar a una representación extraña en la página.

La codificación HTML reemplaza estos caracteres reservados por un código que los exploradores interpretan como el símbolo correcto. Por ejemplo, el carácter < se reemplaza por &lt; y el carácter > se reemplaza por &gt;. El explorador representa estas cadenas de reemplazo como los caracteres que desea ver.

Es una buena idea usar la codificación HTML cada vez que muestre cadenas (entrada) que obtuvo de un usuario. Si no lo hace, un usuario puede intentar que la página web ejecute un script malintencionado o haga otra cosa que ponga en peligro la seguridad del sitio o no sea lo que usted pretende. (Esto es de especial importancia si recoge la entrada del usuario, la almacena en algún lugar y, a continuación, la muestra después, por ejemplo, como un comentario de blog, opinión de usuario o similar.)

Para ayudar a evitar estos problemas, ASP.NET Web Pages codifica automáticamente en HTML cualquier contenido de texto que genere del código. Por ejemplo, cuando se muestra el contenido de una variable o expresión con código como @MyVar,ASP.NET Web Pages codifica automáticamente la salida.

Validar los datos introducidos por el usuario

Los usuarios se equivocan. Se les pide que rellenen un campo y olvidan poner el número de empleados y escriben un nombre en su lugar. Para asegurarse de que un formulario se ha rellenado correctamente antes de procesarlo, valide la entrada del usuario.

Este procedimiento muestra cómo validar los tres campos de formulario para asegurarse de que el usuario no los dejó en blanco. También comprueba que el valor de recuento de empleados es un número. Si hay errores, mostrará un mensaje de error que le indica al usuario qué valores no superaron la validación.

  1. En el archivo form.cshtml, reemplace el primer bloque de código por el siguiente código:

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

    Para validar la entrada del usuario, use el asistente Validation. Para registrar los campos obligatorios, llame a Validation.RequireField. Para registrar otros tipos de validación, llame a Validation.Add y especifique el campo que validar y el tipo de validación que se va a realizar.

    Al ejecutar la página, ASP.NET realiza toda la validación. Puede comprobar los resultados con una llamada a Validation.IsValid, devolverá true si todo ha superado la validación y false si algún campo dio error. Normalmente, se llama a Validation.IsValid antes de realizar cualquier procesamiento en la entrada del usuario.

  2. Actualice el elemento <body> con la inclusión de tres llamadas al método Html.ValidationMessage, de la siguiente manera:

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

    Para mostrar los mensajes de error de validación, puede llamar a Html.ValidationMessage y darle el nombre del campo para el que desea el mensaje.

  3. Ejecute la página. Deje los campos en blanco y haga clic en Enviar. Verá mensajes de error.

    Screenshot that shows error messages displayed if user input doesn't pass validation.

  4. Agregue una cadena (por ejemplo, "ABC") al campo de empleados y vuelva a hacer clic en Enviar. Esta vez verá un error que indica que la cadena no está en el formato correcto, en este caso, un entero.

    Screenshot that shows error messages displayed if users enter a string for the Employees field.

ASP.NET Web Pages proporciona más opciones para validar la entrada del usuario, entre estas, la capacidad de realizar la validación automáticamente con el script de cliente, de modo que los usuarios obtienen comentarios inmediatos en el explorador. Para más información, consulte la sección Recursos adicionales.

Restauración de valores de formulario después de postbacks

Al probar la página en la sección anterior, es posible que haya notado que si había un error de validación, todo lo que escribió (no solo los datos no válidos) se había ido y tenía reescribir los valores de todos los campos. Esto demuestra un hecho importante: cuando se envía una página, se procesa y representa de nuevo, la página se vuelve a crear desde cero. Como ha podido ver, esto significa que los valores presentes en la página cuando se envió se pierden.

No obstante, esto se puede corregir con facilidad. Tiene acceso a los valores enviados (en el objeto Request.Form), por lo que puede volver a rellenar esos valores en los campos del formulario cuando se representa la página.

  1. En el archivo Form.cshtml, reemplace los atributos value de los elementos <input> con el atributo 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>

    El atributo value de los elementos <input> se ha establecido para leer dinámicamente el valor del campo fuera del objeto Request.Form. La primera vez que se solicita la página, todos los valores del objeto Request.Form están vacíos. No pasa nada, porque de esa manera el formulario está en blanco.

  2. Inicie la página en el explorador, rellene o deje en blanco los campos de formulario y haga clic en Enviar. Se muestra una página con los valores enviados.

    forms-5

Recursos adicionales