web-dev-qa-db-fra.com

Comment rendre une vue partielle dans MVC5 via un appel ajax à un contrôleur et retourner du HTML

Comment peut utiliser AJAX pour charger une vue partielle complète rendue en html (donc je viens de définir le div.html)

J'ai besoin de l'appel ajax pour appeler l'action du contrôleur qui affichera une vue partielle complète (rouge) et l'ajoutera à la fin de celle actuellement chargée?

[Je sais comment ajouter à DOM et comment faire AJAX appels]

J'ai besoin de savoir quelle est la meilleure approche de plomberie pour cela, quel type d'ActionResult l'action devrait renvoyer et s'il existe un mécanisme déjà intégré pour cela afin d'éviter de réinventer la roue?

enter image description here

jqueryhtmlajaxasp.net-mvcasp.net-mvc-partialview
17
Paceman

Il existe des assistants ajax intégrés dans ASP.NET MVC qui peuvent couvrir les scénarios de base.

Vous devez installer et référencer la bibliothèque JavaScript jquery.unobtrusive-ajax (+ Dépendance jQuery). Ensuite, dans votre vue principale (disons index.cshtml), mettez le code suivant:

Index.cshtml

@Ajax.ActionLink("Load More Posts", "MorePosts", new AjaxOptions()
{
    HttpMethod = "GET",
    AllowCache = false,
    InsertionMode = InsertionMode.InsertAfter,
    UpdateTargetId = "posts-wrapper"
})

<div id="posts-wrapper"></div>

Remarque: l'assistant @Ajax.ActionLink Accepte le paramètre AjaxOptions pour plus de personnalisations.

Dans le contrôleur (disons HomeController.cs), vous devez retourner PartialViewResult:

public ActionResult MorePosts(int? offset, int? count)
{
    IEnumerable<Post> posts = myService.GetNextPosts(offset, count); 
    return PartialView(posts);
}

Enfin, vous définissez la vue partielle MorePosts.cshtml:

@model IEnumerable<Post>

@{
    Layout = null;
}

@foreach (var post in Model)
{
    <div class="post">
        <div>>@post.Prop1</div>
        <div>@post.Prop2</div>
    </div>
    <hr />
}

Et c'est tout. Lorsque certains utilisateurs cliquent sur le bouton Load More, Plus de messages seront chargés.

Note 1: vous pouvez implémenter la fonction OnBegin pour implémenter la logique réelle pour décider quels sont les prochains messages à charger (ex. Récupérez l'identifiant du dernier message chargé et envoyez-le au serveur).

Note 2: le même résultat peut être obtenu avec des appels jQuery.ajax Personnalisés (sans jquery.unobtrusive). Les seules différences seront les appels manuels ajax et les événements de clic.

J'espère que cela t'aides. Je peux écrire un exemple plus complet si nécessaire.

22
Viktor Bahtev

Je recommande d'obtenir la bibliothèque Westwind.Web.Mvc De NUGET et vous pouvez exécuter n'importe laquelle de vos vues sur une chaîne pour revenir en tant que résultat JSON

public JsonResult GetPosts()
{
    string postsHtml = ViewRenderer.RenderPartialView("~/views/yourcontroller/_PostsPartial.cshtml",model);

    return Json(new { html = postsHtml });
}

Comme @Guruprasad l'a dit dans les commentaires, vous pouvez simplement renvoyer une vue partielle d'un contrôleur MVC en utilisant return PartialView(model), mais avec le RenderPartialView vous l'obtenez sous forme de chaîne que vous pouvez sortir en JSON avec toutes les autres valeurs si nécessaire. Cela fonctionnera si vous choisissez d'utiliser WebAPI, car il n'a pas la capacité de rendre une vue intégrée.

2
Luke