How to use checkboxes for batch operation?

Question

Say I have a view like this:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#assign">
    Assign
</button>
<table class="table table-hover table-bordered table-sm">
    <thead class="thead-light">
        <tr>
            <th></th>
            <th>Name</th>
        </tr>
    </thead>
    @foreach (var employee in ViewBag.employees)
    {
        <tr>
            <td><input type="checkbox" name="@employee.Id" /></td>
            <td>@employee.Name</td>
        </tr>
    }
</table>
<!-- Modal -->
<div class="modal fade" id="assign" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Assign employee to group</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- a dropdown of groups -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary">Assign</button>
            </div>
        </div>
    </div>
</div>

And I have a controller to call:

public ActionResult Assign(List<int> employeeIds, int groupId)

How can I get the list of Ids that are checked and the groupId from the dropdown in modal, so that I can call the controller?

For example if the data look like this

0. Alice
1. Bob
2. Charlie
3. Dan

And I checked Bob and Charlie and want to assign them to group 1, so the employeeIds will be 1 and 2, and groupId will be 1.

You checkbox does not have a`name` attribute so it does not post back a value. Change it to ``. But I suggest you look at [Pass List of Checkboxes into View and Pull out IEnumerable](https://stackoverflow.com/questions/29542107/pass-list-of-checkboxes-into-view-and-pull-out-ienumerable/29554416#29554416) to do this correctly — , Sep 12 '18 at 21:58

Win · Answer 1 · 2018-09-12T22:30:02.737

You need to use for loop instead of foreach. Besides, I suggest to use ViewModel instead of ViewBag.

@using (Html.BeginForm("Index", "Home", FormMethod.Post, null))
{
    for (int i = 0; i < Model.Employees.Count; i++)
    {
        <tr>
            <td>@Html.CheckBoxFor(x => Model.Employees[i].Checked)</td>
            <td>@Model.Employees[i].Name</td>
        </tr>
    }
    <input type="submit" value="Submit" />
}

Model

You want to rename ViewModel something meaningful.

public class ViewModel
{
    public List<Employee> Employees { get; set; }
    public int GroupId { get; set; }
}

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public bool Checked { get; set; }
}

Controller

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewModel vm = new ViewModel
        {
            Employees = new List<Employee>
            {
                new Employee {Id=1, Name = "John", Checked = true},
                new Employee {Id=2, Name = "Eric", Checked = false}
            }
        };
        return View(vm);
    }

    [HttpPost]
    public ActionResult Index(ViewModel vm)
    {
        return View(vm);
    }
}

Here is another way.

Well, I need to get the groupId from the dropdown as well. The goal is to assign employees to groups. — Jay Tang, Sep 12 '18 at 22:29
it does not help. I know how to get checked items. What I am asking is how to get the list of checked items in the page and the group from modal together so I can call the controller `Assign(List employeeIds, int groupId)` — Jay Tang, Sep 12 '18 at 22:35

How to use checkboxes for batch operation?

1 Answers1

Model

Controller