How can I make ASP.NET MVC 3 render Html.CheckBoxFor and the corresponding hidden element with reversed values?

Question

I'm using ASP.NET MVC3 with Razor.

I have a boolean value in my model which I would like to render as a check box in my view. However, I would like the check box to indicate the reverse of the boolean state. In other words, selecting the check box should set the bound model object to false, not true, when the form is submitted. And vice versa.

I can do this to set the value attribute on the rendered check box input element:

@Html.CheckBoxFor(model => model.MyBoolean, new { value = "false" })

But the hidden input element that is automatically created still has a value of false. Thus they both have a value of false, which means the bound model object is always set to false.

So how can I force the HTML helper to set the hidden element to true and the check box element to false?

I know that (a) I could alter the model and the database, (b) I could alter the values with javascript just prior to submission, and (c) I could swap whatever value is received in the controller after submission. I may do one of these, but I'm not asking for possible solutions; I'm asking whether it is possible to make the HTML helper do as I wish. I have searched extensively and haven't seen this addressed anywhere in official or unofficial sources. It seems like they should have a "swap" option or something.

"@Html.CheckBox("YourElementName", Model.MyBoolean)" is that what you want? — Saeed-rz
– Saeed-rz, Commented Jan 18, 2013 at 8:13
@Leon_SFS: No, your code would render the same. I want to be able to use the exact code in my question but have the helper recognize that I'm setting the value to false and therefore render the corresponding hidden input element with a value of true. The purpose of the hidden element is to represent the opposite of the check box element's value, so the helper should make sure it is always the opposite. — dairystatedesigns
– dairystatedesigns, Commented Jan 18, 2013 at 14:48

Quinton Bernhardt · Accepted Answer · 2013-01-18 06:52:27Z

3

    class ViewModel {
        public bool MyBoolean {get;set;}
        public bool DisplayValue {
            get {
                return ! MyBoolean ;
            }

            set {
                MyBoolean = !value;
            }
        }
    }

And bind to the DisplayValue as it's setter updates you MyBoolean property anyway.

EDIT:

After reading your question again:.

You could use HtmlHelper to do that - but instead of using a CheckBox you could use a dropdown. The dropdown will define the "oppisite" values and text.

    myModelInstance.PossibleValues = new[] { new SelectListItem { Value = "false", Text = "Not false" }, new SelectListItem { Value = "true", Text = "Not true" } };

Notice how the description is the opposite meaning of what you want the model to be. So for eg. for true you may have text as "Hidden" and false you may have the text as "Visible", true for "Disabled" and false for "Enabled" etc.

Then in your View:

    @Html.DropDownList(Model.MyBoolean.ToString(), Model.PossibleValues)

The model will be updated with the correct value without have to do boolean toggles before viewing or updating.

edited Jan 18, 2013 at 6:52

answered Jan 17, 2013 at 19:39

Quinton Bernhardt

4,81322 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dairystatedesigns Over a year ago

This is the best answer if it is not possible to make the HTML helper do what I want without altering the view model.

Erik Philips Over a year ago

This is exactly what a ViewModel is for, making sure your view has the correct/transformed data to display the data correctly for the user. Just as a ViewModel would turn a Guid into a List of string values a user can select from.

dairystatedesigns Over a year ago

Another good option in your edit, but unfortunately the design calls for a check box in my particular case. It seems to me that a true MVC architecture would make this possible strictly through view rendering. I understand the point @ErikPhilips is making, that ViewModels are typically used for this purpose and ViewModels are different from DB models, but I guess I disagree with the way this framework is designed then. Just seems like the HTML helper is a more logical place to handle design/usability considerations. In any case, I'll accept this answer as correct.

Erik Philips · Accepted Answer · 2013-01-18 19:01:05Z

For future readers, in my own opinion, HtmlHelpers are designed to render Html (as the name suggests). My preference for creating different way to render items is to create EditFor and DisplayFor templates. To make sure this is highly reusable, I also create model designed specifically for these templates. With your design, my models and templates might look like:

/Models/Controller/ControllerActionViewModel.cs

public class ControllerActionViewModel
{
  public ControllerActionViewModel()
  {
    this.CheckboxBoolTemplate = new CheckboxBoolTemplate(false, true);
  }

  [Display(Name = "My Boolean")]
  public SelectBoolTemplate MyBoolean { get; set; }
}

/TemplateModels/ControllerActionViewModel.cs

public sealed class SelectBoolTemplate
{
  private bool _valuesSwapped = false;
  private bool? _value;
  private bool _defaultValue = false;

  public SelectBoolTemplate()
  {
  }

  public SelectBoolTemplate(bool valuesSwapped)
  {
    this._valuesSwapped = valuesSwapped)
  }

  public SelectBoolTemplate(bool defaultValue, bool valuesSwapped)
  {
    this._defaultValue = defaultValue;
    this._valuesSwapped = valuesSwapped)
  }

  public bool Value
  {
    get
    {
      if (this._value.HasValue)
      {
        return this._value.Value
      }
      return this._defaultValue;
    }
    set
    {
      this._value = value;
    }
  }
}

/Views/Shared/EditorTemplates/SelectBoolTemplate.cshtml

@model SelectBoolTemplate

@{
string propertyName = ViewContext.ViewData.ModelMetadata.PropertyName;
string fullPropertyName = ViewContext.ViewData.TemplateInfo.HtmlFieldPrefix;
string labelText = ViewContext.ViewData.ModelMetadata.DisplayName 
                   ?? ViewContext.ViewData.ModelMetadata.PropertyName;
}

@Html.LabelForModel()
@Html.Checkbox(fullPropertyName, Model.Value)

Good solution. I thought about this option, too, but it seems like such overkill for a need that hardly ever arises. Also, I think it should be new SelectBoolTemplate(false, true); in the ViewModel code.

Gav · Accepted Answer · 2017-08-14 09:28:41Z

0

I know this is too late for the original query but for anyone reading in future there's an alternative way to handle checkboxes with reversed false/true for checked/unchecked which requires no changes to the model - create a checkbox for false and a hidden field for true

<input id="@Html.IdFor(model => model.BoolProperty)" name="@Html.NameFor(model => model.BoolProperty)" type="checkbox" value="false" @(Model.BoolProperty? "" : "checked=\"checked\"" ) />
<input name="@Html.NameFor(model => model.BoolProperty)" type="hidden" value="true" />

answered Aug 14, 2017 at 9:28

Gav

1

Collectives™ on Stack Overflow

How can I make ASP.NET MVC 3 render Html.CheckBoxFor and the corresponding hidden element with reversed values?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related