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 →