Why is Ajax.ActionLink updating entire page instead of just UpdateTarget

Question

This should replace just the UpdateTarget, but it does not, it replaces the entire page and I don't see why. The correct partial view is being returned, but instead of replacing the target id, it is replacing the entire page.

<div id="magHeader">
        <p>this is a test.</p>
        @Ajax.ActionLink("Edit", "GetEditor", "Home", new AjaxOptions(){ UpdateTargetId = "magHeader", InsertionMode = InsertionMode.Replace})
</div>

At runtime, the link looks like this:

<a href="/Home/GetEditor" data-ajax-update="#magHeader" data-ajax-mode="replace" data-ajax="true">Edit</a>

Is there something that I am doing wrong? Have done this successfully in the past with no issues.

Edit The underlying reason for this issue is that in VS 2012, you only needed to add a reference to the JQueryVal bundle to make this work. However, in 2013, the BundleConfig.cs was changed so that the JQueryVal bundle no longer includes JQuery.Unobtrusive. So the simple fix is to add it back into the bundle:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.unobtrusive*",
                    "~/Scripts/jquery.validate*"));

Then all will work as expected.

Answer 1

Check if you are loading @Scripts.Render("~/bundles/jqueryval") into your page somewhere or not. It is probably because unobtrusive javascript file is not getting loaded. Check this video

Edit:
Please check if you there packages installed in your packages.config file.

<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.1.1" targetFramework="net451" />
  <package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.0.0" targetFramework="net451" />

Answer 2

This happens because of this main reason that your jquery script file and jquery unobtrusive ajax are not included on the main layout or child view, i am afraid that you are missing them,include the jquery,jquery unobtrusive ajax files in view and it will work like a charm.