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
Libérer: 2024-11-03 00:54:03
original
589 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

La vue partielle UserDetails doit contenir le HTML souhaité :

<code class="html"><div id="detailsDiv">
    <!-- ...content... -->
</div></code>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal