How can I make checkbox mvc asp.net initiate an action?

Question

I would like to update the database when someone checked a field representing a bit of a field in a row. I walked away from this question: Ajax.ActionLink (...) with a checkmark Here is my code in the cshtml file:

@foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.Macro_Name) </td> <td> @Html.CheckBoxFor(modelItem => item.Claimed, new { id = item.Macro_Name, data_url = Url.Action("ToggleClaim", "MacroStatus")}) </td> <td> @Html.DisplayFor(modelItem => item.Date_Claimed) </td> <td> @Html.DisplayFor(modelItem => item.Username) </td> <td> @Html.DisplayFor(modelItem => item.Finished) </td> <td> @Html.DisplayFor(modelItem => item.Date_Completed) </td> <td> @Html.ActionLink("Edit", "Edit", new { id=item.Macro_Name }) | @Html.ActionLink("Details", "Details", new { id = item.Macro_Name }) | @Html.ActionLink("Delete", "Delete", new { id = item.Macro_Name }) </td> </tr> } 

The following action is performed in the MacroStatusController class:

  public ActionResult ToggleClaim(string id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } MacroStatus macroStatus = db.MacroStatus1.Find(id); if (macroStatus == null) { return HttpNotFound(); } if (ModelState.IsValid) { macroStatus.Date_Claimed = DateTime.Now; db.Entry(macroStatus).State = EntityState.Modified; db.SaveChanges(); } return new HttpStatusCodeResult(HttpStatusCode.OK); } 

However, ToggleClaim does not start when I check or clear the check box. There are no compilation errors. This is my first attempt with asp.net mvc, what am I doing wrong?

Answer 1

You will need ajax for this. First, add the class to the checkboxes so that you have a hook to attach your click event.

@Html.CheckBoxFor(modelItem => item.Claimed, new { id = item.Macro_Name, @class = "toggle" data_url = Url.Action("ToggleClaim", "MacroStatus")})

Now add your javascript.

 @section scripts { <script> $(function() { $('.toggle').change(function() { var self = $(this); var url = self.data('url'); var id = self.attr('id'); var value = self.prop('checked'); $.ajax({ url: url, data: { id: id }, type: 'POST', success: function(response) { alert(response); } }); }); }); </script> } 

Answer 2

The key point is to send an ajax request when the checkbox is changed.

As stated in Eric's comments, you can initiate this action in various ways. for example, put this script in your codes:

 <script> $(function () { $('#Claimed').change(function () { $.ajax({ url: '/ToggleClaim/MacroStatus/@item.Macro_Name', cache: false, method: 'GET', success: function (data) { alert('success'); }, error: function () { alert('error'); } }); }); }); </script> 

And correctly set the checkbox code as follows:

 <td> @Html.CheckBoxFor(modelItem => item.Claimed) </td> 

The above code triggers an action every time you check or uncheck a checkbox, you can just check if this checkbox is checked, and then send an ajax request.

Answer 3

The reason is that if the checkbox is unchecked and the form is submitted; the form field associated with the submitted flag. You must either use JavaScript to add the hidden variable, as described in Post flagged checkboxes , or make Ajax mark when the checkbox is selected . JQuery Ajax checkbox state