ASP.NET MVC 3 (Razor) Ajax.ActionLink - What am i doing wrong?

Question

Trying to have a AJAX action link which when clicked, should do a HttpGet to an action method which returns a PartialViewResult and shoves the HTML into a div.

Here's my View:

<div id="admin-options" class="admin"></div>
@Ajax.ActionLink("Show Admin Options", "ShowOptions", "Post", new { area = "Admin" }, new AjaxOptions { UpdateTargetId = "admin-options", HttpMethod = "GET" })

Here's the action method:

public class PostController : Controller
{
   [HttpGet]
   [Authorize(Roles="Admin")]
   public PartialViewResult ShowOptions()
   {
      return PartialView();
   }
}

Here's the HTML it generates:

<a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#admin-options" href="/Admin/Post/ShowOptions">Show Admin Options</a>

Looks fine to me.

But instead of doing an AJAX call, it does a regular HTTP GET via the browser URL, and redirects to /Admin/Post/ShowOptions.

Obviously im missing something - but what?

Answer 1

Make sure you have the unobtrusive AJAX javascript library included in your page.

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

Answer 2

And for those using the Razor view engine...

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

Answer 3

You may also want to include the InsertionMode option in the AjaxOptions. I'm sure there's a default behavior if you exclude it but it's better to explicitly define it for things like this.