asp.net-mvc - mvc - html helpers checkbox

Uso adecuado de.net MVC Html.CheckBoxFor

Question

Todo lo que quiero saber es la sintaxis adecuada para el helper Html.CheckBoxFor HTML en ASP.NET MVC.

Lo que estoy tratando de lograr es que la casilla de verificación se compruebe inicialmente con un valor de ID para que pueda hacer referencia en el controlador para ver si todavía está marcado o no.

¿Sería la sintaxis correcta a continuación?

@foreach (var item in Model.Templates) 
{ 
    <td> 
        @Html.CheckBoxFor(model => true, item.TemplateId) 
        @Html.LabelFor(model => item.TemplateName)
    </td> 
}

Answer 1

Esa no es la sintaxis correcta

El primer parámetro no es el valor de la casilla de verificación, sino más bien ver el enlace del modelo para la casilla de verificación, por lo tanto:

@Html.CheckBoxFor(m => m.SomeBooleanProperty, new { @checked = "checked" });

El primer parámetro debe identificar una propiedad booleana dentro de su modelo (es una Expression no un método anónimo que devuelve un valor) y la segunda propiedad define cualquier atributo de elemento HTML adicional. No estoy 100% seguro de que el atributo anterior verifique inicialmente tu casilla de verificación, pero puedes intentarlo. Pero cuidado. Aunque puede funcionar, es posible que tenga problemas más adelante, cuando cargue datos de un modelo válido y esa propiedad en particular esté configurada como false .

La forma correcta

Aunque mi sugerencia correcta sería proporcionar un modelo inicializado a su vista con esa propiedad booleana particular inicializada en true .

Tipos de propiedad

Según los métodos de extensión Asp.net MVC HtmlHelper y el funcionamiento interno, las casillas de verificación deben vincularse a los valores booleanos y no a los enteros, lo que parece que le gustaría hacer. En ese caso, un campo oculto podría almacenar la id .

Otros ayudantes

Por supuesto, existen otros métodos de ayuda que puede utilizar para obtener una mayor flexibilidad sobre los valores y el comportamiento de la casilla de verificación:

@Html.CheckBox("templateId", new { value = item.TemplateID, @checked = true });

Nota : checked es una propiedad booleana de elemento HTML y no un atributo de valor, lo que significa que puede asignarle cualquier valor. La sintaxis HTML correcta no incluye ninguna asignación, pero no hay forma de proporcionar un objeto C # anónimo con propiedad indefinida que se representaría como una propiedad de elemento HTML.

Answer 2

Coloque esto en su modelo:

[DisplayName("Electric Fan")]
public bool ElectricFan { get; set; }

private string electricFanRate;

public string ElectricFanRate
{
    get { return electricFanRate ?? (electricFanRate = "$15/month"); }
    set { electricFanRate = value; }
}

Y esto en tu cshtml:

<div class="row">
    @Html.CheckBoxFor(m => m.ElectricFan, new { @class = "" })
    @Html.LabelFor(m => m.ElectricFan, new { @class = "" })
    @Html.DisplayTextFor(m => m.ElectricFanRate)
</div>

Que dará como resultado esto:

Si hace clic en la casilla de verificación o en la etiqueta en negrita, marcará / desmarcará la casilla de verificación

Answer 3

De forma predeterminada, el código siguiente NO generará una Casilla de verificación marcada ya que las propiedades del modelo anulan los atributos html:

@Html.CheckBoxFor(m => m.SomeBooleanProperty, new { @checked = "checked" });

En cambio, en su método de Acción GET , se debe hacer lo siguiente:

model.SomeBooleanProperty = true;

Lo anterior conservará su selección (si desmarca la casilla) incluso si el modelo no es válido (es decir, se produce algún error al publicar el formulario).

Sin embargo, el siguiente código sin duda generará una casilla de verificación marcada, pero no conservará sus respuestas de desactivación , en su lugar, haga que la casilla de verificación esté marcada cada vez en los errores en la forma.

 @Html.CheckBox("SomeBooleanProperty", new { @checked = "checked" });

ACTUALIZAR

//Get Method
   public ActionResult CreateUser(int id)
   {
        model.SomeBooleanProperty = true;         
   }

El código anterior generaría una casilla de verificación marcada al inicio y también conservará su selección incluso en los errores de forma.

Answer 4

Estaba buscando la solución para mostrar la etiqueta dinámicamente desde una base de datos como esta:

checkbox1 : Option 1 text from database
checkbox2 : Option 2 text from database
checkbox3 : Option 3 text from database
checkbox4 : Option 4 text from database

Así que ninguna de las soluciones anteriores funcionó para mí, así que utilicé esto:

 @Html.CheckBoxFor(m => m.Option1, new { @class = "options" }) 
 <label for="Option1">@Model.Option1Text</label>

 @Html.CheckBoxFor(m => m.Option2, new { @class = "options" }) 
 <label for="Option2">@Mode2.Option1Text</label>

De esta forma, cuando el usuario haga clic en la etiqueta, se seleccionará la casilla de verificación.

Puede ser que pueda ayudar a alguien.

Answer 5

Estaba teniendo un problema con ASP.NET MVC 5, donde CheckBoxFor no verificaba mis casillas de verificación en la falla de validación del lado del servidor, aunque mi modelo claramente tenía el valor establecido en verdadero. Mi marca / código Razor se veía así:

@Html.CheckBoxFor(model => model.MyBoolValue, new { @class = "mySpecialClass" } )

Para que esto funcione, tuve que cambiar esto a:

@{
    var checkboxAttributes = Model.MyBoolValue ?
        (object) new { @class = "mySpecialClass", @checked = "checked" } :
        (object) new { @class = "mySpecialClass" };
}
@Html.CheckBox("MyBoolValue", checkboxAttributes)

Answer 6

Ninguna de las respuestas anteriores funcionó para mí cuando volví a enlazar en POST, hasta que agregué lo siguiente en CSHTML

<div class="checkbox c-checkbox">
    <label>
        <input type="checkbox" id="xPrinting" name="xPrinting" value="true"  @Html.Raw( Model.xPrinting ? "checked" : "")>
        <span class=""></span>Printing
    </label>
</div>


// POST: Index

[HttpPost]
public ActionResult Index([Bind(Include = "dateInHands,dateFrom,dateTo,pgStatus,gpStatus,vwStatus,freeSearch,xPrinting,xEmbroidery,xPersonalization,sortOrder,radioOperator")] ProductionDashboardViewModel model)

Answer 7

Tuve problemas para hacer que esto funcionara y agregué otra solución para cualquiera que desee / necesite usar FromCollection.

En lugar de:

@Html.CheckBoxFor(model => true, item.TemplateId) 

Formatea html helper así:

@Html.CheckBoxFor(model => model.SomeProperty, new { @class = "form-control", Name = "SomeProperty"})

Luego, en el modelo de vista donde sea que tu lógica sea:

public void Save(FormCollection frm)
{   
    // to do instantiate object.

    instantiatedItem.SomeProperty = (frm["SomeProperty"] ?? "").Equals("true", StringComparison.CurrentCultureIgnoreCase);

    // to do and save changes in database.
}