web-dev-qa-db-fra.com

Comment puis-je charger une vue partielle à l'intérieur de la vue

Je suis très confus avec cette vue partielle ...

Je souhaite charger une vue partielle dans 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

<div>
    Welcome !!
</div>

MAIS, lorsqu’il exécute le projet, index.cshtml effectue un premier rendu et me montre le lien "Charger la vue partielle" ... lorsque je clique dessus, il affiche la nouvelle page de rendu du message de bienvenue de _LoadView.cshtml dans index.cshtml. .

Qu'est-ce qui ne va pas?

Note: Je ne veux pas charger la page à travers AJAX ou ne veux pas utiliser Ajax.ActionLink

asp.net-mvcasp.net-mvc-3razorasp.net-mvc-partialview
70
patel.milanb

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

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

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

@Html.Partial("_LoadView")

Si vous voulez utiliser Ajax.ActionLink, remplacez votre Html.ActionLink avec:

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

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

<div id="result"></div>

N'oubliez pas d'inclure également:

<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 (ce devrait être par défaut):

<add key="UnobtrusiveJavaScriptEnabled" value="true" />
148
Darin Dimitrov

J'ai eu exactement le même problème que Leniel. J'ai essayé des correctifs suggérés 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 ...

16
Scott

Pour moi, cela a fonctionné après avoir téléchargé AJAX Librairie unobtrusive via NuGet:

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

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

@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"> </script>

Suivant le Ajax ActionLink et le div où 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>
5
Stefan Vlad

Si vous le faites avec une @Html.ActionLink(), le chargement de 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 voulez le charger immédiatement, utilisez @Html.RenderPartial("_LoadView") ou @Html.RenderAction("Load").
Si vous voulez le faire après l’interaction de l’utilisateur (c’est-à-dire en cliquant sur un lien), vous devez utiliser AJAX -> @Ajax.ActionLink()

5
Major Byte

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

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

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>
1
3d cad consultant

si vous souhaitez 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 une vue partielle à votre vue principale remplie avec 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 puis remplisse 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" }
)
1
Jaimin Dave