Dynamic Html.ActionLink in javascript?

The id is a client script. You cannot mix server side script with client script. I am afraid that you are trying to submit HTML forms with action links instead of using submit buttons which is very bad. I see that you fetch the value of an input field with $("#hdnID").val() and then try to assign it to some action link and send to the server whereas if you used a simple submit button you wouldn't even need javascript. Your code would simply be:

<% using (Html.BeginForm("Edit", "Home")) { %>
    <%: Html.HiddenFor(x => x.HdnId) %>
    <input type="submit" value="Edit" />
<% } %>

Also it is clear that if you are using a hidden field it's because the user cannot change the value so an even simpler solution would be to directly generate the link you need:

<%: Html.ActionLink("Edit", "Edit", new { id = Model.SomeId }) %>

I haven't found a really good way yet. What I usually do is something like this:

var id = $("#hdnID").val();
var link = '<%: Html.ActionLink("Edit", "Edit", new { id = -999 }) %>';
$("#editLink").html(link.replace('-999', id)); 

The key is to select a value that id would never have in reality or exist otherwise in the link.

I found a handy way out of this problem thinking slighly out of the box. The reason I use ActionLink is really for an easy way to handle the routing. Simply supply Controller and action name and the helper generates the correct url. To get around this in JavaScript I first created an HtmlHelperExtender using the UrlHelper to resolve the url in proper context.

namespace System.Web.Mvc.Html
{
   public static class HtmlHelperExtensions
   {
      public static string ResolveUrl(this HtmlHelper html, string url)
      {
         var urlHelper = new UrlHelper(html.ViewContext.RequestContext);
         return urlHelper.Content(url);
      }
   }
}

Now in JavaScript it's easy enough to get the proper Url

  $(document).ready(function () {
     var action = '<%= Html.ResolveUrl("~/Controller/JsonAction") %>';
     // JSON controller call for model data
     $.getJSON(action, null, function (models) {
        // Do something with models
        action = '<%= Html.ResolveUrl("~/Controller/Details/") %>';
        for (var i = 0; i < models.length; i++) {
           $('#modelList').append(
              '<tr><td><a href=\"' + action + models[i].Id + '\">' + models[i].Title + '</a></td></tr>');
        }
     });
  });

This is how I did it. You can use javascript replace.

var ul = document.createElement('ul');

if (data.EvidenceList != null) {

for (var i = 0; i < data.EvidenceList.length; i++) {
              var li = document.createElement("li");
              var evidenceId = data.EvidenceList[i].EvidenceId;
              var evidenceName = data.EvidenceList[i].Name;
              var candidateProgrammeComponentId = data.CandidateProgrammeComponentId;

              var str1 = '@Html.ActionLink("dummyEvidenceText", "DownloadFile", new { candidateProgrammeComponentId = "dummyCandidateProgrammeComponentId", evidenceId = "dummyEvidenceId", evidenceName = "dummyEvidenceName" })';
              var str2 = str1.replace('dummyEvidenceName', evidenceName);
              var str3 = str2.replace('dummyCandidateProgrammeComponentId', candidateProgrammeComponentId);
              var str4 = str3.replace('dummyEvidenceId', evidenceId);
              var str5 = str4.replace('dummyEvidenceText', evidenceName);

              li.innerHTML = li.innerHTML +str5 ;
              ul.appendChild(li);
          }
}

var element = document.getElementById('evidenceList_' + data.guidId);
$('#evidenceList_' + data.guidId).empty();
document.getElementById('fileUploadFreeStructure_' + data.guidId).value = '';
$('#freeTextArea_' + data.guidId).val('');
element.appendChild(ul);

The server side code (the C#) is ran on the server, and the result is sent to the client, where the client then executes the JavaScript. So as weird as it is, you have two different code environments bumping into each other but can't interact with each other very well.

I usually do something like this, although I'm open to better ways:

function SetUrl(id) {
 var url = '<%: Html.ActionLink("Bar", "Foo") %>' + '?id=' + id;

 return url;
}    

This takes advantage of the fact that

/Foo/Bar/{id} is usually equivalent to /Foo/Bar?id={id}, depending on how your routes are set up.