Problem with Ajax.ActionLink AjaxOptions Callbacks (ASP.NET MVC 3)

Question

I have an Ajax.ActionLink inside a PartialView like so:

@Ajax.ActionLink(Model.IsVisible ? "Disable" : "Enable", "ToggleVisibility", "Review", new { area = "Admin", id = Model.Id }, new AjaxOptions { HttpMethod = "POST", OnComplete = "onComplete_AdminReviewOption" })

And the handling JavaScript function (declared in-line on the main View for now):

function onComplete_AdminReviewOption(ajaxContext) {
    var jsonObject = ajaxContext.get_object();
}

Which throws a javascript error:

Object# has not definition for get_object().

I thought these JavaScript methods were part of the MicrosoftAjax.js / MicrosoftMvcAjax.js scripts, both of which i have included on my page.

Can anyone confirm which library these helper methods are present?

I load the required scripts in my Layout.cshtml file, then i do an AJAX call to render out the above PartialView.

So by the time i handle that function, the libraries are already loaded - which is why im confused.

Any ideas?

Darin Dimitrov · Accepted Answer · 2011-04-27T07:35:07.083

2

It looks like you are using ASP.NET MVC 3 and Razor. In this version jQuery is the default client scripting framework. No more MicrosoftAjax.js (thanks God). So:

function onComplete_AdminReviewOption(ajaxContext) {
    var jsonObject = eval(ajaxContext);
}

Also don't forget to include jquery.unobtrusive-ajax.js.

If you want to use the legacy stuff you could by setting the following in your web.config:

<add key="UnobtrusiveJavaScriptEnabled" value="false" />

By default this variable is set to true.

Personally I prefer to use standard links:

@Html.ActionLink(
    Model.IsVisible ? "Disable" : "Enable",  // <-- this should probably be as a property directly in the view model, ex. Model.LinkText
    "ToggleVisibility", 
    "Review", 
    new { area = "Admin", id = Model.Id }, 
    new { id = "myLink" }
)

and AJAXify them using jQuery in a separate javascript file:

$(function() {
    $('#myLink').click(function() {
        $.post(this.href, function(result) {
            // result is already a javascript object, no need to eval
        });
        return false;
    });
});

edited Apr 27 '11 at 07:35

answered Apr 27 '11 at 07:28

Darin Dimitrov

1,023,142
271
3,287
2,928

Ah ha! So i didn't know the MS AJAX scripts were now considered "legacy". For sure - i prefer jQuery too - but i thought i'd give the MS Ajax helpers a go, as it seemed to have a rich client-side API. Will try out the jQuery way tomorrow morning. Good tip with the link text too. – RPM1984 Apr 27 '11 at 08:11
with your technique above, the HTTP GET (via the HREF) will happen before the click function, so the click function will never happen as the URL will 404 (as it's a `[HttpPost]` action method). I think i need to set the href to `#`. Thoughts? – RPM1984 Apr 28 '11 at 00:02
@RPM1984 have u included return false statement in click event handler of the link and also put an alert in event handler to see if it is registered properly. as for HTTP Post is concerned Darin is using $.post method of jquery that sends ajax request via post so that won't be the problem either – Muhammad Adeel Zahid Apr 28 '11 at 04:29
@RPM1984, you need to `return false` from the click handler to prevent the default action. – Darin Dimitrov Apr 28 '11 at 06:07
your right. I did have it, but the reason it wasn't working was i was binding the click event on doc ready. But the element hadn't been rendered yet (rendered in partial via ajax). So that's why it wasn't firing. Doh!. This works - removing my answer and accepting. Thanks! – RPM1984 Apr 28 '11 at 06:15

Problem with Ajax.ActionLink AjaxOptions Callbacks (ASP.NET MVC 3)

1 Answers1