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?

Darin Dimitrov · Accepted Answer · 2010-09-24 18:54:19Z

9

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.

edited Sep 24, 2010 at 18:54

answered Sep 24, 2010 at 18:40

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eglasius Over a year ago

+1 for Url.Action and making it a fixed url / that's modified when needed.

John Hartsock · Accepted Answer · 2010-09-24 18:30:49Z

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.

answered Sep 24, 2010 at 18:30

John Hartsock

87.1k23 gold badges135 silver badges146 bronze badges

3 Comments

Darin Dimitrov Over a year ago

He doesn't have the Id. How do you pass a javascript variable to an HTML helper?

John Hartsock Over a year ago

Maybe I wasnt Clear, but he has the ID in javascript and he needs a function simular to the ActionLink Helper in .NET. Basically I am saying create a Javascript function that mimics the ActionLink Helper In .NET

hunter Over a year ago

might not be the way to go since the routes might change

Jader Dias · Accepted Answer · 2010-09-24 18:36:48Z

0

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.

edited Sep 24, 2010 at 18:36

answered Sep 24, 2010 at 18:31

Jader Dias

91.1k160 gold badges436 silver badges635 bronze badges

Comments

Josiah Ruddell · Accepted Answer · 2010-09-24 18:41:39Z

0

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.

answered Sep 24, 2010 at 18:41

Josiah Ruddell

29.9k8 gold badges68 silver badges68 bronze badges

3 Comments

eglasius Over a year ago

that's not what the OP's code is trying to do / id is a parameter to the action.

Josiah Ruddell Over a year ago

Right, I realize that now. He must have meant Action, not an ActionLink html helper (which renders an anchor). ActionLink has a HtmlAttributes overload - which is what i thought he was going for.

Josiah Ruddell Over a year ago

Also, in your post you are making the same mistake. ActionLink is not a URL. It is a HTML Anchor tag. Use Url.Action.

eglasius · Accepted Answer · 2010-09-24 18:50:05Z

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>');

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

3 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related