inifus inifus - 5 months ago 8
jQuery Question

Performing a delete in mvc-5 action through JQuery

I have a website I'm working on, where the user can add or delete booked traffics for a tram network. I've come this far with the delete button.

<input type="button" value="Delete" class="deleteTraffic btn btn-link NoBorder NoBackGround" data-id="@traffic.Id" />


jQuery(document).ready(function() {
jQuery('.deleteTraffic').click(function() {
var id = $(this).data('id');
var url = '@Url.Action("DeleteTraffic", "TrafficDate", new { trafficId=id })';
url = url.replace("id", id);
$.post(url, function (data) {
if (data) {
$('#pnlEditTraffics').hide().fadeIn('fast');
} else {
alert("Error.");
}
});
});
});


public ActionResult DeleteTraffic(int id)
{
return Json(TrafficData.DeleteTraffic(id));
}


the button works fine and the parameter comes through fine, but the Action in the controller is never reached. the controller is named TrafficDateController

Answer

The first problem is the order in which you're passing arguments to Url.Action(), the action name is the first parameter while the second is the controller name:

@Url.Action("DeleteTraffic", "TrafficDate")

Also, since the DeleteTraffic action is meant to be invoked using POST verb, you better pass the id as part of the request body hence avoiding the need to manually construct the final path using url.replace('id', id):

var url = '@Url.Action("DeleteTraffic", "TrafficDate")',
    data = { id: id };

$.post(url, data, function (data) {
     // ...
});

See MSDN