MVC Checkbox value not working

Question

Hi i have a check box for a checklist program that i am making, its type is bool? so that i can pass a null value if the answer is not applicable (they should leave the yes and no blank), otherwise they should tick yes or no..my problem now is how can i save the answer to my answer property.

View:

   YES
              @Html.CheckBox("chkYes", Model.questionnaires[itemindex].Answer.HasValue  ? bool.Parse(Model.questionnaires[itemindex].Answer.ToString()):false)
   NO
               @Html.CheckBox("chkNo", Model.questionnaires[itemindex].Answer.HasValue ? !bool.Parse(Model.questionnaires[itemindex].Answer.ToString())  : false)

Model:

public bool? Answer { get; set; }

Changed my view from checkbox to radiobutton:

  YES
                  @Html.RadioButtonFor(modelItem => modelItem.questionnaires[itemindex].Answer,true, new { id = "rbYes"}) 
                 NO
                    @Html.RadioButtonFor(modelItem => modelItem.questionnaires[itemindex].Answer,false, new { id = "rbNo"}) 
                 Not Applicable
                    @Html.RadioButtonFor(modelItem => modelItem.questionnaires[itemindex].Answer,null, new { id = "rbNotApp"})

my problem now is how to pass a null value when not applicable?

Model.questionnaires[itemindex].Answer = true. I think you are missing ==. — Mukund, Oct 07 '14 at 06:58
yes i forgot adding another = since im just typing outside the code editor, i already changed it to bool.parse..will update my code in a while — anonymous1110, Oct 07 '14 at 07:05

score 2 · Accepted Answer · 2014-10-07T09:10:19.003

You 2 checkboxes (and the associated hidden inputs) will be rendered as

<input type="checkbox" name="chkYes" ...>
<input type="hidden" name="chkYes" ...>
<input type="checkbox" name="chkNo" ...>
<input type="hidden" name="chkNo" ...>

which will post back to properties named chkYes and chkNo (which don't exist) but you property name is Answer. You can use @Html.EditorFor(m => m.questionnaires[itemindex].Answer) which will render a dropdown with 3 values (True/False/Not Set) or you could use 3 radio button to indicate the state.

Note also you cannot use a checkbox for a nullable bool. A checkbox has 2 states only (checked = true or unchecked = false) whereas a nullable bool has 3 states (true, false and null). In addition a checkbox does not post back a value if its unchecked

If you use radio buttons, then

YES
@Html.RadioButtonFor(modelItem => modelItem.questionnaires[itemindex].Answer, true, new { id = "rbYes"}) 
NO
@Html.RadioButtonFor(modelItem => modelItem.questionnaires[itemindex].Answer, false, new { id = "rbNo"}) 
Not Applicable
@Html.RadioButtonFor(modelItem  => modelItem.questionnaires[itemindex].Answer, string.Empty, Model.questionnaires[itemindex].Answer.HasValue ? (object)new { id = "rbNotApp" } : (object)new { id = "rbNotApp", @checked = "checked" })

i cant seem to understand, i need to post the answer back, my problem is that it now saves null to everything despite the answer being yes or no — anonymous1110, Oct 07 '14 at 07:08
You are not rendering any inputs with `name="questionnaires[0].Answer"` so nothing is posted back to the property `Answer` so of course its null. The name of your inputs must match the name of your property (in this case because you have a collection, it must also include the indexer) — , Oct 07 '14 at 07:14
hi stephen i changed my checkbox to radiobutton now, please see my edited code. my question now is how to pass a null value if not applicable? thanks — anonymous1110, Oct 07 '14 at 07:44

messed-up · Answer 2 · 2017-02-04T01:39:15.020

Yes, the HTML is rendered with two input for same properties like #Stephen Muecke said in his answer. Because both of the input has the same name, the form post doesn't take either one. I didn't find the hidden input very useful so i removed it on page load using JS like below.

 @Html.CheckBoxFor(model => model.IsRFD, new { @class = "checkbox" })
 @Html.LabelFor(model => model.IsRFD)

JS:

 $('input[name="IsRFD"][type="hidden"').remove();

Now it is working perfectly with no problem so far...

Saket Kumar · Answer 3 · 2014-10-07T07:14:35.613

0

I don't understand one thing. If the answer is just 'Yes' or 'No', why use checkbox? Shouldn't Radio buttons be used for the purpose? You can implement in the simpler way as:

@Html.RadioButtonFor(m=>m.Answer , new{ Name="Answer"}) Yes
@Html.RadioButtonFor(m=>m.Answer , new{ Name="Answer"}) No

If you still want to go with your method you can directly bind it to model I think:

YES  @Html.CheckBoxFor(m=>m.Answer)
NO @Html.CheckBoxFor(m=>m.Answer)

Make model field as:

public bool Answer { get; set; }

Handle null request in controller after postback..

edited Oct 07 '14 at 07:14

answered Oct 07 '14 at 07:07

Saket Kumar

4,363
4
32
55

first it was radiobutton, but later i had to change it since some questions is not applicable. thats why my answer is nullable to handle this. – anonymous1110 Oct 07 '14 at 07:10
@anonymous1110: Try handling null requests after postback in controller. – Saket Kumar Oct 07 '14 at 07:15
@Saket, How can you handle a null? The value is either `true` or `false`. There will be nothing in the postback to indicate a `null` value! – Oct 07 '14 at 07:26

score 0 · Answer 4 · edited May 23 '17 at 12:25

0

Why doesn't my checkbox map to an MVC model member?

Here you have an example of how you must map the checkbox to your mvc model. Checkboxes are trashy, but there is always a workaround.

Model :

namespace TestAppMVC2.Models
{
    public class MyModel
    {
       public bool Option1 { get; set; }
    }
}

View :

<fieldset>
    <legend>Fields</legend>

    <div class="editor-label">
        @Html.LabelFor(model => model.Option1)
    </div>
    <div class="editor-field">
         @Html.CheckBoxFor(model => model.Option1)
         @Html.ValidationMessageFor(model => model.Option1)
    </div>

    <p>
        <input type="submit" value="Save" />
    </p>
</fieldset>

edited May 23 '17 at 12:25

Community

1
1

answered Oct 07 '14 at 07:12

Razvan Dumitru

11,815
5
34
54

can this handle if the user doesnt want to answer? i need to pass it as nullable if not applicable – anonymous1110 Oct 07 '14 at 07:15
You can place 2 checkboxes for Yes and No, but you will need 2 properties in the model to accomplish this functionality. If the user didn't check yes or no, there is your nullable option. – Razvan Dumitru Oct 07 '14 at 08:02
@anonymous1110 Make the `bool Option1` as nullable `Nullable Option1` and remove the line `@Html.ValidationMessageFor(model => model.Option1)` from razor. – G J Oct 07 '14 at 08:10
Or like @GauravSinghJantwal said (reliable shortcut), but the user can be surprised by your approach. – Razvan Dumitru Oct 07 '14 at 08:12

score 0 · Answer 5 · answered Jan 20 '20 at 10:50

In MVC, we can not change de model value because MVC generates a hidden input of your checkbox, but we can obtain the value by jquery and change the model.

With this example:

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

In js use this (in onchange event or whatever you need):

var checked = $("#Option1").is(':checked'); $("#Option1").val(checked);

MVC Checkbox value not working

5 Answers5