MVC 4 Ajax is not updating the PartialView within the page

Question

I'm doing a site using MVC 4. It's a site that list musics and the user can create a playlist (like a cart shopping).

I have for every music this action link that should be executed in Ajax:

@Ajax.ActionLink("Adicionar à Playlist","AddPlaylist", new { id = item.MusicaID }, new AjaxOptions {UpdateTargetId="playlist", InsertionMode=InsertionMode.Replace})

The action method from the controller returns a PartialView (the cart of playlist) and only that should update but instead of getting the whole page with that part updated I get a partial view and nothing more on the page.

This is the part where I render the PartialView:

<section id="playlist">
     @Html.Partial("_PlaylistPartial")
</section>

Shouldn't this work like I have?

Answer 1

Make sure you have included

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

in your view

Answer 2

It was a stupid thing.

First my include of jquery.unobtrusive-ajax.min.js didn't work like I have:

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

So I put like this:

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

And still wasn't working, because I also need to include the JQuery files:

@Scripts.Render("~/Scripts/jquery-1.7.1.js")
@Scripts.Render("~/Scripts/jquery.1.7.2.min.js")

This way it works :)

Answer 3

A little late to the party but I just had a similar problem. The solution was to add this line to _Layout.cshtml:

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

Answer 4

First, install Microsoft.JQuery.Unobtrusive.Ajax from NuGet Manager and later include ~/Scripts/jquery.unobtrusive in BundleConfig after including jquery-{version}.js; which will look something similar to this:

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery.unobtrusive*));