MVC ActionLink with parameter for javascript function

Question

I have a button in dropdown menu like this:

<li><button class="btn btn-white btn-sm delete-group fa fa-trash" dataid="@item.InterimReviewId">Delete</button></li>

that calls javascript functions like this:

        $('.delete-group').click(function () {
            var url = "/Fiscalizations/Delete";
            var id = $(this).attr('dataid');
            $.get(url + '/' + id, function (data) {
                $('#editor-content-container').html(data);
                $('#editor-container').modal('show');
            });
        });

that calls modal window:

<div class="modal fade" id="editor-container" tabindex="-1"
     role="dialog" aria-labelledby="editor-title">
    <div class="modal-dialog modal-md" role="document">
        <div class="modal-content animated flipInY" id="editor-content-container"></div>
    </div>
</div>

and all works as I expected. My goal is to swap button with ActionLink and here my problems start.

I wrote something like this:

<li>@Html.ActionLink("Delete Interim Review", "Delete", "InterimReviews", new { dataid = item.InterimReviewId }, new { @class = "delete-group" })</li>

which correctly calls the function but instead of a modal window it calls bad HTTP request with address /InterimReviews/Delete?dataid=1

I will be grateful for any hints how to solve the problem

Edit: I solved the problem with bad request ( different parameter names in contoller and Actionlink). So now the only one problem is that with ActionLink javascript fuction doesn't fire modal window

Answer 1

Clicking on the anchor tag will usually do a normal GET request to the url. So you need to prevent that default behavior. You can use the jquery preventDefault method to do so. Another option is return false at the end of your method.

Assuming, the Delete action method has a parameter named dataid, You may use the Html.ActionLink method and it will generate the correct relative url to the action method with the correct route values (querystring) (Ex:\InterimReviews\Delete?dataid=101). If your parameter name is different, update your razor code to use that(the fourth param in the overload you are using) So all you have to do is, read the clicked anchor tag's url and use that for your call. No need to do any string concatenation yourself to add the id to the url!

$(function () {

    $('a.delete-group').click(function (e) {
        e.preventDefault();

        var url = $(this).attr("href");
        $.get(url, function (data) {
            $('#editor-content-container').html(data);
            $('#editor-container').modal('show');
        });
    });

});

I also strongly recommend you to change your delete action to be a HttpPost type action. Any action method which updates/deletes data should be POST type. If you are showing a confirm dialog, GET is fine. But for the actual delete, use HttpPost type action method and use $.post call from client side.