Posting selected checkboxes to controller action with viewModel

Question

With an existing MVC based application, There is a Product view which has ViewModel as ProductViewModel, This ViewModel has all basic properties which Product can have like Product Name, Type, Price, etc....

With this Product Creation process on this view, Objective is to associate list of customers with Product (which is not mendatory).

To retrieve Customer list for the user to select those associated customers, Currently on a button click, there is ajax call (getCustomers) which requests controller action to get list & show it within a table along with checkbox, this html created on the fly in jQuery Ajax call,

With current implementation, Selected Ids are not getting populated in view model while making POST action of the Product View.

Objective is to get selected Customer Ids, along with Product details into ViewModel.

Is there any way to do so?

@JeevanJose, Which part of the question is unclear? I mean, as reproducing this with code would involves many part of the codes to be posted here if problem is not clear, rather It would be really appreciated if you suggest on the design to solve the issue. — Jay
What I am talking about is the code where you have the checkboxes. Only by looking at it can we tell what is going wrong. If you don't know how to do this at all then I can make up some code and tell you. — reggaemahn
With an ajax call for customer list & below success method (jQuery) , function getCustomersResponse(){ // html on the fly $('div#customersArea').prepend('<table id="customers"><thead class="TableHeader"></thead><tbody></tbody></table>'); <br/> $.each(data, function (index, tdData) { <br/> $('#customers tbody').prepend('<tr><td><input id=CustomerId' + tdData.Id + ' type=checkbox value="' + tdData.Id + '" name="CustomerIds"/></td><td>' + tdData.Name + '</td><td>' + tdData.Type + '</td><td>' + tdData.ActiveFrom + '</td><td>' + tdData.TermsAndCondition + '</td></tr>'); } } — Jay
@JeevanJose, Above code (with poor formatting) shows jquery function for successful ajax response of list of customers & it is getting created on view, in which i have removed Un-necessory code with it. — Jay

reggaemahn reggaemahn · Accepted Answer · 2013-07-01T12:47:58

I'll try to answer it the best way I understand. So, assuming you have created the 'table' with the checkboxes in them which I suppose looks something like this:

<form>
<table>
  <tr><td><input type='checkbox' value='1' name='myCheckbox' />Some text</td></tr>
  <tr><td><input type='checkbox' value='2' name='myCheckbox' />Some text</td></tr>
  <tr><td><input type='checkbox' value='3' name='myCheckbox' />Some text</td></tr>
  <tr><td><input type='checkbox' value='4' name='myCheckbox' />Some text</td></tr>
</table>
<input type="submit" />
</form>

Inside your ProductModel Class:

public class ProductModel
{
   // Define the property here.
   public int[] MyCheckbox { get; set; }

   // The constructor where you do the initialization
   public void ProductModel(int[] myCheckbox)
   {
      MyCheckbox = myCheckbox;
   }
}

In your controller method:

[HttpPost]
public ActionResult SomeMethod(ProductModel productModel)
{
    foreach(int value in productModel.MyCheckbox)
    {
        // Your code here..
    }
}

You'll get the value of checkboxes as an array in your controller method.

Posting selected checkboxes to controller action with viewModel

1 Answers