Post 15. Helpers (V) CheckBox

@HtmlCheckBox / @Html.CheckBoxFor

Este helper nos ayuda a crear checkboxs o casilla de seleccion, este tipo de input nos sirve para los siguientes casos:

• Una variable con 2 posibles valores: Encendido/Apagado, Si/No, 1/0, Activo/Inactivo, Verdadero/Falso, etc. Por ejemplo Estado (Activo/Inactivo), MenorEdad (Si/No), etc.
• Seleccionar múltiples valores de una lista. Por ejemplo una lista de libros a comprar.

Empezaremos revisando sus constructores:

@Html.CheckBox(name)
@Html.CheckBox(name, isChecked)
@Html.CheckBox(name, htmlAttributes)
@Html.CheckBox(name, isChecked, htmlAttributes)

@Html.CheckBoxFor(expression)
@Html.CheckBoxFor(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.
isChecked	bool	Valor que indica si el checkbox estará o no activado. Valor por defecto False.
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 a nuestro proyecto el modelo Compra, a nuestro Controlador Home la acción CheckBox y respectiva vista.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Helpers.Models
{
    public class CompraModel
    {
        public int identCompra { get; set; }
        public int identCliente { get; set; }
        public bool pagado { get; set; }
        public bool entregado { get; set; }
        public List<DetalleCompra> detalle { get; set; }
    }

    public class DetalleCompra
    {
        public LibroModel libro { get; set; }
        public int cantidad { get; set; }
    }
}

public ActionResult CheckBox() {
    CompraModel model = new CompraModel();
    model.identCompra = 1;
    model.identCliente = 1;
    model.pagado = true;
    model.entregado = false;
    model.detalle = new List<DetalleCompra>();
    return View(model);
}

@model Helpers.Models.CompraModel
@{
    ViewBag.Title = "CheckBox";
}

<h2>CheckBox</h2>
@Html.Label("Check1"): @Html.CheckBox("Check1") <br />
@Html.Label("Check2","Estado"): @Html.CheckBox("Check2", true) <br />
@Html.Label("Check3","Acepto los términos de uso"): @Html.CheckBox("Check3", new {id = "ck3"}) <br />
@Html.Label("Check4","Enviar"):@Html.CheckBox("Check4", true, new {id = "ck4"})<br />
<br />
@Html.LabelFor(m => m.entregado): @Html.CheckBoxFor(m => m.entregado)<br />
@Html.LabelFor(m => m.pagado): @Html.CheckBoxFor(m => m.pagado, new {id = "ck6"} )

Nota: Una ventaja de utilizar el helper LabelFor, es que al hacer clic sobre la etiqueta podremos activar/desactivar también el check

Podrás descargar las fuentes de este post aqui

Seguir leyendo →

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 →

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 →

Post 10. Motor de vistas Razor (II)

En el post anterior, mostramos las bases para entender la sintaxis de razor, viendo principalmente ejemplos de sus componentes más importantes, en esta ocasión nos enfocaremos mas a las reglas de su sintaxis.

Inicio y Fin: @
A diferencia de aspx en el cual las etiquetas <% y %> delimitan el inicio y fin del código .net dentro de nuestra vista, en razor disponemos de la etiqueta @ la cual nos indica el inicio de nuestro código mas no disponemos de etiqueta de cierre. Pero esta etiqueta tiene varios formas de acuerdo al uso que queramos darle. Algunos de ellos ya los hemos visto, pero vamos a repasarlos.

@[Palabra Reservada]

Cuando usamos la etiqueta @ junto a una palabra reservada indicamos a razor que debemos usar un recurso no administrado (una conexión sql, una libreria de funciones, una clase, etc.). Notese que tampoco se usa el simbolo ";" para indicar el fin de la línea.

@using Microsoft.Class
@model Models.MiModelo

@[Variable]

Cuando usamos la etiqueta @ junto a una variable, indicamos que debemos mostrar el valor de la variable en nuestra vista.

@ViewData.["Mensaje"]
@Model.Nombre

@[Función]

Cuando usamos la etiqueta @ junto a una función, indicamos que debemos mostrar el valor devuelto por la función en nuestra vista.

@Html.TextBoxFor(m => m.Nombre)
@Model.Nombre.Substring(0,5)

@* Texto*@

Ya hemos visto este uso en el post anterior y es incluir comentarios en nuestra vista. Nótese que estos comentarios no generan código html (<!--Texto--> ) y solo son visibles desde el código fuente.

@*Esto es un comentario en razor*@

@[Estructura de Control]

Razor tambien tiene su propia sintaxis para las estructuras de control, muy parecidas a las usadas en .net, solo debemos agregar un @al inicio del control y el uso de llaves es obligatorio, así mismo el código dentro de las llaves debe tener la sintaxis normal de .net (usar ";", las variables y funciones no llevan @, etc. )

@if(Model.Nombre == "") { a++; }

@{Codigo .net}

Cuando usamos la etiqueta @ junto a llaves (inicio y cierre) indicamos a razor que debemos ejecutar código .net. En este caso se respetan toda la sintaxis de .net (igual que las estructuras de control).

@{int a = 0;}

<text></text>

En algunos casos deseamos incluir codigo razor dentro de nuestras llaves. En ese caso usaremos las etiquetas <text></text> para indicar a razor que ese bloque sera considerado texto html.

<select name="Ciudad">
@foreach (stringcadena in Model.Ubigeo) {
    <text><option value="@cadena">@cadena</option></text>
}
</select>

@:

Tiene la misma funcionalidad que las etiquetas <text></text>

<select name="Ciudad">
@foreach (stringcadena in Model.Ubigeo) {
    @:<option value="@cadena">@cadena</option>
}
</select>

@(valor)

En ciertos casos debemos tener cuidado para que razor interprete correctamente lo que queremos mostrar, por ejemplo el siguiente código

@{int a = 0;}
El valor de a es @a + 1

Se mostrará:

El valor de a es 0 + 1

Cuando lo que hubiéramos deseado es que se muestre un 1 y no un 0 + 1, esto sucede por la regla @[variable] en la que muestra el valor de @a puesto que + 1 es solo una cadena de html, si necesitamos que se muestre el mensaje El valor de a es 1, lo que debemos hacer es:

@{int a = 0;}
El valor de a es @(a + 1)

En este caso lo que le decimos a razor es que debemos mostrar el valor de a + 1 y no solo el valor de a.

@@

En el caso de que debamos mostrar un @ en nuestra vista, sólo bastará con agregar un @@, en nuestra vista solo se mostrará uno.

arangodj@@gmail.com

Estas son las reglas básicas para poder programar en razor, si hubiera alguna otra consideración se agregará en el post, deben tenerlas siempre presente para entender y probar los futuros ejemplos.

Seguir leyendo →

Post 9. Motor de vistas Razor (I)

En esta ocasión hablaremos acerca de Razor, motor que es utilizado en MVC (disponible a partir de MVC3) para poder renderizar nuestras vistas, este motor es como un lenguaje que nos permite "crear" código HTML, con la ayuda de este motor podremos llenar grillas, combos, menús, así mismo podemos crear controles HTML (formluarios, inputs, labels, etc.).

Cuando digo que "es como un lenguaje" me refiero a que Razor no es un lenguaje de programación nuevo que debas aprender, mas bien que es un conjunto de reglas o sintaxis con las que podremos usar los lenguajes de programación que brinda Visual Studio (C# o VB).

Si ya has programado antes en asp o php, pues Razor maneja una forma de trabajo muy parecida en la que combinas el lenguaje de programación con el lenguaje HTML (incluso JS o CSS si es necesario) con el cual podremos generar código de manera mas rápida y reduciendo la cantidad de caracteres.

A diferencia de aspx, en la que podemos "jalar" controles desde nuestra caja de herramientas y automáticamente se nos genera todo el código necesario, lo cual es ventaja y desventaja al mismo tiempo: ventaja porque creamos un control en segundos y desventaja porque el no todo el código generado es necesario o para poder cambiar algún simple atributo se debe hacer desde el código en servidor, en Razor, en cambio, debemos digitar todo el código (y sin opción a vista previa :/ ), y claro que intellisense nos ayudara a que esto no sea un calvario, pero podremos manipular más a fondo el código generado. Esta es su mayor ventaja pero como no todo puede ser perfecto, razor nos "obliga" a conocer mas a fondo el lenguaje HTML, JS y CSS, lo cual en el fondo tampoco es tan malo, pero nos hará "sufrir" un poquito más al inicio.

La sintaxis que utilizamos para poder mostrar los ViewBag/ViewData y los modelos dentro de nuestras vistas fueron nuestros primero pasos en Razor. En este post veremos el uso de las principales propiedades de una pagina Razor:

@ViewData / @ViewBag

Ya sabemos como utilizar estas propiedades:

@ViewBag.Message
@ViewData.["Message"]

@Model

Utilizamos esta propiedad para especificar el modelo a utilizar en nuestra vista, no es obligatorio colocarlo, pero usarlo o no usarlo nos puede ayudar de diversas maneras. Una de las ventajas de especificar la clase que se utilizará en la vista es que intellisense nos ayuda a generar la vista con su autocompletar. Por otra parte si no se coloca @model la vista puede ser reutilizada por distintos controladores, siempre y cuando posean el nombre de  sus atributos iguales, esto en la práctica no es muy usual, por lo cual se recomienda siempre especificar la clase modelo para cada vista.

Su sintaxis es de la siguiente manera:

@model Razor.Models.AutorModel

@using

Su funcionalidad es la misma que using en cualquier clase, usaremos @using cuando deseemos utilizar alguna clase o función de alguna dll, librería de clases o que se encuentre en un distinto namespace.

Su sintaxis es de la siguiente manera:

@using Razor.Helpers

@Html - Helpers

Este control mas conocido como Helpers Html, es el más usado en razor (y se podría decir el más importante), con él podremos crear cualquier objeto html, label, inputs, forms, textarea, etc.

A continuación les dejare ejemplos de los casos mas usados, en un siguiente post mostraremos un ejemplo de cada uno de los tipos, por ahora tendremos solo un avance:

@Html.TextBoxFor(m => m.Nombre)

@* Comentarios *@

Pues como se ve arriba para agregar comentarios en razor solo se debe colocar el texto entre "@*" y "*@". Nótese que estos comentarios son solo comentarios en la página razor y no generar ningún código Html.

@*Esto es un comentario en razor*@

A continuación mostraremos los ejemplos usados en un nuevo proyecto, el cual se creó con una plantilla "Internet Application" (por cuestiones de que ya tiene estilos CSS y se ve más "bonito")

/Controllers/HomeController.cs

using System.Web.Mvc;
using Razor.Models;

namespace Razor.Controllers
{
   public class HomeController : Controller
   {
      public ActionResult Index()
      {
         AutorModel model = new AutorModel("Diego","Arango","Garcia");
         ViewBag.Message = "Aprender Razor en ASP.NET MVC!";
         return View(model);
      }

      public ActionResult About()
      {
         return View();
      }
   }
}

/Models/AutorModel.cs

using System;
using System.Collections.Generic;

namespace Razor.Models
{
   public class AutorModel
   {
      public string Nombre { get; set; }
      public string ApellidoP { get; set; }
      public string ApellidoM { get; set; }
      public DateTime FechaActual { get; set; }

      public AutorModel() { }
      public AutorModel(string Nombre, string ApellidoP, string ApellidoM) {
         this.Nombre = Nombre;
         this.ApellidoP = ApellidoP;
         this.ApellidoM = ApellidoM;
         this.FechaActual = DateTime.Now;
      }
   }
}

/Views/Home/Index.cshtml

@model Razor.Models.AutorModel
@using Razor.Helpers

<h2>@ViewBag.Message</h2>
<p>
   @*Esto es un comentario en razor*@
   Este post fue creado por @Model.Nombre @Model.ApellidoP<br />
   el @Formateador.FormatoFecha(Model.FechaActual)
   <br /><br />
   Actualizar datos del Autor:<br />
   @Html.TextBoxFor(m => m.Nombre)<br />
   @Html.TextBoxFor(m => m.ApellidoP)<br />
   @Html.TextBoxFor(m => m.ApellidoM)<br />
</p>

Al ejecutar veremos el siguiente resultado:

Con estos ejemplos iniciales de como usar razor nos despedimos hasta el siguiente post, donde veremos la forma de conbinar nuestro codigo html con razor y C# para poder generar codigo HTML dinámicamente, hasta la próxima.

Las fuentes para este ejemplo puden descargarlas aqui.

Nota:
Se eliminaron del proyecto (ya que no eran necesarios para el ejemplo) los siguientes archivos: /Controllers/AccountController.cs.
/Models/AccountModels.cs.
/Views/Shared/_LogOnPartial.cshtml
/Views/Account/ (carpeta).
Ademas se modificó el archivo "/Views/Shared/_Layout.cshtml" cambiando "<div id="logindisplay"> @Html.Partial("_LogOnPartial") </div>" por "<div id="logindisplay"> &nbsp; </div>".

Seguir leyendo →