JavaScript variable carry an ID that I need to use

Question

I have a JavaScript variable in my jQuery code that contains an ID that I need to use in my Html.ActionLink but it's not working:

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

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

This is what it looks like:

$.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 have been testing for while now 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 reach to goalcard variable. and If I put it inside the forEach, this Click function will get executed many times depending on how many goalcard there are.

So the result would be /AnswerNKI/AnswerForm/1/2 if there are two goalcards. or maybe /AnswerNKI/AnswerForm/1/2/3/4/5 if there are five goalcards.

But it should be /AnswerNKI/AnswerForm/1

it basically adds up.

Another problem is that all other rows have /AnswerNKI/AnswerForm/ so only the first row basically gets an id.

I have no idea how to find a solution to fix that.

Any kind of help is very appreciated.

Thanks in advance

Answer 1

This isn't a solution to the specific problem you're having. But it looks like you're using jquery to update part of your page.

If so, have you considered using a callback which returns html generated by a PartialView, and just doing a replace within the javascript callback? That's a pattern I use a lot. It allows you to use the MVC engine, components and design tools.

Here's an example of something I do:

$("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 particular example intercepts a postback from a particular class of forms and passes it on to the website where it's processed by my MVC app. The target method and controller are set, per usual MVC design approaches, in a BeginForm block. The target method processes data and returns a PartialView which translates that data into html, which in turn is sent to the success callback in the jquery block. There it's used to replace the html within the target div. While there are more parts in play (e.g., the javascript, the MVC method, the PartialView), separating things this way lets each part play to its unique strengths: jquery is wonderful at manipulating the DOM, MVC methods are great at manipulating/processing requests for html, and PartialViews are a great tool for laying out and generating html.

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

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

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

Again, this doesn't answer your specific question so much as suggest a different way of tackling what I think you're trying to do. Good luck!