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.

Your checkboxes don't even have a name attribute so wont post back. You also creating invalid html with duplicate id attributes. Then you would need to make the parameter an array e.g. string[] selectedCheckboxes although property ProductID suggests its probably int anyway. Start by looking at the jquery ajax documentation to understand how to post using ajax. — user3559349
– user3559349, Commented Feb 11, 2015 at 3:08
You always use the FormCollection. stackoverflow.com/questions/21303236/… — Tim Southard
– Tim Southard, Commented Feb 11, 2015 at 3:52
@TimSouthard , is it applicaple with tables? and i need to be able to check mulitiple checkboxes as posibble. Thanks. :) — lynncasiano
– lynncasiano, Commented Feb 11, 2015 at 4:26
Do not use FormCollection. You should always bind to a model and let MVC take care of binding and validation for you. And is there a reason you need to use ajax to post rather than a standard form submit? — user3559349
– user3559349, Commented Feb 11, 2015 at 4:58

score 1 · Accepted Answer · 2015-02-11 06:41:16Z

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" />
}

edited Feb 11, 2015 at 6:41

answered Feb 11, 2015 at 5:58

user3559349

Sign up to request clarification or add additional context in comments.

2 Comments

lynncasiano Over a year ago

i tried your code but i am having an error on for loop : CS0019: Operator '<' cannot be applied to operands of type 'int' and 'method group'

user3559349 Over a year ago

Oops, didn't notice your property was IEnumerable. It needs to be IList<AssignProductsViewModel>. But if you can;t change it, then you can use a custom EditorTemplate (I'll update answer to add that option anyway)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related