Comment puis-je charger une vue partielle dans la vue

Je suis très confus avec cette vue partielle …

Je veux charger une vue partielle à l’intérieur de ma vue principale …

voici le simple exemple …

Je charge Index.cshtml de l’action Index Homecontroller en tant que page principale.

dans index.cshtml Je crée un lien via

@Html.ActionLink("load partial view","Load","Home") 

dans HomeController j’ajoute une nouvelle action appelée

 public PartialViewResult Load() { return PartialView("_LoadView"); } 

dans _LoadView.cshmtl je viens d’avoir un

 
Welcome !!

MAIS, lorsque vous lancez le projet, index.cshtml s’affiche en premier et affiche le lien “Charger une vue partielle” … lorsque je clique dessus, il accède à une nouvelle page de rendu du message de bienvenue de _LoadView.cshtml dans index.cshtml .

Qu’est-ce qui peut être faux?

Remarque: je ne souhaite pas charger de page via AJAX ou ne pas utiliser Ajax.ActionLink

Si vous voulez charger la vue partielle directement dans la vue principale, vous pouvez utiliser l’assistant Html.Action :

 @Html.Action("Load", "Home") 

ou si vous ne voulez pas passer par l’action Load, utilisez l’hepler HtmlPartial:

 @Html.Partial("_LoadView") 

Si vous souhaitez utiliser Ajax.ActionLink , remplacez votre Html.ActionLink par:

 @Ajax.ActionLink( "load partial view", "Load", "Home", new AjaxOptions { UpdateTargetId = "result" } ) 

et bien sûr vous devez inclure un détenteur dans votre page où le partiel sera affiché:

 

N’oubliez pas non plus d’inclure:

  

dans votre vue principale afin d’activer les aides Ajax.* . Et assurez-vous que javascript discret est activé dans votre web.config (il devrait être par défaut):

  

J’ai eu exactement le même problème que Leniel. J’ai essayé des solutions suggérées ici et une douzaine d’autres endroits. La chose qui a finalement fonctionné pour moi était simplement d’append

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

à ma mise en page …

Si vous le faites avec un @Html.ActionLink() le chargement du PartialView est traité comme une requête normale lorsque vous cliquez sur un élément d’ancrage, c’est-à-dire que vous chargez une nouvelle page avec la réponse de la méthode PartialViewResult.
Si vous souhaitez le charger immédiatement, utilisez @Html.RenderPartial("_LoadView") ou @Html.RenderAction("Load") .
Si vous voulez le faire lors de l’interaction utilisateur (c.-à-d. Cliquer sur un lien), vous devez utiliser AJAX -> @Ajax.ActionLink()

Pour moi, cela a fonctionné après avoir téléchargé la bibliothèque AJAX Unobtrusive via NuGet:

  Search and install via NuGet Packages: Microsoft.jQuery.Unobtrusive.Ajax 

Puis append dans la vue les références à jquery et AJAX Unobtrusive:

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

Ensuite, Ajax ActionLink et la div que nous voulons afficher les résultats:

 @Ajax.ActionLink( "Click Here to Load the Partial View", "ActionName", null, new AjaxOptions { UpdateTargetId = "toUpdate" } ) 

Petit tweek à ce qui précède

 @Ajax.ActionLink( "Click Here to Load the Partial View", "ActionName", "ControlerName", null, new AjaxOptions { UpdateTargetId = "toUpdate" } ) 

RenderParital est préférable d’utiliser pour la performance.

 {@Html.RenderPartial("_LoadView");} 

si vous voulez remplir le contenu de votre vue partielle dans votre vue, vous pouvez utiliser

 @Html.Partial("PartialViewName") 

ou

 {@Html.RenderPartial("PartialViewName");} 

Si vous souhaitez que le serveur demande et traite les données, puis vous renvoie une vue partielle de la vue principale contenant les données que vous pouvez utiliser

 ... @Html.Action("Load", "Home") ... public PartialViewResult Load() { return PartialView("_LoadView"); } 

Si vous souhaitez que l’utilisateur clique sur le lien et remplisse ensuite les données de la vue partielle, vous pouvez utiliser:

 @Ajax.ActionLink( "Click Here to Load the Partial View", "ActionName", "ControlerName", null, new AjaxOptions { UpdateTargetId = "toUpdate" } ) 

UNE CHOSE A PRENDRE CONNAISSANCE DE – ET JE SOUFFLE DE CELA …

 jquery.validate.unobtrusive.js jquery.validate.unobtrusive.min.js 

NE SONT PAS LES MÊMES COMME …

 jquery.unobtrusive-ajax.js jquery.unobtrusive-ajax.min.js 

J’ai lu “discret” et j’ai supposé que j’avais la bonne bibliothèque – celles d’AJAX sont requirejses!