Post 13. Helpers (III) DropDownList

En esta ocación revisaremos el uso de los helpers más complejos (lo que no significa que sea díficil de entender).

@Html.DropDownList / @Html.DropDownListFor 

Estos helpers no ayudan a generar las etiquetas <select> y <option>. A partir de una lista podemos crear el combo, a diferencia de otros lenguajes en los que debemos hacer un bucle y crearlos uno por uno.
Antes de empezar agregaremos las siguientes clases, las cuales nos servirán para los ejemplos futuros

using System;
using System.Collections.Generic;

namespace Helpers.Models
{
    public class LibroModel
    {
        public int id { get; set; }
        public string Nombre { get; set; }
        public AutorModel Autor { get; set; }
        public GeneroModel Genero { get; set; }
        public string Editorial { get; set; }
        public int Edicion { get; set; }
        public int Anio { get; set; }

        public LibroModel() { }
        public LibroModel(int id, string Nombre, int idAutor, int idGenero) {
            this.id = id;
            this.Nombre = Nombre;
            this.Autor = new AutorModel();
            this.Autor.id = idAutor;
            this.Genero = new GeneroModel();
            this.Genero.id = idGenero;
        }
    }
}

using System;
using System.Collections.Generic;

namespace Helpers.Models
{
    public class GeneroModel
    {
        public int id { get; set; }
        public string Nombre { get; set; }

        public GeneroModel() { }
        public GeneroModel(int id, string Nombre) {
            this.id = id;
            this.Nombre = Nombre;
        }
    }
}

Asi mismo agregaremos el siguiente ViewModel

using System;
using System.Collections.Generic;

namespace Helpers.Models
{
    public class DetalleLibroViewModel
    {
        public LibroModel Libro { get; set; }
        public List<GeneroModel> ListaGenero { get; set; }
    }
}

Dentro de nuestro controlador Home, accion DropDowList agregamos el siguiente código

public ActionResult DropDownList() {
    DetalleLibroViewModel model = new DetalleLibroViewModel();
    model.Libro = new LibroModel(2,"Paco Yunque",4 ,5);
    List<GeneroModel> listaGeneros = new List<GeneroModel>();
    listaGeneros.Add(new GeneroModel(1, "Novela"));
    listaGeneros.Add(new GeneroModel(2, "Cuento"));
    listaGeneros.Add(new GeneroModel(3, "Poema"));
    listaGeneros.Add(new GeneroModel(4, "Romance"));
    listaGeneros.Add(new GeneroModel(5, "Comedia"));
    listaGeneros.Add(new GeneroModel(6, "Drama"));
    model.ListaGenero = listaGeneros;
    return View(model);
}

Debemos agregar el siguiente codigo dentro de nuestra vista DropDownList:

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

Lo normal en lenguajes como asp o php sería recorrer el array o lista con un bucle y generar nuestro combo, lo cual es válido tambien en razor, como veremos a continuación:

<select>
@foreach (Helpers.Models.GeneroModel genero in Model.ListaGenero) {
    <option value="@genero.id">@genero.Nombre</option>
}
</select>
<br /><br /><br /><br /><br /><br />

El resultado del código anterior sería

Como vemos el combo se creo sin problemas, revisemos el codigo HTML generado:

<select>
    <option value="1">Novela</option>
    <option value="2">Cuento</option>
    <option value="3">Poema</option>
    <option value="4">Romance</option>
    <option value="5">Comedia</option>
    <option value="6">Drama</option>
</select>

Ahora mostraremos el uso del helper, para ello listaremos sus principales constructores:

@Html.DropDownList(name)
@Html.DropDownList(name, optionLabel)
@Html.DropDownList(name, selectList)
@Html.DropDownList(name, selectList, htmlAttributes)
@Html.DropDownList(name, selectList, optionLabel)
@Html.DropDownList(name, selectList, optionLabel, htmlAttributes)

