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
Vous devez vous connecter pour publier un commentaire.
#
dansUpdateTargetId = "#mainDiv"
jquery.unobtrusive-ajax.min.js
script référencés sur votre page.J'ai copié ton code dans un tout nouveau MVC4 projet et il fonctionne très bien.
Voir la capture d'écran de la solution:
Espère que cela va vous donner un indice sur ce qui pourrait être mauvais.
En général, je charge les partiels comme ceci en utilisant JQuery
Sur le bouton cliquez sur il devrait appeler l'Action qui renvoie un PartialView. Vous n'avez pas besoin de le '#' dans votre Ajax.BeginForm appel.
Seul problème que j'ai eu avec l'exemple d'origine a été l' \lib\ dans le script src chemin. Par défaut MVC 4 Web app va mettre les fichiers js dans "Scripts", pas de "Scripts\Lib". Votre capture d'écran exemple est correct.
Également dans l'exemple d'origine - la mise en ViewBag.Le titre sera à l'origine de ce pas le travail:
J'ai eu exactement le même problème; le chargement de la vue partielle, comme l'ensemble de la page plutôt que dans la div.
J'ai été incorrectement en supposant que mon
_Layout.cshtml
était notamment lejquery.unobtrusive-ajax.js
fichier que je ne comprenais pas ce que les Faisceaux de truc(?) était en train de faire. J'ai pensé qu'il a été ajouté par paquets.Dans mon
_Layout.cshtml
Vue il définit@RenderSection("scripts", required: false)
Qui est en anglais; il est en option pour inclure une section de votre point de vue appelé @scripts.
Si aucune erreur n'est levée si vous n'avez pas l'inclure (@section scripts), mais le problème est que l'Ajax affiche dans une nouvelle page si vous ne le faites pas.
Solution: placez le code suivant dans votre point de vue (je l'ai mis en dessous de la
...ViewBag.Title; }
)Désolé si mon explication est un peu rudimentaire, je suis un peu nouveau pour cette. En espérant que cela aide quelqu'un.
charger les données json table ou vue partielle. pas plein format d'affichage.
ici, les données renvoyées sont données json ou de données comme
données
.
l'utilisation d'alerte pour vérifier les données.