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

Question

I have a script that adds some rows to a table. One of the lines has a delete link, and for this I use ActionLink, however, the identifier of the element is obtained through js and this does not work:

$("#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 the drop-down list.

Is there any way to use ActionLink? or do I need to write the path manually?

Answer 1

Since the identifier is known only on the client side, you will need to create the correct URL. That being said, it never mixes C # and javascript. Here's how you can proceed:

Start by declaring a global variable that will contain 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) ) ); 

Note that you should use Url.Action instead of Html.ActionLink , because you already have an anchor created manually.

Note: Avoid using GET verbs for deletion. You may have unpleasant surprises. Use the correct verb (or at least POST) when changing state on the server, such as deleting.

Answer 2

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

Answer 3

You must write the path manually. This is because C # is evaluated at compile time, and you write it to the document at runtime.

The best option is to completely separate HTML and Javascript. Put your HTML in a hidden div in your view, and then copy its contents to where you want to use javascript. That way, you can still use C # to create action links.

Separating HTML with Javascript also improves code readability, improves issues, and extends syntax highlighting. In other words, this is a good practice.

Answer 4

Restore it to make it clearer. Literally equivalent:

 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 of all, you may notice that you open it with \" and close it with " .

I suggest you complete the exercise above until the script is clear and the confusing syntax is reproduced.

It is said above that in deleteUrl you are trying to use the client-side value on the server . Remember <%: it will be called during server-side side rendering, so the identifier you set on the client side is not included in the game at all.

The option is to use the owner of the place, for example :

 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 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 a line, then find the link and add the id attribute.

In your code, it looked like an extra tag called 'a', which I removed.