i need to pass the values of multiple checkbox items to the controller from the view

Question

@model IEnumerable<State>

@{
    ViewBag.Title = "Index";
}

<h2>State Data</h2>

<p>
    @Html.ActionLink("Create New", "CreateState")
</p>
<p>
    @using (Html.BeginForm())
    {
        <p>
            Search by Name: @Html.TextBox("searchstring") <br/>
            <input type="submit" value="Filter"/>
        </p>
    }
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Station)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Station)
            </td>
            <td>
                @Html.ActionLink("Update State Data", "UpdateStation", new {id = item.Id}) |
                @Html.ActionLink("Delete", "DeleteState", new {id = item.Id})  | Select to Include in Charts

            </td>
        </tr>
    }

</table>

This is my code, i need to input a @Html.Checkbox() for every item, then pass the values of the selected items to the controller and create a chart with those values..

I know how to make the chart, i just don't know how to use the checkbox and pass the values.

{
    [Table("State")]
    public class State
    {
        public State()
        {
            Orders = new HashSet<Order>();
        }

        public int Id { get; set; }

        [Required]
        [StringLength(50)]
        [Display(Name = "State")]
        public string Name { get; set; }

        [Required]
        public int Station { get; set; }


        public virtual ICollection<Order> Orders { get; set; }
    }
}

i want to be able to pass the name and station of each selected item, so i can use them to create a chart — lagfvu, Jul 10 '15 at 13:51

score 3 · Answer 1 · edited May 23 '17 at 12:14

Adapted user5103147's DNF to incorporate the Viewmodel idea :)

Do try to use mapping instead of inheritance though.

In your State model, add a bool variable. The default editor for bool variables is a checkbox, if you add it to the State model then the DefaultModelBinder should pick it up.

As for passing to the controller, perhaps you should consider using a viewmodel.

Your implementation of that would look a little like this:

public class StateListViewModel 
{
    public List<StateViewModel> States { get; set; }
}


public class StateViewModel : State
{
    public bool Selected { get; set; }
}

Then you can access those values. I have an answer here which links to something Darin Dimitrov wrote about View models, worth the read.

If you implement the above, you can provide a checkbox for each item and place the table in a form, which can then be submitted to the controller using the View model. This will give you a 'selected' value for each item, and you can use that to build your chart.

Also should be noted that it's often not always a fantastic idea to inherit a domain model with your view model, but it's not gonna kill you. The better option would be to create a mapper to map between the two, or use Automapper.

user5103147 · Accepted Answer · 2015-07-10T15:12:49.100

2

if you add a bool field like @Sippy suggests make sure you change your @foreach to a @for loop so you can get the full collection back from the view to your controller

@for (var i = 0; i < Model.Count(); i++)
{ 
    <tr>
        <td>
            @Html.CheckBoxFor(modelItem => Model[i].Selected) @* new bool field *@
        </td>
        <td>
            @Html.DisplayFor(modelItem => Model[i].Name)
            @Html.HiddenFor(modelItem => Model[i].Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => Model[i].Station)
            @Html.HiddenFor(modelItem => Model[i].Station)
        </td>
        <td>
            @Html.ActionLink("Update State Data", "UpdateStation", new { id = Model[i].Id }) |
            @Html.ActionLink("Delete", "DeleteState", new { id = Model[i].Id })  | Select to Include in Charts

        </td>
    </tr>
}

Then your action can accept a List and you can use linq to get the selected items

[HttpPost]
public ActionResult Index(IEnumerable<State> model)
{
    var selected = model.Where(a => a.Selected == true);

DotNetFiddle Example

edited Jul 10 '15 at 15:12

answered Jul 10 '15 at 14:12

user5103147

221
1
6

Why would you need to do that? O_o if he implements what I said, the only change will be the target collection for the foreach will need to become `@Model.States` – Inspector Squirrel Jul 10 '15 at 14:27
he wants to `be able to pass the name and station of each selected item, so i can use them to create a chart` simply adding a checkbox would not accomplish this – user5103147 Jul 10 '15 at 14:42
That's why I inherited the domain model, so he can still access those attributes. – Inspector Squirrel Jul 10 '15 at 14:43
but how are you passing the values back to the controller?.. by having all the fields names the same?..thats what `@Html.CheckBoxFor(modelItem => item.Selected)` would do and won't work – user5103147 Jul 10 '15 at 14:48
i added a DotNetFiddle example of how it would work. feel free to add your own using `@Html.CheckBoxFor(modelItem => item.Selected)` and show us how that would work – user5103147 Jul 10 '15 at 15:12
Ah yeah, weird. He still shouldn't be modifying the domain model for this. – Inspector Squirrel Jul 10 '15 at 15:15
I suppose you could add your own indexing to each checkbox but at that point you'd be overcomplicated, you are right. – Inspector Squirrel Jul 10 '15 at 15:25

i need to pass the values of multiple checkbox items to the controller from the view

2 Answers2