How to get checkbox selected value and pass to controller in asp.net mvc 4

Question

I am trying to get the selected checkboxes value

this are my models,

public class VehicleViewModel : Vehicle
{
    [Display(Name = "Vehicle Type")]
    [Required( ErrorMessage = "{0} is required.")]
    public string VehicleTypeName { get; set; }

    [Display(Name = "Location")]
    [Required(ErrorMessage = "{0} is required.")]
    public string LocationName { get; set; }

    public IEnumerable<AssignProductsViewModel> AssignedProducts { get; set; }
}

public class AssignProductsViewModel
{
    public long ProductID { get; set; }
    public string ProductName { get; set; }
}

here's my razor view

@foreach (var item in Model.AssignedProducts)
{
  <tr>
    <td>
      <input type="checkbox" value ="@item.ProductID"/>
    </td>
    <td>
      @Html.DisplayFor(model => item.ProductName)
    </td>
  </tr>
}

and here's my controller

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult NewVehicle(VehicleViewModel vehicleViewModel, string selected)
{
  //Do something with the string here
  return View();
}

I know I need to pass the selected check boxes value to a string using javascript and pass the string to a controller. But i have no idea how to do it since I'm a newbie in javascript and MVC.

Answer 1

Based on the comments that an ajax post is not required, your AssignProductsViewModel requires an additional property to bind the checkboxes

public class AssignProductsViewModel
{
  public long ProductID { get; set; }
  public string ProductName { get; set; }
  public bool IsSelected { get; set; } // add this
}

In the view, use a for loop or a custom EditorTemplate to render the collection do the controls are correctly named with indexers. A foreach loop generates duplicate id (invalid html) and name attributes (cannot be bound to a collection)

@model VehicleViewModel
@using(Html.BeginForm())
{
  // controls for VehicleTypeName, LocationName
  for(int i = 0; i < Model.AssignedProducts.Count; i++)
  {
    @Html.HiddenFor(m => m.AssignedProducts[i].ProductID) // ditto for ProductName if you want it on postback
    @Html.CheckBoxFor(m => m.AssignedProducts[i].IsSelected)
    @Html.LabelFor(m => m.AssignedProducts[i].IsSelected, Model.AssignedProducts[i].ProductName)
  }
  ....
}

and post back to

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult NewVehicle(VehicleViewModel model)
{
  // model.AssignedProducts contains the collection with a value indicating if the product has been selected
}

Alternatively, you can use an EditorTemplate for type of AssignProductsViewModel to render the collection

In /Views/Shared/EditorTemplates/AssignProductsViewModel.cshtml

@model AssignProductsViewModel
@Html.HiddenFor(m => m.ProductID) // ditto for ProductName if you want it on postback
@Html.CheckBoxFor(m => m.IsSelected)
@Html.LabelFor(m => m..IsSelected, Model.ProductName)

and in the main view

@model VehicleViewModel
@using(Html.BeginForm())
{
  // controls for VehicleTypeName, LocationName
  @Html.EditorFor(m => m.AssignedProducts)
  <input type="submit" />
}