Post 12. Helpers (II) TextBox y Label

Antes de iniciar con estos ejemplos puedes descargar las fuentes finales del post anterior aquí para que puedas hacerlos por ti mismo.

Para los helpers que aprenderemos usar ahora, crearemos primero un modelo (clase) que nos servirá para mostrar su uso. La clase a utilizar será AutorModel utilizada anteriormente (puedes ver la clase en un post anterior).

@Html.TextBox / @Html.TextBoxFor

Los helpers que revisaremos a continuación tienen 2 formas diferentes, una se usa cuando quieres crear simplemente un objeto y otra cuando se desea crear un campo asociado a un elemento de un modelo. Primero revisaremos los constructores más usados:

@Html.TextBox(name)
@Html.TextBox(name,value)
@Html.TextBox(name,value, htmlAttributes)

@Html.TextBoxFor(m => m.atributo)
@Html.TextBoxFor(m => m.atributo, htmlAttributes)

Atributo	Tipo Dato	Descripción
name	String	Valor que se le dará al atributo name. Si no se especifica el valor del atributo id tendrá el mismo valor name
value	String	Valor que se le dará al atributo value. Si no se especifica tendra el valor ""
htmlAttributes	Object	Atributos HTML que se deseen agregar a la etiqueta, tales como class, id, style, etc.
m => m.atributo	Object	Predicado que indica el el valor de los atributos name y value (tambien el de id si no se especifica). La variable m (puede utilizarse cualquier nombre) representa a la clase especificada en el modelo. Según la propiedad del modelo que utilicemos el atributo name tendrá como valor el nombre de la propiedad y el atributo value tendrá como valor el valor del atributo.

Se pueden utilizar ambos para generar el mismo código html, pero utilizar la función TextBoxFor ofrece mayores beneficios, principalmente en la validación de formularios. Para ver la diferencia utilizaremos varios ejemplos de uso, para ellos agregaremos lo siguiente en el controlador home acción TextBox.

using Helpers.Models;
...
public ActionResult TextBox() {
      AutorModel autor = new AutorModel("Diego", "Arango", "Garcia");
      return View(autor);
}

Agregaremos la vista Index a la acción TextBox (utilizando el layout por defecto), y agregamos el siguiente código:

@model Helpers.Models.AutorModel
@{
    ViewBag.Title = "TextBox";
}
<h2>TextBox</h2>

@Html.TextBox("Nombre1")<br />
@Html.TextBox("Nombre2", "DIEGO")<br />
@Html.TextBox("Nombre3", "DIEGO ARANGO", new { style = "Color:red" })<br /><br />

@Html.TextBoxFor(m => m.Nombre)<br />
@Html.TextBoxFor(m => m.ApellidoP, new {id="ApellidoPaterno", style="font-weight:bold" })

El resultado al ejecutar nuestro código será:

Así mismo el código html generado será:

<input id="Nombre1" name="Nombre1" type="text" value="" /><br />
<input id="Nombre2" name="Nombre2" type="text" value="DIEGO" /><br />
<input id="Nombre3" name="Nombre3" style="Color:red" type="text" value="DIEGO ARANGO" /><br /><br />

<input id="Nombre" name="Nombre" type="text" value="Diego" /><br />
<input id="ApellidoPaterno" name="ApellidoP" style="font-weight:bold" type="text" value="Arango" />

@Html.Label / @Html.LabelFor

Estos helpers nos ayudan a crear las etiquetas <label>, al igual que el anterior posee dos formas de uso:

@Html.Label(expression)
@Html.Label(expression, labelText)

@Html.LabelFor(m => m.atributo)
@Html.LabelFor(m => m.atributo, labelText)

Atributo	Tipo Dato	Descripción
expression	String	Valor que se le dará al atributo for.
m => m.atributo	Object	Predicado que indica el el valor del atributo for
labelText	String	Valor que se le dará al contenido del tag. Si no se especifica tendrá el mismo valor que expression (Html.Label) o el nombre del atributo en caso no se especifique el valor de la propiedad Display (Html.LabelFor).

Para poder realizar el ejemplo de este helper debemos agregar el siguiente codigo a nuestro modelo:

using System.ComponentModel.DataAnnotations;
...
[Display(Name = "Nombre del Autor: ")]
public string Nombre { get; set; }
[Display(Name = "Apellido Paterno del Autor")]
public string ApellidoP { get; set; }

Dentro de nuestro controlador Home, colocaremos el siguiente código en la accion Label:

public ActionResult Label() {
      AutorModel autor = new AutorModel("Leo", "Arango", "Rojas");
      return View(autor);
}

Dentro de nuestra vista agregamos lo siguiente:

@model Helpers.Models.AutorModel
@{
    ViewBag.Title = "Label";
}
<h2>Label</h2>
@Html.Label("Nombre")<br />
@Html.Label("Nombre", "Nombre Completo")<br /><br />
@Html.LabelFor(m => m.Nombre)<br />
@Html.LabelFor(m => m.ApellidoP)<br />
@Html.LabelFor(m => m.ApellidoP, "Ap. Paterno")<br />
@Html.LabelFor(m => m.ApellidoM)<br />

Así mismo el codigo Html generado es:

<label for="Nombre">Nombre del Autor: </label><br />
<label for="Nombre">Nombre Completo</label><br /><br />
<label for="Nombre">Nombre del Autor: </label><br />
<label for="ApellidoP">Apellido Paterno del Autor</label><br />
<label for="ApellidoP">Ap. Paterno</label><br />
<label for="ApellidoM">ApellidoM</label><br />

Podrán descargar el código del presente proyecto desde aquí