MVC5 Ajax.ActionLink in new Page

Question

I've been search all around to figure out how to fix my problem but no luck.

1. I created a default MVC5 Web application.

2. In the Home(Index) view, I added the following:

   <div id="target">TEST</div>
   @Ajax.ActionLink("Test AJAX", "Ajax", new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "target"});
   

3. In the HomeController, I added the following:

   public PartialViewResult Ajax()
   {
       return PartialView("Ajax", DateTime.Now.ToString());
   }
   

4. I created a new View called Ajax.cshtml that looks like this

   @model string
   @{
       ViewBag.Title = "Ajax";
   }
   
   <h2>Ajax</h2>
   <p>@Model</p>
   

5. The in the web config is set to true :

   <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

6. The following Bundle is rendered

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

7. My scripts folder looks like this:

In summary, All the custom stuff is adding the Ajax link, a new method in the home controller and a new view..

My Ajax Link also show the result in a new page instead of updating the target element.