Post 11. Helpers (I) ActionLink y BeginForm

En este post mostraremos como utilizar los Helpers básicos y más usados en Razor, como ya habíamos comentado anteriormente los helpers son funciones que nos permiten generar codigo HTML, principalmente elementos de formularios (aunque podamos generar prácticamente cualquier tipo de código html). Los helpers que revisaremos a continuación poseen numerosos constructores pero solo mostraremos los más utilizados (en mi experiencia personal).

Antes de empezar, puedes descargar el siguiente proyecto para que puedas hacer seguir los pasos por ti mismo.

@Html.ActionLink

Esta función nos permite generar enlaces, es decir elementos con la etiqueta <a>.

@Html.ActionLink(linkText, actionName)
@Html.ActionLink(linkText, actionName, routeValues)
@Html.ActionLink(linkText, actionName, controllerName)
@Html.ActionLink(linkText, actionName, routeValues, htmlAttributes)
@Html.ActionLink(linkText, actionName, controllerName, htmlAttributes)
@Html.ActionLink(linkText, actionName, controllerName, routeValues, htmlAttributes)

Atributo	Tipo Dato	Descripción
linkText	String	Texto a Mostrar en el Enlace.
actionName	String	Nombre de la Acción a la que se desea redireccionar.
routeValues	Object	Parametros que se desean agregar a la URL (GET).
controllerName	String	Nombre del controlador al que se desea redireccionar. En caso de redireccionar a una acción del mismo controllador no es obligatorio especificarlo.
htmlAttributes	Object	Atributos HTML que se deseen agregar a la etiqueta, tales como class, id, style, etc.

Para hacer mas dinámico nuestro proyecto agregaremos los siguientes ActionLink a la vista index, en los cuales veremos los distintos usos que se les da a este helper:

@Html.ActionLink("BeginForm", "BeginForm")<br />
@Html.ActionLink("Label", "Label", new { mensaje="Hola"})<br />
@Html.ActionLink("TextBox", "TextBox", "Home")<br />
@Html.ActionLink("Hidden", "Hidden", new { indice=1 }, new { style="font-weight:bold;" })<br />
@Html.ActionLink("CheckBox", "CheckBox","Home", new { style="color:green;" })<br />
@Html.ActionLink("DropDownList", "DropDownList", "Home", new { indice=1 }, new { style="font-style:italic;" })<br />
@Html.ActionLink("RadioButton", "RadioButton", "Home", new{ @class="yellowCode" })<br/>
@Html.ActionLink("TextArea", "TextArea")<br />
@Html.ActionLink("ListBox", "ListBox")<br />
@Html.ActionLink("Ejemplo 1", "Ejemplo1")<br />
@Html.ActionLink("Ejemplo 2", "Ejemplo2")<br />
@Html.ActionLink("Ejemplo 3", "Ejemplo3")<br />

Nótese que en el ejemplo anterior se uso la palabra class con un @, ésto se hace para razor pueda diferenciar la palabra reserva class con el atributo html class.
Debemos también agregar las siguientes acciones a nuestro controlador Home, así mismo debemos crear una vista (en blanco) para cada uno de ellos:

public ActionResult BeginForm() { return View(); }
public ActionResult Label() { return View(); }
public ActionResult TextBox() { return View(); }
public ActionResult Hidden() { return View(); }
public ActionResult CheckBox() { return View(); }
public ActionResult DropDownList() { return View(); }
public ActionResult RadioButton() { return View(); }
public ActionResult TextArea() { return View(); }
public ActionResult ListBox() { return View(); }
public ActionResult Ejemplo1() { return View(); }
public ActionResult Ejemplo2() { return View(); }
public ActionResult Ejemplo3() { return View(); }

Al ejecutar nuestro Código debemos tener lo siguiente:

@Html.BeginForm 

Este Helper es el principal, ya que todos los otros helpers tendrán que utilizarce "dentro" de este Helper, al igual como los campos del formulario están dentro de las etiquetas <form> y </form>.

@Html.BeginForm()
@Html.BeginForm(routeValues)
@Html.BeginForm(actionName, controllerName)
@Html.BeginForm(actionName, controllerName, method)
@Html.BeginForm(actionName, controllerName, routeValues)
@Html.BeginForm(actionName, controllerName, method, htmlAttributes)
@Html.BeginForm(actionName, controllerName, routeValues, method)
@Html.BeginForm(actionName, controllerName, routeValues, method, htmlAttributes)

Atributo	Tipo Dato	Descripción
routeValues	Object	Parametros que se desean agregar a la URL (GET).
actionName	String	Nombre de la Acción a la que se desea redireccionar.
controllerName	String	Nombre del controlador al que se desea redireccionar. Si no se especifica una Acción y un Controlador el atributo acción tendrá como valor "/", lo que significa que se enviará a la misma página.
method	FormMethod	Clase que nos indica el tipo de methodo a usar en el formulario: Get o Post, SI no se escifica un methodo el atributo method tendrá como valor "post".
htmlAttributes	Object	Atributos HTML que se deseen agregar a la etiqueta, tales como class, id, style, etc.

Existen dos formas de utilizar este helper, ambas generan el mismo código html.

@using (Html.BeginForm()) {
   @* Campos del Formulario *@
}

@{Html.BeginForm();}
   @* Campos del Formulario *@
@{Html.EndForm();}

 En ambos casos el resultado será:

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

A continuación mostraremos mas ejemplos de los diferentes usos de BeginForm.

@using(Html.BeginForm()) {}
@using(Html.BeginForm(new { id = 5, genero = "Comedia"})) {}
@using(Html.BeginForm("BeginForm", "Home")) {}
@using(Html.BeginForm("BeginForm", "Home", FormMethod.Post)) {}
@using(Html.BeginForm("BeginForm", "Home", new { id = 12 })) {}
@using(Html.BeginForm("BeginForm", "Home", FormMethod.Get, new { id="FormPrincipal"})){}
@using(Html.BeginForm("BeginForm", "Home", new { idAutor = 4 }, FormMethod.Get)) {}
@using(Html.BeginForm("BeginForm", "Home", new { idLibro = 78 }, FormMethod.Post, new { id = "FormBusqueda" })) { }

Y el resultado para estos ejemplos es:

<form action="/" method="post"></form>
<form action="/Home/BeginForm/5?genero=Comedia" method="post"></form>
<form action="/Home/BeginForm" method="post"></form>
<form action="/Home/BeginForm" method="post"></form>
<form action="/Home/BeginForm/12" method="post"></form>
<form action="/Home/BeginForm" id="FormPrincipal" method="get"></form>
<form action="/Home/BeginForm?idAutor=4" method="get"></form>
<form action="/Home/BeginForm?idLibro=78" id="FormBusqueda" method="post"></form>

Podrán descargar las fuentes utilizadas en este proyecto haciendo clic aqui.