Cargando



ASP.NET MVC - Formularios

En este tutorial veremos cómo crear un formulario utilizando ASP.NET MVC.


may 04 2014 03:41
Profesional
may 05 2014 12:25
En las aplicaciones web, la forma primaria en la que podemos obtener datos de un usuario es a través de los formularios, ya que en ellos podemos definir campos con etiquetas y hacer que se completen y luego utilizar esa información en pro de cumplir nuestros objetivos.

En ASP.NET MVC la construcción de formularios es bastante sencilla, ya que existen muchos métodos y utilidades que nos ayudan en la generación del HTML de forma que trabajemos menos y uniendo el formulario con las acciones del controlador podemos generar una funcionalidad de forma muy rápida.

Construyendo el Formulario

Como sabemos el concepto de formulario ha existido en la web desde sus inicios, es una de las formas más primitivas del HTML para capturar datos, pero esto no significa que sean obsoletos o ineficientes; con los nuevos cambios y estándares los formularios han ido ganando en funcionalidad, su combinación con Javascript permite realizar validaciones en vivo y podemos darles estilos de forma que luzcan como queramos. Veamos en la siguiente imagen un formulario sin estilos:

asp_formularios.jpg


Importante
ASP.NET MVC tiene una preferencia porque hagamos nuestros propios formularios, por ello nos ofrece herramientas llamadas helpers que nos ayudan a construir el HTML repetitivo de una forma más sencilla, tenemos métodos como Html.TextBox, Html.Password y otros que nos ayudan a generar los campos que tendremos dentro de los formularios.


Vamos a continuación como crear un formulario utilizando Razor y los diferentes helpers que tenemos disponibles, vamos ver el código y luego la explicación del mismo:

<h2>Crear Subasta</h2>
@using (Html.BeginForm()) {
<p>
	 @Html.LabelFor(model => model.Title)
	 @Html.EditorFor(model => model.Title)
</p>
<p>
	 @Html.LabelFor(model => model.Description)
	 @Html.EditorFor(model => model.Description)
</p>
<p>
	 @Html.LabelFor(model => model.StartPrice)
	 @Html.EditorFor(model => model.StartPrice)
</p>
<p>
	 @Html.LabelFor(model => model.EndTime)
	 @Html.EditorFor(model => model.EndTime)
</p>
<p>
	 <input type="submit" value="Crear" />
</p>
}

Lo primero que hacemos es crear una nueva vista, podemos llamarla Create.cshtml y dentro de este nuevo archivo vaciaremos el contenido del código; en el código primero escribimos un elemento HTML H2 esto es para establecer un título del documento, luego viene la parte interesante abrimos un bloque Razor con @using y dentro de este bloque iniciamos la construcción del formulario.

Dentro de cada bloque <p> vamos invocando a los diferentes helpers, en este caso estamos utilizando @Html.LabelFor(model => model.Title) y @Html.EditorFor(model => model.Title), si nos fijamos, como parámetros les pasamos una referencia al atributo del modelo, de esta forma generaremos elementos que correspondan con ellos.

Repetimos el proceso por cada uno de los atributos del modelo que necesitamos y al final creamos un elemento HTML para hacer el envío de la información y por último cerramos el bloque Razor que habíamos abierto.

Con todo lo descrito al acceder a la vista desde una acción del controlador tendremos un formulario HTML válido que luego podremos procesar para completar la funcionalidad deseada, como vemos a pesar que tenemos que construir el formulario de forma manual, las diferentes herramientas de ASP.NET nos permiten facilitar la vida del programador automatizando pequeños fragmentos y disminuyendo la cantidad de código escrito.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X