ASP.NET MVC Ajax PartialView Displays a New Page

ASP.NET MVC PartialView displays a new page instead of replacing the <div> on the current page for the @Ajax.ActionLink’s InsertionMode = InsertionMode.Replace parameter.

Language/Environment: C# ASP.NET MVC 5

IDE: Microsoft Visual Studio 2015 Community

To resolve this issue, do the following:

Install: Microsoft.jQuery.Unobtrusive.Ajax

  • Install Microsoft.jQuery.Unobtrusive.Ajax via the NuGet Package Manager in Visual Studio

Modify: App_Start / BundleConfig.cs

  • Add “~/Scripts/jquery.unobtrusive*” to the ScriptBundle(“~/bundles/jqueryval”).Include:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
 "~/Scripts/jquery.validate*", 
 "~/Scripts/jquery.unobtrusive*"));

Modify: Shared / _Layout.cshtml

  • Add the following code to the bottom of _Layout.cshtml, after the other @Scripts.Render commands:
@Scripts.Render("~/bundles/jqueryval")

Reference: