The JavaScript variable contains the identifier that I need to use in Html.ActionLink

Question

I have a JavaScript variable in my jQuery code that contains an identifier that I need to use in my Html.ActionLink , but it does not work:

 @(Html.ActionLink("Genomför", "AnswerForm", "AnswerNKI", new {id = goalcard.Id},null)) 

I get: 'cannot resolve the' goalcard 'character', and the reason is that goalcard is a JavaScript variable.

It looks like this:

 $.post('@Url.Action("Search", "SearchNKI")', data, function (result) { $("#GoalcardSearchResult tbody").empty(); result.forEach(function(goalcard) { $("#GoalcardSearchResult tbody").append( $('<tr/>', { // steg Create a row for each result html: "<td>" + goalcard.Name + "</td><td>" + goalcard.Customer + "</td><td>" + goalcard.PlannedDate + "</td><td>" + goalcard.CompletedDate + "</td><td>" + '@(Html.ActionLink("Genomför", "AnswerForm", "AnswerNKI", new {id = goalcard.Id},null))' + "</td>" })); }); }); 

I tested so far, and I almost found a solution, and it looks like this:

 @(Html.ActionLink("Genomför", "AnswerForm", "AnswerNKI",null, new {id = "mylink"})) 

then I made a new function:

 $('#mylink').click(function (goalcard) { var id = goalcard.Id; this.href = this.href + '/' + id; }); 

This should work, but what happens is that I have to use this click function inside the forEach loop to be able to achieve a variable target. and if I put it inside forEach , this Click function will execute many times depending on how much it has.

Thus, the result will be /AnswerNKI/AnswerForm/1/2 if there are two uppercase letters. or maybe /AnswerNKI/AnswerForm/1/2/3/4/5 if there are five shields.

But it should be /AnswerNKI/AnswerForm/1

it basically develops.

Another problem is that all other lines have /AnswerNKI/AnswerForm/ , so only the first line basically gets the identifier.

I do not know how to find a solution to fix it.

Any help is greatly appreciated.

Thanks in advance

Answer 1

This is not a solution to the specific problem you are facing. But it looks like you are using jquery to refresh part of your page.

If so, have you considered using a callback that returns the html generated by PartialView and just does the replacement in the javascript callback? This is a sample that I use a lot. It allows you to use the MVC engine, components and design tools.

Here is an example of what I am doing:

 $("form.unscoped_filter").live("submit", function () { $.ajax({ url: this.action, type: this.method, data: $(this).serialize(), error: function (a, b) { debugger; }, success: function (result) { $("div#targetID").html(result); bindExtenders(); } }); return false; }); 

This specific example intercepts a postback from a specific form class and passes it to the website where it is processed by my MVC application. The target method and controller are installed in accordance with the usual MVC design approaches in the BeginForm block. The target method processes the data and returns a PartialView, which translates this data into html, which, in turn, is sent to the success callback in the jquery block. There, it was used to replace html in the target div. Although the game has more details (e.g. javascript, MVC method, PartialView), separating things in this way allows each part to reproduce its unique strengths: jquery is great at manipulating the DOM, MVC methods are great for manipulating / processing html and PartialView requests - great tool for creating and generating html.

This is a fairly flexible and powerful approach as soon as you hang it. In particular, you can pass parameters to a jquery block from ActionLink using html5 methods. For example, you can add "data-someParamName = ..." to the html attributes of the ActionLink call, and then extract the parameter value in the javascript block by doing something like:

 var pagerCode = $(this).attr("data-someParamName"); 

In fact, this is how I control which particular div is updated in the success callback function.

Again, this does not answer your specific question, as it offers another way to solve what I think you are trying to do. Good luck