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:

• http://stackoverflow.com/questions/18540745/why-does-partial-view-show-as-full-page-in-mvc-5-visual-studio-13
• https://app.pluralsight.com/library/courses/one-aspdotnet-from-scratch