Question

Just trying to wrap my head around the Ajax helper in Razor — Probably overlooking something simple.

The following code is directing my current tab to /Music/SearchBand rather than returning the partial to my div.

I’ve got this in my View:

@Ajax.ActionLink("click me","SearchBand",
new AjaxOptions {
    UpdateTargetId = "replaceThisDiv"   
})

<div id="replaceThisDiv"></div>

And this in my controller:

public ActionResult SearchBand()
    {
        return PartialView("_bandResults");
    }

Answer 1

The @Ajax. ... helpers jut add some additional data- attributes to the generated HTML which in itself won’t do any ajax requests (that’s why the link “just” navigated to a different page).

To make it work porperly it needs some client side javascript functions which will fire the actual ajax requests with the use of the pregenerated data- attributes.

These js functions are in the Sripts/jquery.unobtrusive-ajax.min.js file:

So you need to include this JS file on every page where you plan to use any of the @Ajax. ... helpers:

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" 
        type="text/javascript"></script>