@Html.DropDownListFor(m => m.atributo, selectList)
@Html.DropDownListFor(m => m.atributo, selectList, htmlAttributes)
@Html.DropDownListFor(m => m.atributo, selectList, optionLabel)
@Html.DropDownListFor(m => m.atributo, selectList, optionLabel, 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
optionLabel	String	Texto por defecto para el combo, solo se indica el texto y su valor sera "" (vacio). Pj:  "- Seleccione -"
selectList	IEnumerable	Valores que se le asignarán a los tag <option></option>. Este objeto tiene distintas formas de uso las cuales se mostrarán en los ejemplos. En los casos  que no se use este objeto explicitamente, deberá existir un ViewData (o ViewBag) con el objeto SelectList.
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 e.

Antes de ejecutar el ejemplo debemos agregar el siguiente código a nuestra acción DropDownList (antes de return).

ViewData["Combo1"] = new SelectList(listaGeneros, "id", "Nombre");
ViewData["Combo2"] = new SelectList(listaGeneros, "id", "Nombre");

Ahora agregaremos los siguientes ejemplos de como usar este helper, como ya se habia mencionado son muchas formas en las que se puede utilizar este helper, trataremos de mostrar todas la formas posible y se coloca un comentario sobre cada uno de ellos para su mejor entendimiento

<br /><br />
@*Helper simple sus valores se cargan desde el controlador*@
@Html.DropDownList("Combo1")

@*Helper simple con etiqueta por defecto, sus valores se cargan desde el controlador*@
@Html.DropDownList("Combo2", "- Seleccione -")

@*Helper con valores desde una lista de objetos*@
@Html.DropDownList("Combo3", new SelectList(Model.ListaGenero, "id", "Nombre"))

@*Helper con valores desde una lista de objetos y atributos html*@
@Html.DropDownList("Combo4", new SelectList(Model.ListaGenero, "id", "Nombre"), new { style = "background-color:gray" })

@*Helper con valores desde un SelectListItem y etiqueta por defecto. Es posible colocar un valor por efecto con el atributo Selected*@
@Html.DropDownList("Combo5", new SelectList(new List<SelectListItem>{
        new SelectListItem { Selected = false, Text = "Novela", Value = "1"},
        new SelectListItem { Selected = false, Text = "Cuento", Value = "2"},
        new SelectListItem { Selected = false, Text = "Poema", Value = "3"},
        new SelectListItem { Selected = true, Text = "Romance", Value = "4"}
    }, "Value", "Text"), "Seleccione Género")

@*Helper con valores desde un array, con etiqueta por defecto y atributos html, nótese que se agregó un valor por defecto en el constructor del SelectList.*@
@Html.DropDownList("Combo6", new SelectList(new []{
        new {id="1", Nombre="Novela"},
        new {id="2", Nombre="Cuento"},
        new {id="3", Nombre="Poema"},
        new {id="4", Nombre="Romance"}
    }, "id", "Nombre", 5), "- Seleccione -", new { style = "color:red" })
<br /><br />

@*Helper con valores desde una lista de objetos*@
@Html.DropDownListFor(m => m.Libro.Genero.id, new SelectList(Model.ListaGenero, "id", "Nombre"))

@*Helper con valores desde una lista de objetos y atributos html*@
@Html.DropDownListFor(m => m.Libro.Genero.id, new SelectList(Model.ListaGenero, "id", "Nombre"), new { id="ComboGenero2", style="color:green;"})

@*Helper con valores desde una lista de objetos, nótese que aunque se colocó un valor por defecto con el atributo Selected, éste se ignora y prevalece el valor asignado al modelo*@
@Html.DropDownListFor(m => m.Libro.Genero.id, new SelectList(new List<SelectListItem>{
        new SelectListItem { Selected = false, Text = "Novela", Value = "1"},
        new SelectListItem { Selected = false, Text = "Cuento", Value = "2"},
        new SelectListItem { Selected = false, Text = "Poema", Value = "3"},
        new SelectListItem { Selected = true, Text = "Romance", Value = "4"},
        new SelectListItem { Selected = false, Text = "Comedia", Value = "5"}
    }, "Value", "Text"), "Selecciona")

@*Helper con valores desde una lista de objetos, nótese que aunque se colocó un valor por defecto en el constructor del SelectList y el atributo Selected, éstos se ignoran y prevalece el valor asignado al modelo*@
@Html.DropDownListFor(m => m.Libro.Genero.id, new SelectList(new List<SelectListItem>{
        new SelectListItem { Selected = false, Text = "Novela", Value = "1"},
        new SelectListItem { Selected = false, Text = "Cuento", Value = "2"},
        new SelectListItem { Selected = false, Text = "Poema", Value = "3"},
        new SelectListItem { Selected = true, Text = "Romance", Value = "4"},
        new SelectListItem { Selected = false, Text = "Comedia", Value = "5"}
    }, "Value", "Text", 3), " - Seleccionar - ", new { id = "ComboGenero4", style = "background-color:yellow;" })<br />

Al ejecutar nuestro código nuestra vista se mostraría de la siguiente manera:

Ahora revisemos el codigo Html generado por nuestros ejemplos

<br /><br />
<select id="Combo1" name="Combo1">
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option value="5">Comedia</option>
<option value="6">Drama</option>
</select>

<select id="Combo2" name="Combo2">
<option value="">- Seleccione -</option>
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option value="5">Comedia</option>
<option value="6">Drama</option>
</select>

<select id="Combo3" name="Combo3">
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option value="5">Comedia</option>
<option value="6">Drama</option>
</select>

<select id="Combo4" name="Combo4" style="background-color:gray">
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option value="5">Comedia</option>
<option value="6">Drama</option>
</select>

<select id="Combo5" name="Combo5">
<option value="">Seleccione G&#233;nero</option>
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
</select>

<select id="Combo6" name="Combo6" style="color:red">
<option value="">- Seleccione -</option>
<option value="1">Novela</option>
<option selected="selected" value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
</select>
<br /><br />

<select id="Libro_Genero_id" name="Libro.Genero.id">
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option selected="selected" value="5">Comedia</option>
<option value="6">Drama</option>
</select>

<select id="ComboGenero2" name="Libro.Genero.id" style="color:green;">
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option selected="selected" value="5">Comedia</option>
<option value="6">Drama</option>
</select>

<select id="Libro_Genero_id" name="Libro.Genero.id">
<option value="">Selecciona</option>
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option selected="selected" value="5">Comedia</option>
</select>

<select id="ComboGenero4" name="Libro.Genero.id" style="background-color:yellow;">
<option value=""> - Seleccionar - </option>
<option value="1">Novela</option>
<option value="2">Cuento</option>
<option value="3">Poema</option>
<option value="4">Romance</option>
<option selected="selected" value="5">Comedia</option>
</select>

Con esto espero que no tengan ningún problema en generar un combo con la ayuda del helper DropDownList, cualquier duda pueden hacerlo en los comentarios y gustosamente les contestaré. Recuerden que pueden descargar el código del post actual haciendo clic aqui.

Seguir leyendo →

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í

Seguir leyendo →

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.

Seguir leyendo →