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?

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