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

Chargement de vues partielles avec jQuery dans ASP.NET MVC

Le rendu de vues partielles directement à l'aide de jQuery n'est pas réalisable. Cependant, une solution de contournement impliquant un appel côté serveur et une manipulation jQuery/AJAX peut obtenir le même résultat.

Solution :

1. Configurer un bouton Gestionnaire de clics : Attachez un gestionnaire d'événements de clic à un bouton qui lancera le rendu de la vue partielle.

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

2. Récupérez l'URL de la vue partielle : Obtenez le URL pour la vue partielle à partir d'un attribut de données sur le bouton.

<code class="javascript">    var url = $(this).data('url');</code>

3. Faire une requête AJAX : Utilisez $.get() pour envoyer une requête GET au serveur pour la vue partielle.

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

4. Rendu la vue partielle : Sur le serveur, créez une action dans le contrôleur qui restitue la vue partielle et renvoie le résultat.

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

    return PartialView( "UserDetails", model );
}</code>

5. Mettre à jour le DOM : Remplacez le conteneur DIV dans la vue partielle par le contenu mis à jour à partir de la réponse du serveur.

<code class="javascript">var $detailDiv = $('#detailsDiv');
$detailDiv.replaceWith(data);</code>

Marquage des boutons et de la vue partielle :

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

<!-- UserDetails partial view -->
<div id="detailsDiv">
    <!-- ...content... -->
</div></code>

Remarque :Cette approche repose sur une action côté serveur pour restituer la vue partielle et une requête AJAX pour mettre à jour la page à l'aide de jQuery.

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!