Comment rendre une vue partielle à l'aide de jQuery dans 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>

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>

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>

Vue partielle des détails de l'utilisateur :

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

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!