How to pass IEnumerable list to controller in MVC including checkbox state?

Praveen VR picture Praveen VR · Jun 11, 2013 · Viewed 105.9k times · Source

I have an mvc application in which I am using a model like this:

 public class BlockedIPViewModel
{
    public string  IP { get; set; }
    public int ID { get; set; }
    public bool Checked { get; set; }
}

Now I have a View to bind a list like this:

@model IEnumerable<OnlineLotto.Web.Models.BlockedIPViewModel>
@using (Html.BeginForm())
{
  @Html.AntiForgeryToken()
}

@foreach (var item in Model) {
<tr>
    <td>

        @Html.HiddenFor(x => item.IP)           
        @Html.CheckBoxFor(x => item.Checked)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.IP)
    </td>

</tr>
}

<div>
    <input type="submit" value="Unblock IPs" />
</div>

Now I have a controller to receive action from submit button:

 public ActionResult BlockedIPList(IEnumerable<BlockedIPViewModel> lstBlockedIPs)
 {

  }

But I am getting null value to lstBlockedIPs when coming to controller action.I need to get the checkbox state here. Please help.

Answer

Darin Dimitrov picture Darin Dimitrov · Jun 11, 2013

Use a list instead and replace your foreach loop with a for loop:

@model IList<BlockedIPViewModel>

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken()

    @for (var i = 0; i < Model.Count; i++) 
    {
        <tr>
            <td>
                @Html.HiddenFor(x => x[i].IP)           
                @Html.CheckBoxFor(x => x[i].Checked)
            </td>
            <td>
                @Html.DisplayFor(x => x[i].IP)
            </td>
        </tr>
    }
    <div>
        <input type="submit" value="Unblock IPs" />
    </div>
}

Alternatively you could use an editor template:

@model IEnumerable<BlockedIPViewModel>

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken()
    @Html.EditorForModel()   
    <div>
        <input type="submit" value="Unblock IPs" />
    </div>
}

and then define the template ~/Views/Shared/EditorTemplates/BlockedIPViewModel.cshtml which will automatically be rendered for each element of the collection:

@model BlockedIPViewModel
<tr>
    <td>
        @Html.HiddenFor(x => x.IP)
        @Html.CheckBoxFor(x => x.Checked)
    </td>
    <td>
        @Html.DisplayFor(x => x.IP)
    </td>
</tr>

The reason you were getting null in your controller is because you didn't respect the naming convention for your input fields that the default model binder expects to successfully bind to a list. I invite you to read the following article.

Once you have read it, look at the generated HTML (and more specifically the names of the input fields) with my example and yours. Then compare and you will understand why yours doesn't work.