Maison >interface Web >js tutoriel >Comment restituer dynamiquement des vues partielles avec jQuery dans ASP.NET MVC ?

Comment restituer dynamiquement des vues partielles avec jQuery dans ASP.NET MVC ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-03 00:54:03585parcourir

How to Render Partial Views Dynamically with jQuery in ASP.NET MVC?

Rendu de vues partielles avec jQuery dans ASP.NET MVC

Les vues partielles sont un moyen pratique de modulariser votre application ASP.NET MVC en décomposant une vue complexe en plus petites , composants réutilisables. Bien qu'il soit courant de les restituer directement dans la vue parent, il peut y avoir des scénarios dans lesquels vous devez le faire de manière dynamique à l'aide de jQuery.

Comment rendre une vue partielle avec jQuery

Contrairement à une idée fausse, vous ne pouvez pas restituer directement une vue partielle en utilisant uniquement jQuery. Cependant, vous pouvez appeler une méthode d'action qui renvoie une vue partielle comme réponse, puis utiliser jQuery pour insérer le résultat dans votre page.

L'exemple de code suivant montre comment y parvenir :

<code class="javascript">$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    var $detailDiv = $('#detailsDiv'),
        url = $(this).data('url');

    $.get(url, function(data) {
        $detailDiv.replaceWith(data);         
    });
});</code>

Ce code suppose ce qui suit :

  • Un bouton avec une classe js-reload-details et un attribut de données nommé data-url. L'attribut data-url doit contenir l'URL de la méthode d'action qui restitue la vue partielle.
  • Une vue partielle avec un attribut ID de détailsDiv.
  • Une méthode d'action nommée Détails dans le contrôleur utilisateur . L'action Détails prend un paramètre entier et renvoie une vue partielle nommée "UserDetails".

Exemple de code

Dans la vue parent, vous devez inclure un bouton avec l'attribut data-url approprié :

<code class="html"><button data-url='@Url.Action("details","user", new { id = Model.ID } )'
        class="js-reload-details">Reload</button></code>

La vue partielle UserDetails doit contenir le HTML souhaité :

<code class="html"><div id="detailsDiv">
    <!-- ...content... -->
</div></code>

En combinant ces éléments, vous pouvez charger et afficher dynamiquement des vues partielles en utilisant jQuery dans ASP.NET MVC.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn