How to write action links using javascript in ASP.NET MVC?

Question

I have a script that appends some rows to a table. One of the rows has a delete link, and for that I am using a ActionLink, however the id of the element is received via js, and this is nor working:

 $("#Table").last().append('<tr><td><a href=\"<%:Html.ActionLink("Delete", "DeleteElementFromSet", new {id=%>Id<%})%>">Delete</a></td><td>'+Id+'</td></tr>');

where Id is a javascript variable that gets its value from the value of a dropdownlist.

Is there a way to use ActionLink like this? or do I have to write down the path manually?

Answer 1

Because the id is known only at the client side you will need to construct the proper url. This being said never mix C# and javascript. Here's how you might proceed:

Start by declaring a global variable that will hold the delete link without the id part:

<script type="text/javascript">
    var deleteUrl = '<%: Url.Action("DeleteElementFromSet") %>';
</script>

and then in a separate javascript file:

$('#Table').last().append(
    $(document.createElement('tr'))
        .append($(document.createElement('td'))
            .append($(document.createElement('a'))
                .attr('href', deleteUrl + '/' + Id)
                .text('Delete')
            )
        )
        .append($(document.createElement('td'))
            .text(Id)
        )
);

Notice that you should use Url.Action instead of Html.ActionLink because you already have the anchor manually generated.

Remark: avoid using GET verbs for deleting. You might have bad surprises. Use proper verb (or at least POST) when modifying state on the server such as deleting.

Answer 2

Just like you have an action link helper in MVC. Create a helper in JavaScript where you provide an action, controller, and id to create a link.