Binding my view model to a view causes all check boxes to be checked

Question

I'm having an issue where my all the check boxes rendered in the view are coming out checked. I put a breakpoint at the line where my view model is constructed and through the debugger, I can see that some values are set to "true" and others are set to "false". So the problem, I'm assuming, has got to be in the view itself.

Here is my model:

public class UserModulesAdministrationViewModel
{
    public bool AccessGranted { get; set; }
    public int ModuleId { get; set; }
    public string ModuleName { get; set; }
    public string ModuleDescription { get; set; }
}

Here is my controller that is rendering the list:

public ActionResult UserModules(int id)
{
   // Database stuff here

    var model = modules.Select(module => new Infrastructure.ViewModels.UserModulesAdministrationViewModel
    {
        ModuleId = module.AccessModuleId,
        AccessGranted = userModules.Any(z => z.AccessModuleId == module.AccessModuleId),
        ModuleName = module.ModuleName,
        ModuleDescription = module.ModuleDescription
    }).ToList();

    return View(model);
}

And finally here is my relevant view code:

@model IEnumerable<UserModulesAdministrationViewModel>

@foreach (UserModulesAdministrationViewModel m in Model)
{
    <div class="col-md-4" style="margin-top: 15px;">
    <div class="moduleBlockLong" style="position: relative">
        <div class="moduleHeader">@m.ModuleName</div>
        <div class="moduleText">@m.ModuleDescription</div>

        <div class="checkbox" style="position: absolute; bottom: 0; right: 80px">
            <label>

                @{
                    var m1 = m;
                }
                @Html.CheckBoxFor(z => m1.AccessGranted )
                <input type="checkbox" value="" checked="checked"/> Allow Access
            </label>
        </div>

    </div>
    </div>
}

just making sure, these are two seperate checkboxes and your talking about the former, not the latter? `@Html.CheckBoxFor(z => m1.AccessGranted ) ` — AmmarCSE, Jun 15 '15 at 21:42
@AmmarCSE - I am an idiot. I forgot to delete the `` line. Duh. Make an answer and I'll accept it. — Icemanind, Jun 15 '15 at 21:47
Hey, your not the one who once spent hours on a bug because of a misplaced comma in the code! Weve all been there! :) But hey, if any problems persist, let me know so I can try and help — AmmarCSE, Jun 15 '15 at 21:52

score 3 · Answer 1 · answered Jun 15 '15 at 21:49

3

The problem seems to me like you have hardcoded the input after the CheckBoxFor HtmlHelper.

@Html.CheckBoxFor(z => m1.AccessGranted )
<input type="checkbox" value="" checked="checked"/>

Remove:

<input type="checkbox" value="" checked="checked"/>

It's also worth noting that as you are using a foreach loop rather than a for loop that you will not be able to post the selected values back to the server.

You will need to index your loop as follows:

@for (var i = 0; i < Model.Count; i++)
{
  // code
  @Html.CheckBoxFor(z => Model[i].AccessGranted)
  // rest of code
}

Or you will not be able to read any user input on the server.

answered Jun 15 '15 at 21:49

hutchonoid

32,982
15
99
104

Thank you for the tip. I'm just curious, why is that? Does MVC need an index to be able to write data in a collection? – Icemanind Jun 15 '15 at 22:01
1

@Icemanind Sure no problem. As it is a collection the model binder needs to know which item it is in the collection and renders the name out on the client with the count. This is a great article on it http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx/ :) – hutchonoid Jun 15 '15 at 22:04

score 1 · Answer 2 · edited May 23 '17 at 11:51

I think that happens because you left <input type="checkbox" value="" checked="checked"/> Remove it and it will works.

Also there exist another problem about foreach loop.

ASP.NET MVC 4 - for loop posts model collection properties but foreach does not

Solution:

@for(var i = 0; i<Model.Count; i++)
{
    <div class="col-md-4" style="margin-top: 15px;">
      <div class="moduleBlockLong" style="position: relative">
        <div class="moduleHeader">@Model[i].ModuleName</div>
        <div class="moduleText">@Model[i].ModuleDescription</div>
        <div class="checkbox" style="position: absolute; bottom: 0; right: 80px">
            <label>    
                 @Html.CheckBoxFor(z => Model[i].AccessGranted) Allow Access 
            </label>
        </div>    
      </div>
    </div>
}

score 1 · Accepted Answer · answered Jun 15 '15 at 21:49

1

In your view, remove

 <input type="checkbox" value="" checked="checked"/> Allow Access

Because of checked="checked", this will always print out a checked checkbox.

answered Jun 15 '15 at 21:49

AmmarCSE

30,079
5
45
53

score 0 · Answer 4 · edited Jun 15 '15 at 21:55

0

Try this code... Instead of : <input type="checkbox" value="" checked="checked"/> Allow Access

Try: <input type="checkbox" value="" checked="@m.AccessGranted "/> Allow Access

In addition, don't use m1 parameter..

edited Jun 15 '15 at 21:55

Claies

22,124
4
53
77

answered Jun 15 '15 at 21:43

AnanasPie

1

I'm not sure what this answer even means. Changing the text wouldn't have any effect on program logic, beside the fact that you suggested a change identical to the original text. – Claies Jun 15 '15 at 21:54
on further examination, there is an answer here, but the code isn't formatted to be properly readable. – Claies Jun 15 '15 at 21:54

Binding my view model to a view causes all check boxes to be checked

4 Answers4