CODEWITHSUNDEEP
c#asp.netjqueryasp.net-mvc
Steven
Steven

Reputation: 18859

Dynamic Html.ActionLink in javascript?

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

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

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

And I'd like to do something like this in javascript:

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

A bit of a crude example, but it's basically what I'd like to do. Is it at all possible?

Upvotes: 4

Views: 14284

Answers (5)

Nurhak Kaya
Nurhak Kaya

Reputation: 1781

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

Upvotes: 1

Matt Greer
Matt Greer

Reputation: 62027

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.

Upvotes: -2

patrick
patrick

Reputation: 21

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

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038720

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 }) %>

Upvotes: 3

Mikael Eliasson
Mikael Eliasson

Reputation: 5227

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.

Upvotes: 2

Related Questions