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

Why do you want to use `ActionLink()` instead of your button? And what is your controller method? — , Dec 20 '17 at 11:43
I just wanna check another way...problem solved in the following posts — ahkmenraha, Dec 20 '17 at 13:51
Just style the button to look like a link it that's what you want (don't confuse behavior with appearance) — , Dec 20 '17 at 20:47

score 0 · Answer 1 · answered Dec 20 '17 at 12:02

When you use an ActionLink, you will be creating this:

<a href="Delete/InterimReviews" class="delete-group" data-id="">Delete Interim Review</a>

So, when you click on that link, the browser is going to navigate to Delete/InterimReviews. What you need to do is to prevent the browser from treating the <a> as a link (preventDefault()) which you can do like this:

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

as an aside, using dataid is not valid as an html attribute - you should use something like data-id which can be created using data_id in razor and which can be read using $.data('id').

Shyju · Accepted Answer · 2017-12-20T12:08:56.187

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.

MVC ActionLink with parameter for javascript function

2 Answers2