Case à cocher pour booléen nullable

Mon modèle a un booléen qui doit être nullable

public bool? Foo
{
   get;
   set;
}

donc dans mon Razor cshtml j'ai

@Html.CheckBoxFor(m => m.Foo)

sauf que ça ne marche pas. Ni le cast avec (bool). Si je fais

@Html.CheckBoxFor(m => m.Foo.Value)

cela ne crée pas d'erreur, mais il ne se lie pas à mon modèle lorsqu'il est publié et foo est défini sur null. Quelle est la meilleure façon d'afficher Foo sur la page et de la lier à mon modèle sur une publication?

Je dois travailler avec

@Html.EditorFor(model => model.Foo) 

puis créer un Boolean.cshtml dans mon dossier EditorTemplates et coller

@model bool?

@Html.CheckBox("", Model.GetValueOrDefault())

à l'intérieur.

Réponse trouvée dans une question similaire - Rendu Nullable Bool comme CheckBox . C'est très simple et fonctionne simplement:

@Html.CheckBox("RFP.DatesFlexible", Model.RFP.DatesFlexible ?? false)
@Html.Label("RFP.DatesFlexible", "My Dates are Flexible")

C'est comme une réponse acceptée de @afinkelstein sauf que nous n'avons pas besoin de 'modèle d'éditeur' spécial

J'ai bool? IsDisabled { get; set; }dans Model. Inséré si dans View.

<div class="inputClass" id="disabled">
    <div>
    @if(Model.IsDisabled==null)
    {
        Model.IsDisabled = false;
    }           
    @Html.CheckBoxFor(model => model.IsDisabled.Value)         
    </div>
</div> 

Mon modèle a un booléen qui doit être nullable

Pourquoi? Cela n'a pas de sens. Une case à cocher a deux états: coché / décoché ou Vrai / Faux si vous voulez. Il n'y a pas de troisième état.

Ou attendez que vous utilisiez vos modèles de domaine dans vos vues au lieu de voir des modèles? C'est ton problème. La solution pour moi est donc d'utiliser un modèle de vue dans lequel vous définirez une simple propriété booléenne:

public class MyViewModel
{
    public bool Foo { get; set; }
}

et maintenant, l'action de votre contrôleur passera ce modèle de vue à la vue et générera la case à cocher appropriée.

Compliquer une primitive avec des champs masqués pour clarifier si False ou Null n'est pas recommandé.

La case à cocher n'est pas ce que vous devriez utiliser - elle n'a en réalité qu'un seul état: cochée . Sinon, ça pourrait être n'importe quoi.

Lorsque votre champ de base de données est un booléen Nullable ( bool?), l'UX doit utiliser 3-Radio Buttons, où le premier bouton représente votre "Checked", le deuxième bouton représente "Not Checked" et le troisième bouton représente votre null, quelle que soit la sémantique de null signifie. Vous pouvez utiliser une <select><option>liste déroulante pour enregistrer des biens immobiliers, mais l'utilisateur doit cliquer deux fois et les choix ne sont pas aussi clairs instantanément.

  1     0      null 
True  False  Not Set
Yes   No     Undecided
Male  Female Unknown
On    Off    Not Detected

La RadioButtonList, définie comme une extension nommée RadioButtonForSelectList, crée les boutons radio pour vous, y compris la valeur sélectionnée / cochée, et définit le <div class="RBxxxx">afin que vous puissiez utiliser css pour rendre vos boutons radio horizontaux (affichage: bloc en ligne), vertical ou sous forme de tableau (affichage: bloc en ligne; largeur: 100px;)

Dans le modèle (j'utilise string, string pour la définition du dictionnaire comme exemple pédagogique. Vous pouvez utiliser bool ?, string)

public IEnumerable<SelectListItem> Sexsli { get; set; }
       SexDict = new Dictionary<string, string>()
        {
                { "M", "Male"},
                { "F", "Female" },
                { "U", "Undecided" },

        };

        //Convert the Dictionary Type into a SelectListItem Type
        Sexsli = SexDict.Select(k =>
              new SelectListItem
              {
                  Selected = (k.Key == "U"),
                  Text = k.Value,
                  Value = k.Key.ToString()
              });

<fieldset id="Gender">
<legend id="GenderLegend" title="Gender - Sex">I am a</legend>
    @Html.RadioButtonForSelectList(m => m.Sexsli, Model.Sexsli, "Sex") 
        @Html.ValidationMessageFor(m => m.Sexsli)
</fieldset>

public static class HtmlExtensions
{
public static MvcHtmlString RadioButtonForSelectList<TModel, TProperty>(
    this HtmlHelper<TModel> htmlHelper,
    Expression<Func<TModel, TProperty>> expression,
    IEnumerable<SelectListItem> listOfValues,
    String rbClassName = "Horizontal")
{
var metaData = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
var sb = new StringBuilder();

if (listOfValues != null)
{
    // Create a radio button for each item in the list 
    foreach (SelectListItem item in listOfValues)
    {
        // Generate an id to be given to the radio button field 
        var id = string.Format("{0}_{1}", metaData.PropertyName, item.Value);

        // Create and populate a radio button using the existing html helpers 
        var label = htmlHelper.Label(id, HttpUtility.HtmlEncode(item.Text));

        var radio = String.Empty;

        if (item.Selected == true)
        {
            radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id, @checked = "checked" }).ToHtmlString();
        }
        else
        {
            radio = htmlHelper.RadioButtonFor(expression, item.Value, new { id = id }).ToHtmlString();

        }// Create the html string to return to client browser
        // e.g. <input data-val="true" data-val-required="You must select an option" id="RB_1" name="RB" type="radio" value="1" /><label for="RB_1">Choice 1</label> 

        sb.AppendFormat("<div class=\"RB{2}\">{0}{1}</div>", radio, label, rbClassName);
    }
}

return MvcHtmlString.Create(sb.ToString());
}
}

