Asp Mvc Return a partial view with Ajax does not work

Question

I am using MVC3 (Razor) with the Paging open source code here. The code call when hitting a button the Controller that has this code :

  [Authorize(Roles = SystemConstants.ROLE_ADMINISTRATOR)]
  public ActionResult ListUsers(int? page)
  {
     int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
     var products = userToDisplay.ToPagedList(currentPageIndex, 5);
     return PartialView("ListUsersTable", products); 

  }

This should return a PartialView called "ListUsersTable". It does return "ListUsersTable" but as a whole page instead of replacing the DIV.

Here is the code in the View :

   <div id="listUserToBeUpdated">
       @Html.Partial("ListUsersTable", Model)
   </div>

The button inside the ListUsersTable to do the Ajax call looks like that:

   <div class="pager">
      @Ajax.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount, "ListUsers", new AjaxOptions { UpdateTargetId = "listUserToBeUpdated" })
   </div>

Any idea why the code is not replacing the DIV but return the code in the page instead?

Answer 1

What JS files you have referenced? In ASP.NET MVC3 they changed the AJAX functionality from MicrosoftMvcAjax.js to jquery.unobtrusive-ajax.js, so reference the latter if you're not doing so already.

Also verify that the key "UnobtrusiveJavaScriptEnabled" on the web.config file is set to "true"