web-dev-qa-db-fra.com

utilisation de Ajax pour le chargement de vues partielles dans .NET MVC4

J'essaie de suivre le post ici , qui peut très bien être faux, pour en apprendre un peu plus sur le chargement de vues partielles dans MVC. Je connais les bases de MVC, mais je veux faire plus de choses comme jax avant de commencer à utiliser MVC.

Le but est d’avoir la vue partielle chargée à l’intérieur du div. Il ne fait que charger la vue partielle dans la totalité de la page, plutôt qu'à l'intérieur de la Div.

Le code est le suivant:

Manette:

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 dièse, je ne savais pas trop ce qui était juste)

<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éé un tout nouveau projet MVC 4. Cela vient, par défaut, avec Jquery 1.7.1 et la bibliothèque unobtrusive-ajax de Microsoft. Il charge toujours la vue partielle dans une nouvelle page ...

Mise à jour: Je ne suis pas sûr que cela aide, mais ce qui suit donne le résultat que je veux ... Mais cela ne résout toujours pas le problème de la raison pour laquelle cette solution ne fonctionne pas.

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

</script>
    enter code here
jqueryasp.netajaxasp.net-mvcasp.net-mvc-4
16
kralco626
  1. fossé # dans UpdateTargetId = "#mainDiv"
  2. assurez-vous que le script jquery.unobtrusive-ajax.min.js est référencé sur votre page.
16
Dmitry

J'ai copié votre code dans un tout nouveau projet MVC4 et cela fonctionne bien. 

Voir la capture d'écran de la solution: 

Brand new MVC4 project with Ajax.ActionLink

J'espère que cela vous donnera un indice sur ce qui pourrait ne pas être correct. 

13
Eric Eijkelenboom

Je charge généralement des partiels comme celui-ci avec JQuery

$( document ).ready(function() {

  $("#lnkPage1").click(function( event ) {

    $('#mainDiv').load('Test/Pag1');

  });

  $("#lnkPage2").click(function( event ) {

    $('#mainDiv').load('Test/Pag2');

  });

});
4
Dave Alperovich
@using (Ajax.BeginForm("AjaxViewCall", "Home", new AjaxOptions { UpdateTargetId = "result" }))   
{
    <p>
        <input type="submit" value="Ajax Form Action" />
    </p>
}

<div id="result></div>

Cliquez sur le bouton pour appeler l'action qui renvoie un PartialView. Vous n'avez pas besoin du '#' dans votre appel Ajax.BeginForm.

1
Schanckopotamus

J'ai exactement le même problème. charger la vue partielle en tant que page entière plutôt que dans la div définie.

Je supposais à tort que mon _Layout.cshtml incluait le fichier jquery.unobtrusive-ajax.js car je ne comprenais pas ce que faisait Bundles thingy (?). Je pensais qu'il était ajouté par Bundles.

Dans ma vue _Layout.cshtml, il définit @RenderSection("scripts", required: false) Il est facultatif d'inclure dans votre vue une section appelée @scripts . Ainsi, aucune erreur n'est générée si vous ne l'incluez pas (scripts de section), mais le symptôme est que Ajax ne s'affiche que dans une nouvelle page si vous n'en avez pas. t. 

Pour le réparer: mettez ce qui suit dans votre vue (je le mets en dessous du ...ViewBag.Title; })

@section scripts{
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
}

Désolé si mon explication est un peu rudimentaire, je suis un peu nouveau à ce sujet. En espérant que cela aide quelqu'un.

0
Julian Rosebury

charge les données JSON ou la vue partielle de la table. pas vue en plein format. 

success:function(data){
    alert(data);
    debugger;
    ('#div_id').data(data);
}

ici, les données renvoyées sont des données JSON ou des données telles que 

les données

0
david

Le seul problème que j'avais avec l'exemple original était le chemin\src du script\lib\in. Par défaut, l'application Web MVC 4 mettra les fichiers js dans "Scripts", et non "Scripts\Lib". Votre exemple de capture d'écran est correct.

<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"

Également dans l'exemple original - mettre ViewBag.Title fera que cela ne fonctionne pas:

@{
    ViewBag.Title = "Some Title";
}
0
Vincent Finn