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 dans ma vue principale ...
Voici le simple exemple...
Je charge L'Index.cshtml de L'action D'Index Homecontroller en tant que page principale..
Dans l'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
<div>
Welcome !!
</div>
Mais, lors de l'exécution du projet, indexez.CSHTML rend en premier et me montre le lien "charger la vue partielle"... lorsque je clique sur cela, il va à la nouvelle page instade de rendu du message de bienvenue de _LoadView.cshtml dans l'index.cshtml.
Qu'est-ce qui ne va pas?
Note: Je ne veux pas charger la page via AJAX ou Je ne veux pas utiliser Ajax.ActionLink
8 réponses
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 le hepler HtmlPartial:
@Html.Partial("_LoadView")
Si vous souhaitez utiliser Ajax.ActionLink, remplacer votre Html.ActionLink, avec:
@Ajax.ActionLink(
"load partial view",
"Load",
"Home",
new AjaxOptions { UpdateTargetId = "result" }
)
Et bien sûr, vous devez inclure un holder dans votre page où le partiel sera affiché:
<div id="result"></div>
N'oubliez pas non plus d'inclure:
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
Dans votre vue principale afin d'activer Ajax.* aides. Et assurez - vous que JavaScript discret est activé dans votre web.config (il devrait être par défaut):
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
J'ai eu exactement le même problème que Leniel. J'ai essayé des corrections suggérées ici et une douzaine d'autres endroits. La chose qui a finalement fonctionné pour moi était simplement d'ajouter
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
À ma mise en page...
Si vous le faites avec un @Html.ActionLink(), le chargement de PartialView est géré comme une requête normale lorsque vous cliquez sur un élément d'ancrage, c'est-à-dire charger une nouvelle page avec la réponse de la méthode PartialViewResult.
Si vous voulez le charger immédiatement, alors vous utilisez @Html.RenderPartial("_LoadView") ou @Html.RenderAction("Load").
Si vous voulez le faire sur userinteraction (c'est-à-dire en cliquant sur un lien), vous devez utiliser AJAX --> @Ajax.ActionLink()
Pour moi, cela a fonctionné après avoir téléchargé la bibliothèque discrète AJAX via NuGet:
Search and install via NuGet Packages: Microsoft.jQuery.Unobtrusive.Ajax
Que d'ajouter dans la vue les références à jQuery et AJAX discrètes:
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>
À Côté de l'Ajax ActionLink et le div ont été nous voulons rendre les résultats:
@Ajax.ActionLink(
"Click Here to Load the Partial View",
"ActionName",
null,
new AjaxOptions { UpdateTargetId = "toUpdate" }
)
<div id="toUpdate"></div>
Petit tweek à ce qui précède
@Ajax.ActionLink(
"Click Here to Load the Partial View",
"ActionName",
"ControlerName",
null,
new AjaxOptions { UpdateTargetId = "toUpdate" }
)
<div id="toUpdate"></div>
RenderParital est préférable d'utiliser pour les performances.
{@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 voulez faire une demande de serveur et traiter les données, puis retourner la vue partielle à la vue principale remplie de ces données, vous pouvez utiliser
...
@Html.Action("Load", "Home")
...
public PartialViewResult Load()
{
return PartialView("_LoadView");
}
Si vous voulez que l'utilisateur clique sur le lien et ensuite remplir les données de vue partielle, vous pouvez utiliser:
@Ajax.ActionLink(
"Click Here to Load the Partial View",
"ActionName",
"ControlerName",
null,
new AjaxOptions { UpdateTargetId = "toUpdate" }
)
UNE CHOSE À SAVOIR - ET JE SUIS TOMBÉ EN FAUTE DE CELA...
jquery.validate.unobtrusive.js
jquery.validate.unobtrusive.min.js
NE SONT PAS LES MÊMES QUE...
jquery.unobtrusive-ajax.js
jquery.unobtrusive-ajax.min.js
J'ai lu "discret" et supposé que j'avais la bonne bibliothèque-les AJAX sont nécessaires!