How to bind checkbox to a string property in asp net mvc

Question

I had in my classes some fields that represents true or false, but it has string values "T" or "F".

How to bind the checkbox to these fields?

I've updated my solution to further take care of the server side binding problem you were having. — Josh
– Josh, Commented Sep 2, 2011 at 19:06

Josh · Accepted Answer · 2011-09-02 19:04:02Z

8

You can do this in ASP.Net MVC Razor

<input type="checkbox" name="someName" value="@Model.SomeValue" 
@(Model.IsChecked == "T" ? "checked='checked'" : "") />

However, this may not be what you are looking for, since you would have to do some manual work on the server to figure out values that had been "unchecked".

By default only your checked values will get sent to the server.

UPDATE:

The Html.CheckBox and Html.CheckBoxFor helper methods both emit hidden fields in order to make sure everything binds correctly back to your model. You can imitate this behavior pretty easily.

First you need to emit a hidden field that will be bound to your model on the server.

@Html.HiddenFor(model => model.StringBool, new { id = "_stringBool" })

Next you create a plain jane checkbox and set the initial state to reflect your model.

<input type="checkbox" id="myCheckBox" @(Model.StringBool == "T" ? "checked='checked'" : "") />

This checkbox's only purpose is to proxy values to and from the hidden field so your model will automatically get bound on the server. This can be achieved with some simple jQuery.

$("#myCheckBox").click(function () {
   var isChecked = $(this).is(":checked");

   $("#_stringBool").val(isChecked ? "T" : "F");
});

Now checking and unchecking the box will set the value of your bound hidden field accordingly. When you post to the server your values will be preserved via model binding.

Some things to note

This does not take into account validation. It is very easy to change the value of the hidden field so make sure you properly validate on the server side!

edited Sep 2, 2011 at 19:04

answered Sep 2, 2011 at 16:58

Josh

45k7 gold badges106 silver badges125 bronze badges

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

1 Comment

Beetlejuice Over a year ago

I implement a javascript code to change the "value" property when click the checkbox: $(":checkbox").live("change", function () { if (this.checked) { this.value = "T"; } else { this.value = "F"; } }); but this only works when it is checked. When is unchecked the value binded is null.

mservidio · Accepted Answer · 2011-09-02 16:59:12Z

0

When you set the checkstate of the new checkbox items, just put an if statement:

checkBox1.Checked = (stringValue == "T") ? true : false;

answered Sep 2, 2011 at 16:59

mservidio

13.1k9 gold badges61 silver badges86 bronze badges

Comments

Jon Koeter · Accepted Answer · 2012-03-23 11:38:03Z

I made my own extension to solve this problem. It is a little tidyer in the razorview, helps minimizing the c# / razor mixture. Here's the class:

public static class CheckBoxExtensions {

    public static MvcHtmlString ValueCheckbox<TModel>(this HtmlHelper<TModel> htmlHelper, string name, string value, bool isChecked, IDictionary<string, object> htmlAttributes, bool disabled = false)
    {
        string result = string.Format(CultureInfo.InvariantCulture, 
            "<input type=\"checkbox\" name=\"{0}\" value=\"{1}\" {2} {3} ",
            name, value, (isChecked) ? "checked=\"checked\"" : "", (disabled) ? "disabled=\"disabled\"" : "");

        if (htmlAttributes != null && htmlAttributes.Count > 0)
        {
            foreach (KeyValuePair<string, object> item in htmlAttributes)
            {
                result += string.Format(CultureInfo.InvariantCulture, "{0}=\"{1}\" ", item.Key, item.Value.ToString());
            }
        }

        result += " />";

        return new MvcHtmlString(result);
    } 
}

And this is what I do in the razorview:

Html.ValueCheckbox("SelectedItems", 
    item.Number, 
    (Model.SelectedItems.Contains(item.Number)), 
    new Dictionary<string, object>() { 
        { "data-disable-bubble", "true" }, 
        { "data-forms-enable-any-checked-checkbox", "true" } 
    }
)

Dont mind the weir HtmlAttributes, I figured I would just let them in there :-)

Collectives™ on Stack Overflow

How to bind checkbox to a string property in asp net mvc

3 Answers 3

UPDATE:

Some things to note

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

UPDATE:

Some things to note

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related