Maison > interface Web > js tutoriel > Comment rendre une vue partielle à l'aide de jQuery dans ASP.NET MVC ?

Comment rendre une vue partielle à l'aide de jQuery dans ASP.NET MVC ?

Mary-Kate Olsen
Libérer: 2024-11-05 08:27:02
original
756 Les gens l'ont consulté

How to Render a Partial View Using jQuery in ASP.NET MVC?

Rendre une vue partielle à l'aide de jQuery dans ASP.NET MVC

Dans ASP.NET MVC, les vues partielles sont généralement rendues à l'aide de la méthode Html.RenderPartial(). Cependant, il peut y avoir des scénarios dans lesquels vous devez plutôt restituer la vue partielle à l'aide de jQuery.

Approche utilisant jQuery et Ajax

Pour restituer une vue partielle à l'aide de jQuery, vous pouvez procéder comme suit :

  1. Créer une méthode d'action : Définissez une méthode d'action dans votre contrôleur pour renvoyer la vue partielle.
  2. Lier un gestionnaire d'événements jQuery : Liez un gestionnaire d'événements de clic à un bouton ou un lien sur votre page.
  3. Appelez la méthode d'action : Dans le gestionnaire d'événements, utilisez $.get() ou $.post() pour envoyer une requête Ajax à la méthode d'action.
  4. Remplacer Partial View Div : Lorsque la méthode d'action renvoie une vue partielle, utilisez $.replaceWith() ou $.html() pour remplacer l'existant contenu du div à vue partielle sur la page.

Exemple :

<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

Dans cet exemple, un bouton avec la classe js-reload-details déclenche le gestionnaire d'événements click. Le gestionnaire d'événements charge la vue partielle à l'aide de $.get() et remplace le contenu du div par l'identifiant detailsDiv par le code HTML renvoyé.

Action du contrôleur :

<code class="csharp">public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}</code>
Copier après la connexion

Bouton d'affichage parent :

<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

Vue partielle des détails de l'utilisateur :

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

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 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