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

Question

Trying to have an AJAX action reference that, when clicked, should do an HttpGet for the action method, which returns a PartialViewResult and drags the HTML into the div.

Here is 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> 

It looks good to me.

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

Obviously something is missing, but what?

Answer 1

Make sure you have the unobtrusive javascript AJAX 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 viewer ...

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

Answer 3

You can also enable the InsertionMode parameter in AjaxOptions. I'm sure there is a default behavior if you exclude it, but it's better to explicitly define it for such things.