Performing a delete in mvc-5 action through JQuery

Question

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

`@Url.Action("DeleteTraffic", "TrafficDate", new { id=id })` The action name comes first, and the parameter name is `id`, not `trafficId` — haim770, Jul 04 '16 at 14:06
Thanks, but that changed nothing. I don't think it properly converts the url string. after debugging and watching url, url is still '@Url.Action("DeleteTraffic", "TrafficDate", new { trafficId=id })' after that line has executed. should it be like that? id has ofc been replaced by a number at that point. — , Jul 04 '16 at 14:10
What is the actual value of `url` in your script? Also, show your routing table — haim770, Jul 04 '16 at 14:27
http://********/TrafficDate/TrafficDate/@Url.Action(%22DeleteTraffic%22,%20%22TrafficDa‌te%22) and how do I see my route table? I have not fiddled with the route config — , Jul 04 '16 at 14:29
You're calling `Url.Action()` in your `.js`. The server treats `*.js` files as static assets and won't interpret the `Url.Action` call. You need to define the url elsewhere. — haim770, Jul 04 '16 at 14:31
sorry that was the output in the console, not the actual value of url — , Jul 04 '16 at 14:31
See a solution from here: http://stackoverflow.com/a/13641191/1625737 — haim770, Jul 04 '16 at 14:32
Thank you! that solved it. I moved the url to be passed along with the id from the button click. now. how do I reload the page without actually leaving the page? when that post is deleted, I would like to refresh the page, is that possible? — , Jul 04 '16 at 14:39
Call `location.reload()` in the callback `function()` you're passing to `$.post(...)` — haim770, Jul 04 '16 at 14:40
Thank you! this solves my problem completely, thank you again! I will mark your answer as a solution even though we solved it here. it got me started. — , Jul 04 '16 at 14:43

score 0 · Accepted Answer · answered Jul 04 '16 at 14:14

0

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

answered Jul 04 '16 at 14:14

haim770

48,394
7
105
133

I named it params as I already use data there, dunno if that matters tho. but still, the controller action is not called when I press the button, it skips the post completely – Jul 04 '16 at 14:21
indeed I get a 404 not found – Jul 04 '16 at 14:24
Does the action decorated with `[HttpPost]`/`[HttpDelete]`,`[HttpGet]`? Is the controller part of an Area? – haim770 Jul 04 '16 at 14:25
the view is named TrafficDate, the controller is named TrafficDateController. do I have to change something in my routeconfig to get this to work? – Jul 04 '16 at 14:25
the action is not decorated with any attributes yet – Jul 04 '16 at 14:25
the link in the console looks like this: http://********/TrafficDate/TrafficDate/@Url.Action(%22DeleteTraffic%22,%20%22TrafficDate%22) – Jul 04 '16 at 14:28

Performing a delete in mvc-5 action through JQuery

1 Answers1