jQuery append with html.ActionLink

Question

I'm trying to append a Html.ActionLink with jQuery like this

a.append("<li>@Html.ActionLink("e-TCGB","Inbox","Folder",new { Type = "1",DocumentTypeId = "3" },null)+"</li>");

and it is giving errors.

Being very inexperienced in javascript and jQuery I don't know if the error is because of wrong string parameter or because of doing something very wrong.

My guess is I'm making an escape character mistake but as I said, I don't know if what I'm doing is possible too.

Answer 1

@Html.ActionLink is a helper method in MVC designed to be used in the Razor views. It is executed on the server and processed as the Razor view is rendered to HTML.

jQuery is a JavaScript library that is used on the browser so execution here happens after the HTML has been received by the browser.

To recap, it is not possible to execute c# code (ActionLink) on the browser because it is a .net based server side method.

Answer 2

'Razor is compiled at runtime - meaning its already done doing it's thing before your jQuery code is executed.

You can simply use a hyperlink though:

var li = $('<li>');
var link = $('<a href="/folder/inbox/?type=1?documenttypeid=3">e-TCGB</div>');
li.append(link);
a.append(li);

UPDATE:

Above, you can see two examples of generating elements using jQuery. The first is shorthand for generating a new <li> element:

$('<li>');

The second is generating a hyperlink tag. If you want to add attribute information you can do so in a number of different ways however I prefer to just write the tag out in long form when generating the element:

$('<a href="/folder/inbox/?type=1?documenttypeid=3">e-TCGB</div>');