Ajax.ActionLink with unobtrusive javascript via jquery

Question

I am a bit lost. Maybe it's that I don't understand jQuery that well (or at all). I've got a MVC3 app with a webgrid. A column of the webgrid is for 'edit' which should make a call to the controller and return a JSON object back. This all worked in MVC2 but with the changes in MVC3 it doesn't work any more.

    grid.Column( header: "", format: (item) => Ajax.ActionLink("Edit" "Edit", new { id = item.id }, new AjaxOptions { OnSuccess = "handleEdit" }) ),

previously I was able to define the javascript as such:

      function handleEdit(context) {
    var json = context.get_data();
    var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);
    var form_url = '/taskstatus/update/' + data.id;

    // update elements on the page
    $('#add_link').hide();
    $('form').attr('ACTION', form_url);
    $('#TaskStatus_status_code').val(data.status_code);
    $('#TaskStatus_status_description').val(data.status_description);
    $('#TaskStatus_active').attr('checked', data.active);
    $('#submit').val('update');
    $('#form').show('fast');
  }

Now when I click on the link I get the JSON as a downloaded file. How can this be done using the new unobtrusive way?

Darin Dimitrov · Accepted Answer · 2011-02-02 18:39:14Z

1

The Ajax.* helpers use jquery by default in ASP.NET MVC 3. This means that in the success callback you no longer get a context as first argument but you get the value returned by the server. You no longer have any get_data() functions on it. It's a string value and represents your server response. So try like this:

function handleEdit(result) {
    var data = $.parseJSON(result);
    ...
}

or even better use normal links:

grid.Column(
    header: "", 
    format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.id }) 
)

which you would easily AJAXify in a separate file:

$(function() {
    $('#gridId a').click(function() {
        $.get(this.href, function(data) {

            // WARNING: you probably don't want to hardode urls like this
            var form_url = '/taskstatus/update/' + data.id;

            // update elements on the page
            $('#add_link').hide();
            $('form').attr('ACTION', form_url);
            $('#TaskStatus_status_code').val(data.status_code);
            $('#TaskStatus_status_description').val(data.status_description);
            $('#TaskStatus_active').attr('checked', data.active);
            $('#submit').val('update');
            $('#form').show('fast');
        });
        return false;
    });
});

edited Feb 2, 2011 at 18:39

answered Feb 2, 2011 at 18:29

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

2 Comments

jdiaz Over a year ago

thanks you this helped a lot. What way would you recommend to set the form url? Passing in?

Darin Dimitrov Over a year ago

@jdiaz, one possibility would be to have the server directly return this url as part of the JSON response: var form_url = data.url;.

Collectives™ on Stack Overflow

Ajax.ActionLink with unobtrusive javascript via jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related