Generate link in JQuery using ASP.NET MVC Url.Action

Question

I'm generating the list of links like this:

$('#latestNews').append('<li><a href="<%= Url.Action("Details", "Article") %>/' + key + '">' + val + '</a></li>');

And on the Index page link looks like:

<a href="/En/Article/Details/6">Title</a>

But, on the /En/Article/Details/6 page - generated link looks like:

<a href="/En/Article/Details/6/6">Title</a>

I've tried $('#latestNews').append('<li><a href="<%= Url.Action("Details", "Article") %>?id=' + key + '">' + val + '</a></li>'); It works ok, but then caching does not work.

My controller code:

[OutputCache(Duration = Int32.MaxValue, VaryByParam = "id,language", SqlDependency = "database:Articles")] //Articles will be added rarely so i think it'll be nice to cache them
public ActionResult Details(string id, string language)
{..}

My route:

routes.MapRoute(
                "Default", 
                "{language}/{controller}/{action}/{id}",
                new { language = "En", controller = "Home", action = "Index", id = UrlParameter.Optional } 
            );

So how to generate Url in a better way?

UPDATED:

 $.post('<%= Url.Action("GetLatest", "News") %>', function (data) {               
                $.each(data, function (key, val) {
                    $('#latestNews').append('<li><%= Url.ActionLink(val, "Details", "Article", new { id = key }, null) %></li>');                    
                });
                $('#news').show();
            }, "json");

Lee Gunn · Accepted Answer · 2011-05-08 14:13:09Z

3

Your key & val variables are in JavaScript so that isn't going to work with the Url Helper. You could change your script to look something like this:

EDIT: fixed bug - changed {id = null} to { id = String.Empty }

 $.post('<%= Url.Action("GetLatest", "News") %>', function (data) {               
                $.each(data, function (key, val) {
                    $('#latestNews').append('<li><a href="<%= Url.Action("Details", "Article", new { id = String.Empty}) %>/' + key +'">' + val + '</a></li>');                    
                });
                $('#news').show();
            }, "json");

So, the MVC Url.Action() method is just giving you the first part of the url. Then jQuery will add key onto the end of the url and add val as the text for the anchor at runtime.

I think that's the easiest way of doing it without refactoring the code too much.

edited May 8, 2011 at 14:13

answered May 8, 2011 at 11:41

Lee Gunn

8,6944 gold badges42 silver badges35 bronze badges

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

3 Comments

1gn1ter Over a year ago

Sorry, but i'm doing it right now, it is the 2nd line of my question. The problem is when i am at the details page Url.Action gives /En/Article/Details/6 + /key = /En/Article/Details/6/6

Lee Gunn Over a year ago

I've edited the code above to pass in an {id = null} route value. Your issue is arising because Url.Action() will be using the current value of "id" on the details page.

1gn1ter Over a year ago

assigning null gives CS0828: Cannot assign <null> to anonymous type property. So i changed it to new {id = String.Empty}. Thank you!

Codo · Accepted Answer · 2011-05-08 08:27:48Z

0

The better way to generate the link is to pass the id directly to the Action method (and not to append it manually). Even better is to use the ActionLink instead of the Action method:

$('#latestNews').append('<li><%= Url.ActionLink(val, "Details", "Article", new { Id = key }, null) %></li>');

answered May 8, 2011 at 8:27

Codo

79.7k18 gold badges176 silver badges218 bronze badges

3 Comments

1gn1ter Over a year ago

it shows Compiler Error Message: CS0103: The name 'val' does not exist in the current context

Jakub Konecki Over a year ago

Replace val with the text of the link

1gn1ter Over a year ago

I'm getting key, val values from server, look please on my $.post request. I have to add these values dynamically. I've tried $('#latestNews').append('<li><%= Url.ActionLink(' + val + ', "Details", "Article", new { id = ' + key + ' }, null) %></li>'); and it shows Compiler Error Message: CS1012: Too many characters in character literal

Collectives™ on Stack Overflow

Generate link in JQuery using ASP.NET MVC Url.Action

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related