Building HTML and appending using jQuery

Question

I'm stuck with a scenario such as the following:

$(document).ready(function () {
        var param1 = "A";
        var param2 = "B";
        var param3 = "C";
        $("ul#SomeUL").append('<li><%: Ajax.ActionLink("Click Me", "SomeAction",  new { param1 = "' + param1 + '", param2 = "' + param2 + '", param3 = "' + param3 + '" }, new AjaxOptions() { OnSuccess = "onSuccess" }, new { Class = "ABC" } ) %></li>');

Now the problem is that instead of the value of each of the param# variables being "inserted"...the variable name itself (e.g. param1) gets "inserted"...in other words the routeValues being posted to the controller action are param1, param2, and param3 instead of A, B, and C...does anyone know why this is happening and how to fix it?

Thanks D

Darin Dimitrov · Accepted Answer · 2011-04-29 11:22:21Z

1

ActionLinks are useless in this case as they are server side code. You cannot mix them with client side javascript variables. Here's how I would do it (embracing the full power of jQuery):

$(function () {
    var param1 = 'A';
    var param2 = 'B';
    var param3 = 'C';
    $('ul#SomeUL').append(
        $('<li/>', {
            html: $('<a/>', {
                href: '<%= Url.Action("SomeAction") %>',
                text: 'Click Me',
                class: 'abc',
                click: function() {
                    var params = { 
                        param1: param1, 
                        param2: param2, 
                        param3: param3 
                    };
                    $.get(this.href, params, function(result) {
                        onSuccess();
                    });
                    return false;
                }
            })
        })
    );
});

answered Apr 29, 2011 at 11:22

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dieter Over a year ago

Ok...but will the above code work also if the link is an image that has to be clicked? (I wrote an extension method called ImageActionLink, but just used ActionLink in my scenario above for simplicity's sake.

Darin Dimitrov Over a year ago

@Dieter, you could use a CSS class to apply some background image to the anchor tag. Or instead of an anchor simply generate an <img/> tag. You could use a HTML5 data-* attribute on this image tag in order to store the url with the Url.Action helper.

Dieter Over a year ago

But why are ActionLinks useless if I build them up as a string? Why would the strange behavior regarding the javascript variables happen while constructing a string? I checked and even when first assigning the constructed html to a variable first and then passing the variable to the append function, the string variable has the parameter variables' names inserted into it instead of the parameter variables' values?

Dieter Over a year ago

E.g. if I say: var html = '<li><%: Ajax.ActionLink("Click Me", "SomeAction", new { param1 = "' + param1 + '", param2 = "' + param2 + '", param3 = "' + param3 + '" }, new AjaxOptions() { OnSuccess = "onSuccess" }, new { Class = "ABC" } ) %></li>'; "param1" is in the string instead of "A"

Dieter Over a year ago

I just (quite painfully) wrote a function that produces the same html as ActionLink and it works 100%...but I would prefer to use ActionLink as is...any idea why the html construction by concatenating strings doesn't work?

|

Collectives™ on Stack Overflow

Building HTML and appending using jQuery

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related