Pour moi, la solution était de changer le modèle de vue. Considérez que vous recherchez des factures. Ces factures peuvent être payées ou non. Votre recherche comporte donc trois options: Payé, Non payé ou "Je m'en fiche".

Je l'avais initialement défini comme un booléen? champ:

public bool? PaidInvoices { get; set; }

Cela m'a fait trébucher sur cette question. J'ai fini par créer un type Enum et j'ai géré cela comme suit:

@Html.RadioButtonFor(m => m.PaidInvoices, PaidStatus.NotSpecified, new { @checked = true })
@Html.RadioButtonFor(m => m.PaidInvoices, PaidStatus.Yes) 
@Html.RadioButtonFor(m => m.PaidInvoices, PaidStatus.No)

Bien sûr, je les avais enveloppés dans des étiquettes et j'avais spécifié du texte, je veux simplement dire que voici une autre option à considérer.

La case à cocher ne vous propose que 2 valeurs (vrai, faux). Nullable boolean a 3 valeurs (true, false, null) donc il est impossible de le faire avec une case à cocher.

Une bonne option consiste à utiliser une liste déroulante à la place.

Modèle

public bool? myValue;
public List<SelectListItem> valueList;

Manette

model.valueList = new List<SelectListItem>();
model.valueList.Add(new SelectListItem() { Text = "", Value = "" });
model.valueList.Add(new SelectListItem() { Text = "Yes", Value = "true" });
model.valueList.Add(new SelectListItem() { Text = "No", Value = "false" });

Vue

@Html.DropDownListFor(m => m.myValue, valueList)

Je créerais en fait un modèle pour cela et utiliserais ce modèle avec un EditorFor ().

Voici comment je l'ai fait:

1. Créer mon modèle, qui est essentiellement une vue partielle que j'ai créée dans le répertoire EditorTemplates, sous Shared, sous Views, nommez-le comme (par exemple) CheckboxTemplate::

   @using System.Globalization    
   @using System.Web.Mvc.Html    
   @model bool?
   
   @{
       bool? myModel = false;
       if (Model.HasValue)
       {
           myModel = Model.Value;
       }
   }
   
   <input type="checkbox" checked="@(myModel)" name="@ViewData.TemplateInfo.HtmlFieldPrefix" value="True" style="width:20px;" />

