Passing values to controller from ASP.NET MVC view

Question

I have a problem with sending checked checkboxes values to my controller, I checked them all but nothing happen. I can do that only one by one, and when I reload page it's been a saved, but I am not sure how to pass the values of multiple checked checkboxes back to the controller.

This is my cshtml.

<table class="table table-striped grid-table">
 <tr>
 <th>Samp</th>
 <th>Id of Book</th>
 <th>
 <input type="checkbox" id="box" name="checkAll" />
 </th>
 </tr>
 @foreach (var item in (IEnumerable<cit.Models.getCheIdTip_Result>)Model)
 {
 <tr>
 <td>@item.idtip</td>
 <td>@item.tipname</td>
 <td>
 <div class="pure-checkbox">
 <input type="checkbox" idtip="@item.idtip" class="checktip" checked="@(item.idemployee == ViewBag.idemployee ? true : false)" name="@item.id.ToString()" id="@item.id.ToString()" />
 <label for="@item.id.ToString()"></label>
 </div>
 </td>
 </tr>
 }
</table>
<input type="hidden" value="@ViewData["idemployee"]" name="idemployee" id="idemployee" class="idemployee" /> 

This is my controller

public JsonResult CheckUsers(int idemployee, int idtip, bool che)
{
 try
 {
 if (che)
 {
 checkusers cheuser = new checkusers();
 cheuser.idemployee = idemployee;
 cheuser.idtip = idtip;
 Database.checkusers.Add(cheuser);
 Database.SaveChanges();
 }
 else if (!che)
 {
 var cheuserdelete = Database.checkusers.Where(a => a.idemployee == idemployee && a.idtip == idtip).FirstOrDefault();
 Database.checkusers.Remove(cheuserdelete);
 Database.SaveChanges();
 }
 if (Request.IsAjaxRequest())
 {
 return Json(true, JsonRequestBehavior.AllowGet);
 }
 else
 {
 return Json(true, JsonRequestBehavior.AllowGet);
 }
 }
 catch (Exception ex)
 {
 Logger.Error("Error: {0}", ex.ToString());
 return null;
 }
}

And this is my jquery with post method.

$('#box').click(function () {
 $('.checktip').prop('checked', true);
 var idemployee = $('.idemployee').val();
 var idtip = $(this).attr('idtip');
 var che = $(this).prop('checked');
 $.ajax({
 url: UrlSettingsDocument.EmpTipes,
 data: { idemployee: idemployee, idtip: idtip, che: che },
 type: "POST",
 success: function (result) {
 if (result.result == "Redirect") {
 window.location = result.url;
 }
 }
 });
 });

Answer 1

Your jQuery code has a click handler for checkbox with id 'box'. 'box' is the header row element in your table as per the html. The event handler is sending only one checkbox value to the server. This means the code is written to send the checked event on the header row checkbox only.

If you want to send multiple checkbox values in one go, you need a submit button with a click handler which iterates through all rows of the table, collects idtip and checkbox values and creates a collection to send to the server. The server side controller also needs to take the collection as a parameter and iterate through it to process the inputs one by one.

• prime11: Please can you write a sample of code, I am really stucked here.
• samiksc: The answer below has the sample code which can be used. Essentially, the steps are - create a submit button, assign a css class to each checkbox item, use the class to iterate over all checkboxes in jQuery code on UI side itself.
• prime11: That's ok but in my code I already have defined checkboxes, in my database i have table getcheidtip in that table idtip is list of all values which i need to check when specific employee check them all, using model in cshtml I only show one input checkbox and when I jump in app it showed me all off the idtip list.

Answer 2

If you have multiple checkboxes then you will have to access them with class name unless they have different ids. you would want to loop through all the checkboxes and get their values by indexes

HTML for 3 checkboxes and Button

<div class="row">
 Bike <input type="checkbox" class="chkbox" value="Bike" />
 Car <input type="checkbox" class="chkbox" value="Car" />
 Boat <input type="checkbox" class="chkbox" value="Boat" />
</div> 
<div class="row">
 <input type="button" id="btnSubmitCB" value="Submit" />
</div>

JQuery

$(document).ready(function () { 
 $('#btnSubmitCB').click(function () {
 $('input[type=checkbox]').each(function () {
 if (this.checked) {
 var ckbIndex = $('.chkbox').index(this);
 var cbValue = $('.chkbox').eq(ckbIndex).val();
 console.log(cbValue);
 }
 }); 
 });
 });

• prime11: I already have defined cshtml with checkboxes, for every employe there is a list of checkboxes, and only admin can check them all, this your code not working for me, i try It but nothing happen.