1

In _Layout.cshtml:

@RenderBody()
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")

Running the script activates all the @Ajax.ActionLink in index.cshtml. Some ajax action links load a partial view via ajax, and these partial views include more ajax action links. These new ajax action links are not activated because jquery.unobtrusive-ajax.js was run before they are on the page.

My solution was to simply run the script again on the partial view.

In _PartialView.cshtml:

@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")

This however causes @Ajax.ActionLink in index.cshtml to be activated a second time. If I click on any of these ajax action links, their corresponding actions runs twice.

How can I activate new ajax action links in partial views without reactivating existing ajax action links?

allenylzhou
  • 1,431
  • 4
  • 19
  • 36

1 Answers1

4

Unless you are using some very old version of the jquery.unobtrusive-ajax.js script what you describe shouldn't be the case. The reason why this shouldn't be the case is because the jquery.unobtrusive-ajax.js that comes with ASP.NET MVC 4 uses the jQuery .delegate or in most recent versions the .on() function to subscribe to the click events of the Ajax.* elements. This means that the click handler will be executed even for elements that are not initially present in the DOM but are loaded later using AJAX calls for example.

And in the latest version it uses the .on method:

$(document).on("click", "a[data-ajax=true]", function (evt) {
    evt.preventDefault();
    asyncRequest(this, {
        url: this.href,
        type: "GET",
        data: []
    });
});

Notice how it subscribes to the .click event in a lively manner to all anchors having the data-ajax="true" attribute. And it will do that even for anchors that are added later to the DOM.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • I'm using this version of jquery.unobtrusive-ajax.js: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax/ it does use .on but it doesn't seem to handle anchors loaded by ajax – allenylzhou Mar 22 '14 at 22:28
  • Sorry I am unable to reproduce the behavior described. I created a new ASP.NET MVC 4 application and it works as expected. – Darin Dimitrov Mar 22 '14 at 22:29
  • If the click handler is truly executed for elements that are not initially present in the DOM, then why is it recommended that we must include jquery.unobtrusive-ajax at the bottom of @RenderBody()? – allenylzhou Mar 22 '14 at 22:35
  • 1
    It makes no difference at all because this script uses *live* subscription to the events. Even if you include it in the `` it will still work because of the `.on()` method even if the elements are not yet present in the DOM. The reason why it is recommended to put it at the bottom is because that's the general best practice for javascript: not block the UI from loading while waiting for some javascript in the `` to be loaded. It makes the page appear faster to the user. – Darin Dimitrov Mar 22 '14 at 22:39