Post 14. Helpers (IV) Hidden y TextArea

@Html.Hidden / @Html.HiddenFor 

Este helper nos sirve para crear la etiqueta hidden, con la cual podremos crear campos con valores "ocultos". Generalmente utilizados para enviar datos que no deben ser mostrados al usuario, pero que son necesarios para el objeto, por ejemplo el ID del objeto.

Ahora veamos sus principales constructores:

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

@Html.HiddenFor(expression)
@Html.HiddenFor(expression,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.

Agregaremos el siguiente código a nuestra accion Hidden , controller Home:

public ActionResult Hidden() {
    DetalleLibroViewModel model = new DetalleLibroViewModel();
    model.Libro = new LibroModel(2, "Paco Yunque", 4, 5);
    return View(model);
}

Y en nuestra vista agregaremos el siguiente código:

@model Helpers.Models.DetalleLibroViewModel
@{
    ViewBag.Title = "Hidden";
}

<h2>Hidden</h2>
@Html.Hidden("ValorOculto")
@Html.Hidden("IdRegistro","451")
@Html.Hidden("FechaRegistro", DateTime.Now.ToString("yyyyMMdd"), new { id = "FechaReg"})

@*Simulamos un formulario en que solo se edita el nombre pero se coloca el id en un campo hidden para usar como referencia en la actualización*@
<h3>Actualizar Datos del Libro:</h3>
@Html.HiddenFor(m => m.Libro.id)
@Html.HiddenFor(m => m.Libro.Autor.id, new { id = "IDENT_AUTOR"})
@Html.LabelFor(m => m.Libro.Nombre): @Html.TextBoxFor(m => m.Libro.Nombre)

Al ejecutar nuestro código tendremos lo siguiente:

El código generado por nuestro ejemplo es:

<h2>Hidden</h2>
<input id="ValorOculto" name="ValorOculto" type="hidden" value="" />
<input id="IdRegistro" name="IdRegistro" type="hidden" value="451" />
<input id="FechaReg" name="FechaRegistro" type="hidden" value="20150626" />
<h3>Actualizar Datos del Libro:</h3>
<input id="Libro_id" name="Libro.id" type="hidden" value="2" />
<input id="IDENT_AUTOR" name="Libro.Autor.id" type="hidden" value="4" />
<label for="Libro_Nombre">Nombre</label>: <input id="Libro_Nombre" name="Libro.Nombre" type="text" value="Paco Yunque" />

@Html.TextArea / @Html.TextAreaFor

Este tipo de helper nos permite crear un TextArea, cuya funcionalidad es similar a los TextBox, solo que estos se utilizan generalmente para textos más grandes como parrafos, ya que nos permite ingresar saltos de línea.

Veamos sus principales constructores:

@Html.TextArea(name)
@Html.TextArea(name, htmlAttributes)
@Html.TextArea(name, value)
@Html.TextArea(name, value, htmlAttributes)
@Html.TextArea(name, value, rows, columns, htmlAttributes)

@Html.TextAreaFor(m => m.atributo)
@Html.TextAreaFor(m => m.atributo, htmlAttributes)
@Html.TextAreaFor(m => m.atributo, rows, columns, 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.
rows, columns	Object	Indica el valor del atributo rows y columns (filas y columnas).

Para probar este helper primero agregaremos el siguiente código a nuestro modelo LibroModel:

public string Descripcion { get; set; }

Y dentro de nuestro Controller agregamos lo siguiente:

public ActionResult TextArea() {
    DetalleLibroViewModel model = new DetalleLibroViewModel();
    model.Libro = new LibroModel(2, "Cien Años de Soledad", 3, 1);
    model.Libro.Descripcion = "La historia transcurre en un pueblo llamado Macondo, el cuál fue (...)";
    return View(model);
}

Y finalmente dentro de nuestra vista:

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

@Html.TextArea("TxtArea")
@Html.TextArea("Descripcion", new { style = "background-color:yellow" })
@Html.TextArea("Desc", "José Arcadio Buendía y Úrsula Iguarán son un matrimonio de primos (...)")<br />
@Html.TextArea("Descrip", "En una pelea de gallos en la que resultó muerto el animal de Prudencio (...)", new { style = "font-weight: bold;" })
@Html.TextArea("Texto", "La gente del pueblo sospechaba que José Arcadio y Úrsula no habían (...)", 7, 40, new { style="color:blue;"})<br />

@Html.TextAreaFor(m => m.Libro.Descripcion)
@Html.TextAreaFor(m => m.Libro.Descripcion, new { style = "background-color:gray" })<br />
@Html.TextAreaFor(m => m.Libro.Descripcion, 4, 60, new { style = "color:red; font-style:italic;" })

El resultado será:

Recuerden que podrán descargar las fuentes desde aqui.

Seguir leyendo →