asp.net mvc partialview @Ajax.ActionLink doesn't work

Question

I have a view page

my view page

<div id="beReplaced">
    @Ajax.ActionLink("please click on me to bring the partial view",
                     "PatrialViewToBeCalled",
                     new AjaxOptions()
                        {UpdateTargetId = "beReplaced",
                        InsertionMode = InsertionMode.InsertAfter,
                        HttpMethod="Get",
                        LoadingElementId = "prgress" })
 </div>

i have a Controller

public PartialViewResult PatrialViewToBeCalled()
{
    var customer = db.Customers.First();

    return PartialView("PartialViewThatMustBeShow",customer);
}   

but when i click on the generated link it brings me to a new page instead of replacing or appending the partial view to the div tag.

What's the problem?

Answer 1

It could have been that you were missing the:

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

In the main view. This tells the main view to recognize the ajax helper.

Answer 2

I found the solution. The problem was due to the corrupted unobtrusive-ajax.min.js file.

Answer 3

If you have jQuery loaded into your page, why not use the simple jquery get / load method to get the partial view ?

<div id="beReplaced">
  <a href="#" id="lnk1">please click on me to bring the partial view</a>
</div>

Javascript

$("#lnk1").click(function(){
$.get('/controller/PatrialViewToBeCalled', function(data) {
         $('#beReplaced').html(data);
      });
});

Answer 4

If you are working with ASP .NET MVC 4 make sure that

  @Scripts.Render("~/bundles/jquery")

is in the end of the body tag as well.

      @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html> 

Answer 5

I've just been working on it for too long, thinking it did not work. Viewing the page source didn't show anything either.

Eventually, I found out it actually did work when I saw the successful requests in the console of Firebug. It only was showing it off screen. In the HTML tab of Firebug I finally found the output, even though it does not show up in the page source.