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

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.

Answer 2

You have to write down the path manually. That's because the C# is evaluated at compile time, and you are writing it to the document at runtime.

A better option is to separate HTML and Javascript completely. Put your HTML in a hidden div in your view, then copy its contents to wherever you want using javascript. This way you will still be able to use C# to create the action links.

Separating HTML from Javascript is also improves code readability, separates concerns better and expands syntax highlighting. In other words, it's a good practice.

Answer 3

Refactor it to make it clearer. Literally, the equivalent is:

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

First thing you can note in there is that you open it with \" and you close it with ".

I suggest you do the above exercise until the script is clear and the confusing syntax isn't at play.

Above said, in deleteUrl you are trying to use a client side value on the server. Remember <%: will be called during the server side render of the view, so an Id you set on the client side doesn't come into play at all in there.

An option is to use a place holder, like:

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

Answer 4

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 5

how about this:

var row = $("#Table").last().append('<tr><td><%:Html.ActionLink("Delete", "DeleteElementFromSet")%>"></td><td>' + Id + '</td></tr>');
row.find('a').attr(Id);

This will add the row, then find the link and add the id attribute.

In your code it looked like there was an extra 'a' tag that I removed.