2. Utilisez-le comme ceci (dans n'importe quelle vue):

   @ Html.EditorFor (x => x.MyNullableBooleanCheckboxToBe, "CheckboxTemplate")

C'est tout.

Les modèles sont si puissants dans MVC, utilisez-les .. Vous pouvez créer une page entière en tant que modèle, que vous utiliseriez avec le @Html.EditorFor(); à condition que vous passiez son modèle de vue dans l'expression lambda.

L'approche la plus propre que je pourrais proposer est d'étendre les extensions disponibles HtmlHelpertout en réutilisant les fonctionnalités fournies par le framework.

public static MvcHtmlString CheckBoxFor<T>(this HtmlHelper<T> htmlHelper, Expression<Func<T, bool?>> expression, IDictionary<string, object> htmlAttributes) {

    ModelMetadata modelMeta = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
    bool? value = (modelMeta.Model as bool?);

    string name = ExpressionHelper.GetExpressionText(expression);

    return htmlHelper.CheckBox(name, value ?? false, htmlAttributes);
}

J'ai essayé de «façonner» l'expression pour permettre un passage direct au natif CheckBoxFor<Expression<Func<T, bool>>>mais je ne pense pas que ce soit possible.

J'ai eu un problème similaire dans le passé.

Créez une entrée de case à cocher en HTML et définissez l'attribut name = "Foo". Cela devrait toujours s'afficher correctement.

<input type="checkbox" name="Foo" checked="@model.Foo.Value" /> Foo Checkbox<br />

Vérifiez simplement la valeur nulle et renvoyez-lui false:

@{ bool nullableValue = ((Model.nullableValue == null) || (Model.nullableValue == false)) ? false : true; }
@Html.CheckBoxFor(model => nullableValue)

J'ai également fait face au même problème. J'ai essayé l'approche suivante pour résoudre le problème car je ne veux pas changer la base de données et générer à nouveau l'EDMX.

@{

   bool testVar = (Model.MYVar ? true : false);

 }

<label>@Html.CheckBoxFor(m => testVar)testVar</label><br />

Lors de la création d'un EditorTemplate pour un modèle contenant un bool Nullable ...

• Divisez le bool nullable en 2 booléens:

  // Foo is still a nullable boolean.
  public bool? Foo 
  {
      get 
      { 
          if (FooIsNull)
              return null;
  
          return FooCheckbox;  
      }
      set
      {
          FooIsNull   = (value == null);
          FooCheckbox = (value ?? false);
      }
  }
  
  // These contain the value of Foo. Public only so they are visible in Razor views.
  public bool FooIsNull { get; set; }
  public bool FooCheckbox { get; set; }

• Dans le modèle de l'éditeur:

  @Html.HiddenFor(m => m.FooIsNull)
  
  @if (Model.FooIsNull)
  {
      // Null means "checkbox is hidden"
      @Html.HiddenFor(m => m.FooCheckbox)
  }
  else
  {
      @Html.CheckBoxFor(m => m.FooCheckbox)
  }

• Ne publiez pas la propriété d'origine Foo, car elle est désormais calculée à partir de FooIsNull et FooCheckbox.

Toutes les réponses ci-dessus sont venues avec ses propres problèmes. Le moyen le plus simple / le plus propre à l'OMI est de créer un assistant

Rasoir MVC5

App_Code / Helpers.cshtml

@helper CheckBoxFor(WebViewPage page, string propertyName, bool? value, string htmlAttributes = null)
{
    if (value == null)
    {
        <div class="checkbox-nullable">
            <input type="checkbox" @page.Html.Raw(htmlAttributes)>
        </div>
    }
    else if (value == true)
    {
        <input type="checkbox" value="true" @page.Html.Raw(htmlAttributes) checked>
    }
    else
    {
        <input type="checkbox" value="false" @page.Html.Raw(htmlAttributes)>
    }
}

Usage

@Helpers.CheckBoxFor(this, "IsPaymentRecordOk", Model.IsPaymentRecordOk)

Dans mon scénario, une case à cocher nullable signifie qu'un membre du personnel n'avait pas encore posé la question au client, elle est donc enveloppée dans un .checkbox-nullableafin que vous puissiez styler de manière appropriée et aider l'utilisateur final à identifier que ce n'est ni truenifalse

CSS

.checkbox-nullable {
    border: 1px solid red;
    padding: 3px;
    display: inline-block;
}

Méthodes d'extension:

        public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool?>> expression)
        {
            return htmlHelper.CheckBoxFor<TModel>(expression, null);
        }
        public static MvcHtmlString CheckBoxFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, bool?>> expression, object htmlAttributes)
        {
            ModelMetadata metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
            bool? isChecked = null;
            if (metadata.Model != null)
            {
                bool modelChecked;
                if (Boolean.TryParse(metadata.Model.ToString(), out modelChecked))
                {
                    isChecked = modelChecked;
                }
            }
            return htmlHelper.CheckBox(ExpressionHelper.GetExpressionText(expression), isChecked??false ,  htmlAttributes);
        }

Les boutons radio sont utiles, mais ils ne vous permettent pas de désélectionner . Si vous voulez ce comportement, envisagez d'utiliser une liste déroulante / sélectionnez. Le code suivant générera le SelectListet cela se lie avec succès à un booléen Nullable:

public static SelectList GetBoolTriState()
{
    var items = new List<SelectListItem>
    {
        new SelectListItem {Value = "", Text = ""},
        new SelectListItem {Value = "True", Text = "Yes"},
        new SelectListItem {Value = "False", Text = "No"},
    };

    return new SelectList(items, "Value", "Text");
}

@{  bool testVar = ((bool)item.testVar ? true : false); }
  @Html.DisplayFor(modelItem => testVar)

tu peux essayer comme ça

@Html.TextBoxFor(m => m.foo, new {   type = "checkbox" })

C'est une vieille question, et les réponses existantes décrivent la plupart des alternatives. Mais il y a une option simple, si vous avez booléen? dans votre viewmodel, et vous ne vous souciez pas de null dans votre interface utilisateur:

@Html.CheckBoxFor(m => m.boolValue ?? false);