utiliser Ajax pour le chargement partiel de vues dans .NET MVC4

Je suis en train de suivre le post iciqui peut très bien être faux, pour en apprendre un peu plus sur la vue partielle de chargement en MVC. Je connais les bases de la MVC, mais nous voulons faire plus de l'ajax trucs que j'ai l'habitude de faire avant de commencer à utiliser MVC.

Le but est d'avoir la vue partielle de la charge à l'INTÉRIEUR de la div. Son vient de charger la vue partielle, comme l'ensemble de la page, plutôt qu'à l'intérieur de la Div.

Code est comme suit:

Contrôleur:

namespace LDP.WebUI.Controllers
{
    public class TestController : Controller
    {
        //
        //GET: /Test/

        public ActionResult Index()
        {
            return View();
        }
        public PartialViewResult Page1()
        {
            return PartialView("Page1");
        }
        public PartialViewResult Page2()
        {
            return PartialView("Page2");
        }
    }
}

Vue principale (Index): (j'ai aussi essayé "mainDiv" sans le signe de la livre, wasen pas sûr de ce qui était à droite)

<script src="@Url.Content("~/Scripts/libs/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/libs/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#hideme').click(function () {
            $(this).hide();
        });
    });
</script>
<div>
@Ajax.ActionLink("Parial Page1", "Page1", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
@Ajax.ActionLink("Parial Page2", "Page2", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "mainDiv"})
<div id ='mainDiv'>

</div>
<button id ="hideme">Hide Me</button>
</div>

Vue Partielle 1 (Page1.cshtml)

@{
    ViewBag.Title = "Page1";
}

<h2>Page1</h2>

Vue Partielle 2 (Page2.cshtml)

@{
    ViewBag.Title = "Page2";
}

<h2>Page2</h2>

Mise à jour:
J'ai créé une nouvelle marque MVC 4 du projet. Cela vient, par défaut, avec Jquery 1.7.1 et la discrète-bibliothèque ajax de microsoft. Il charge toujours de la vue partielle dans une nouvelle page...

Mise à jour: je ne sais Pas si cela aide, mais la suivante ne permet d'obtenir le résultat que je veux... Mais ne peut toujours pas résoudre le problème pourquoi cette solution ne fonctionne pas

<button>load about</button>
<script type="text/javascript">
    $("button").click(function () {
        $("#mainDiv").load("Test/Page2");
    });

</script>
    enter code here

source d'informationauteur kralco626