MVC3 WebGrid CheckBox

Question

I'm trying to add a checkbox to a column on a web grid, and I'm finding it hard using Html.CheckBox to get it to render. If I use input type="checkbox" it renders, but I can't seem to save the value in the view model.

I have a rather complex view, which has two webGrids, and you select items in one to move to the other, when moved to grid1, you can check a box against each of the rows if you want. Everything is working, except I can't get the value of the checkbox to save.

The code for my grid that has the checkbox looks like this:

var grid1 = new WebGrid(source: Model.FieldsInTemplate, canSort: false, defaultSort:"FieldName");

    @grid1.GetHtml(headerStyle:"gridGroupRow", tableStyle: "gridGroup", rowStyle: "gridRow", alternatingRowStyle: "gridRowAlt", columns: grid1.Columns(
        grid1.Column("FieldName", "Field Name"),
        grid1.Column(header: "Required", format: @<text><input name="IsRequired" type="checkbox" value="@item.IsRequired" /></text>),
        grid1.Column(format: (item) => new HtmlString("<a href='#' id='test' onclick='updateTemplate(false," + item.FieldId.ToString() + ");'>Remove</a>"))
             ))

So using the above, the grid renders with a checkbox, but on submission the entity is always false. The view uses a viewModel of:

public class TemplateFieldInteractViewModel
{
    public IList<MetadataTemplateFieldInstanceDisplayViewModel> FieldsInTemplate
    {
        get;
        set;
    }

    public IList<MetadataTemplateFieldInstanceDisplayViewModel> FieldsNotInTemplate
    {
        get;
        set;
    }
}

The MetadataTemplateFieldInstanceDisplayViewModel looks like:

public class MetadataTemplateFieldInstanceDisplayViewModel
{
    public int FieldId {get;set;}

    public string FieldName {get;set;}

    public bool IsRequired {get;set;}
}

Please let me know if this is a little vague, I'm new here, and don't want to overload you with too much unnecessary code.

Cheers

Mark

I haven't used WebGrid, but have a suspicion that it might do the same as Html.CheckboxFor, which generates an extra hidden field which is always set to false. It might be this which is causing the problem - see http://stackoverflow.com/questions/2697299/asp-net-mvc-why-is-html-checkbox-generating-an-additional-hidden-input — StuartLC, Apr 24 '12 at 13:40

score 4 · Accepted Answer · answered Apr 24 '12 at 13:36

4

The value of a checkbox does not determine if it's "checked" or not. You'll need to use checked="checked".

I'm not 100% learned with Razor, but here's an attempt:

<input name="IsRequired" type="checkbox" @if(item.IsRequired) { <text>checked="checked"</text>} value="@item.IsRequired" />

Does this solve your problem?

answered Apr 24 '12 at 13:36

Julia McGuigan

624
1
7
16

Unfortunately, this did not resolve the issue. Thanks for the attempt though. This looks like it's saying "If IsRequired is checked, then check the box". When the grid is loaded initially this field is always false, and therefore the users will check it if required. – Mark Apr 24 '12 at 14:12
Hmm, I've always had trouble with "lists" of objects. What does the post look like? – Julia McGuigan Apr 24 '12 at 14:15
Okay, so that works (Shows the fields as checked at runtime) if the rows already have the checkbox checked, going into an Update view. However on submission, fields that were previously checked (even without changing them at runtime), will now be unchecked. – Mark Apr 24 '12 at 15:22
That's a little confusing. Is it not going into the controller? Again, what does the form's POST request look like? I don't need the RAW view, just the data elements. – Julia McGuigan Apr 24 '12 at 22:59
Hey, thanks for your input, I've actually managed to resolve the issue. It turns out that the dev that implemented most of this page's functionality had this code in a partial view, and the main view had ajax calls to the controller, everytime something was moved. Therefore the elements on the partial were just visual representations. I had to create a new AJAx call to achieve what I wanted. – Mark Apr 25 '12 at 08:35
I will however mark your first response as a resolution, as it has actually helped me to visually display items that are already checked in the view. Thanks for your time. – Mark Apr 25 '12 at 08:36

score 1 · Answer 2 · answered Nov 22 '13 at 10:48

If you declare the column like so:

grid.Column("Select", "Select", format: @<input type="checkbox" name="selectedrows" value="@item.WedNo" />)

then in your action the form posts to you can access these selected item like so:

public ActionResult Selections(string[] selectedrows)

Here selectedrows will contain all the checkboxes checked.

score 0 · Answer 3 · answered May 03 '12 at 01:16

I figured out how to do this the way I wanted:

   grid.Column("Select", header: "", format: (item) => @Html.Raw("<a href='" + item.GetSelectUrl() + "' /><img src='" + ((grid.SelectedRow == item) ? "../../Content/images/AdminSelect-ON.png" : "../../Content/images/AdminSelect-OFF.png") + "' />")),

MVC3 WebGrid CheckBox

3 Answers3