Dynamic Html.ActionLink in javascript?

Question

Is there any way to add Html.ActionLink through javascript?

For example, I have this Edit function in my controller:

public ViewResult Edit(int companyID) { .... } 

And I would like to do something similar in javascript:

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

A bit of a crude example, but this is basically what I would like to do. Is it possible?

Answer 1

id is a client script. You cannot mix server side script with client script. I'm 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 select the value of the input field using $("#hdnID").val() , and then try to assign it to some action link and send it to the server, whereas if you used a simple submit button, you don’t even would need javascript. Your code will be simple:

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

It is also clear that if you use a hidden field, because the user cannot change the value, so an even simpler solution would be to directly create the link you need:

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

Answer 2

I have not found a really good way. Usually I do 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 choose a value that id would never be in reality or otherwise would be in the link.

Answer 3

I found a convenient way out of this problem, thinking a little out of the box. The reason I use ActionLink really simplifies routing processing. Just put the controller and action name, and the helper generates the correct URL. To get around this in JavaScript, I first created an HtmlHelperExtender using UrlHelper to resolve the URL in the appropriate 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); } } } 

JavaScript is now easy enough to get the correct 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>'); } }); }); 

Answer 4

Here is how I did it. You can use javascript replacement.

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

Answer 5

Server code (C #) runs on the server, and the result is sent to the client, where the client runs JavaScript. Oddly enough, you have two different code environments that bump into each other, but don't interact very well with each other.

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; } 

It takes advantage of the fact that

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