none
Configurar CheckBox Razor RRS feed

  • Pregunta

  • Hola,

    Estoy trabajando en ASP.NET MVC 5 desarrollando una aplicacion web inmobiliaria donde se venden y se arriendan inmuebles (Casas, apartamentos, fincas, locales, etc..). Tengo una tabla 'Inmuebles' (ID, Tipo, Ciudad, Precio, Area2, Habitaciones) con una FK que referencia a la tabla 'Caracteristicas' en la que se especifica si dicho Inmueble tiene por ejemplo; Piscina, Garaje, Terraza, etc... Estos campos son de tipo BIT, lo que quiero hacer es que al momento de registrar el inmueble, me permita registrar las caracteristicas de ese inmueble con un Checkbox para cada columna. El problema que tengo ahora es que cuando agrego el controlador con sus vistas generadas automaticamente, estas no generan checkbox, sino un Select Option para elegir entre verdadero y falso. 

    ¿Como hago para cambiar ese DropDownList por un Checkbox?

    Esta es la tabla en la BD

    Metodos en el controlador

    // GET: CaracteristicasInmuebles/Create
            public ActionResult Create()
            {
                return View();
            }
    
            // POST: CaracteristicasInmuebles/Create
            // Para protegerse de ataques de publicación excesiva, habilite las propiedades específicas a las que desea enlazarse. Para obtener 
            // más información vea http://go.microsoft.com/fwlink/?LinkId=317598.
            [HttpPost]
            [ValidateAntiForgeryToken]
            public ActionResult Create([Bind(Include = "IDCaracteristicas,Cocina,Sala,Comedor,ZonaDeRopa,SalaComedor,Terraza,Balcon,Piscina,ZonaVerde,Porteria,Parqueadero,Patio,ZonasComunes,Garaje,CasaMayordomo,BBQ,Pesebreras,Otros")] CaracteristicasInmueble caracteristicasInmueble)
            {
                if (ModelState.IsValid)
                {
                    db.CaracteristicasInmueble.Add(caracteristicasInmueble);
                    db.SaveChanges();
                    return RedirectToAction("Index");
                }
    
                return View(caracteristicasInmueble);
            }

    La vista de 'Editar'

    @model EstateTracking1.Contexto.CaracteristicasInmueble
    @{
        ViewBag.Title = "Edit";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    <div class="row border-bottom white-bg dashboard-header" style="padding: 10px 5px 15px 15px;">
        <div class="col-lg-10">
            <h2><b>Edit</b></h2>
            <ol class="breadcrumb">
                <li>
                    <a href="~/Home">Inicio</a>
                </li>
                <li>
                    <a href="~/CaracteristicasInmueble">CaracteristicasInmueble</a>
                </li>
            </ol>
        </div>
    </div>
    <br />
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
        <div class="row border-bottom white-bg dashboard-header">
        <div class="form-horizontal">        
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.IDCaracteristicas)
    
            <div class="form-group">
                @Html.LabelFor(model => model.Cocina, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Cocina)
                        @Html.ValidationMessageFor(model => model.Cocina, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Sala, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Sala)
                        @Html.ValidationMessageFor(model => model.Sala, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Comedor, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Comedor)
                        @Html.ValidationMessageFor(model => model.Comedor, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ZonaDeRopa, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.ZonaDeRopa)
                        @Html.ValidationMessageFor(model => model.ZonaDeRopa, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.SalaComedor, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.SalaComedor)
                        @Html.ValidationMessageFor(model => model.SalaComedor, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Terraza, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Terraza)
                        @Html.ValidationMessageFor(model => model.Terraza, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Balcon, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Balcon)
                        @Html.ValidationMessageFor(model => model.Balcon, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Piscina, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Piscina)
                        @Html.ValidationMessageFor(model => model.Piscina, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ZonaVerde, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.ZonaVerde)
                        @Html.ValidationMessageFor(model => model.ZonaVerde, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Porteria, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Porteria)
                        @Html.ValidationMessageFor(model => model.Porteria, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Parqueadero, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Parqueadero)
                        @Html.ValidationMessageFor(model => model.Parqueadero, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Patio, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Patio)
                        @Html.ValidationMessageFor(model => model.Patio, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.ZonasComunes, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.ZonasComunes)
                        @Html.ValidationMessageFor(model => model.ZonasComunes, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Garaje, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Garaje)
                        @Html.ValidationMessageFor(model => model.Garaje, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.CasaMayordomo, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.CasaMayordomo)
                        @Html.ValidationMessageFor(model => model.CasaMayordomo, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.BBQ, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.BBQ)
                        @Html.ValidationMessageFor(model => model.BBQ, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Pesebreras, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    <div class="checkbox">
                        @Html.EditorFor(model => model.Pesebreras)
                        @Html.ValidationMessageFor(model => model.Pesebreras, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>
            <div class="form-group">
                @Html.LabelFor(model => model.Otros, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-4">
                    @Html.EditorFor(model => model.Otros, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Otros, "", new { @class = "text-danger" })
                </div>
            </div>
    	</div>
            <div class="form-group">
                <div class="col-md-offset-2 col-md-4">
                    <input type="submit" value="Guardar" class="btn btn-primary" />
                </div>
            </div>
        </div>
    
    }
    <br>
    <div>
        <button type="button" class="btn btn-danger">@Html.ActionLink("Regresar", "Index")</button>    
    </div>
    <br>
    

    Espero me puedan ayudar, creo que es algo sencillo que yo desconozco y tambien quisiera que me dieran unas pautas de como crea la vista detalle para Registrar el inmueble y a la misma vez pueda agregarle sus respectivas caracteristicas

    Gracias

    lunes, 19 de marzo de 2018 1:50

Todas las respuestas

  • Utilice una vista parcial para el tipo de datos bool.

    1. En su proyecto MVC, localice el directorio Views.
    2. Dentro de él, localice Shared.
    3. Dentro de él, cree un directorio nuevo llamado EditorTemplates.
    4. Agregue una vista nueva a EditorTemplates llamada Bool.  Seleccione la plantilla vacía sin modelo.
    5. Agruege el siguiente código a la plantilla.
    @model bool
    @{
        string fieldName = ViewData.TemplateInfo.HtmlFieldPrefix;
    }
    <input type="checkbox" id="@fieldName" name="@fieldName" />@fieldName<br />

    Pruebe los cambios.  Lo que le mostré es una plantilla muy básica.  Probablemente es posible mejorarla mucho más, pero espero que le de la idea correcta.

    P.D.:  No probé el código.  Espero no haber cometido errores.


    Jose R. MCP
    Code Samples




    • Editado webJose lunes, 19 de marzo de 2018 17:03
    lunes, 19 de marzo de 2018 4:57
  • Ya cree la vista parcial como me indicaste pero la verdad no se como debo implementarlo en las vistas

    Sé que se llaman con @Html.Partial() pero no se en que parte la debo colocar. 

    Intente ponerla arriba cuando se establece el modelo, asi:

    @model EstateTracking1.Contexto.CaracteristicasInmueble
    @{
        ViewBag.Title = "Create";
        Layout = "~/Views/Shared/_Layout.cshtml";
        Html.Partial("~/Views/Shared/DisplayTemplates/Bool.cshtml");
    }

    Y tambien en cada input pero me salia el mismo error de las dos formas.

    "El elemento de modelo pasado al diccionario es NULL, pero este diccionario requiere un elemento de modelo distinto de NULL de tipo 'System.Boolean'."

    lunes, 19 de marzo de 2018 16:28
  • No necesita hacer ningún cambio.  Y oh oh!  Parece que equivoqué el nombre del directorio!!!  Por favor renombre el directorio a EditorTemplates.

    Cuando corrija el nombre del directorio, toda vista que tenga la llamada a @Html.EditorFor(m => m.Casa) o similar automáticamente usará la nueva vista parcial.  En otras palabras, no hay que usarla explícitamente.  ASP.net MVC se encargará de eso automáticamente.


    Jose R. MCP
    Code Samples


    • Editado webJose lunes, 19 de marzo de 2018 17:03
    lunes, 19 de marzo de 2018 17:02
  • Amigo aún no me funciona, ya cambie el nombre del directorio pero aun siguen apareciendo como Select.

    Que otra cosa podria afectar o de que otra forma lo puedo hacer.

    Ayudame por favor, mañana debo exponer el proyecto final de grado :'D

    lunes, 19 de marzo de 2018 18:59
  • Uf, en esta PC no me está sirviendo Visual Studio así que no puedo probar para ver qué me está faltando.  La vista parcial debe de tener el nombre del tipo de datos.  El tipo de datos bool también tiene el nombre Boolean (System.Boolean).  ¿Será que sí le sirve si renombra la vista de Bool.cshtml a Boolean.cshtml?  Valdría la pena probar.

    Jose R. MCP
    Code Samples

    lunes, 19 de marzo de 2018 19:06
  • Hola Estimado,

    Tu problema esta en la BD.

    La entidad se genera en la BD con el tipo de dato

    La entidad al detectar que soporta valores null en la vista no deja crear checkbox sino por el contrario la vista se crea como una lista por que ese campo(bd ) va soportar 3 valores null, true y false.

    Cambia la BD que el campo no soporte null

    Luego borra esa tabla de tu modelo EntityFramework y Vuelve agregar.

    Compila esa capa y se soluciona tu problema.

    Ejemplo campo con null

    public Nullable<bool> Martes { get; set; }

    Esto va crear una lista con 3 valores.

    @Html.LabelFor(model => model.Martes, htmlAttributes: new { @class = "control-label col-md-2" })

    Ejemplo campo sin null

    public bool Lunes { get; set; }

    Se puede modificar 

    @Html.CheckBoxFor(model => model.Lunes)

    Espero te sirva.


    Conocuica

    domingo, 19 de enero de 2020 10:04