Rendre la vue partielle à l’aide de jQuery dans ASP.NET MVC

Question

Comment pour rendre la vue partielle à l’aide de jquery ?

Nous pouvons rendre la vue partielle comme ceci :

Comment pouvons nous faire la même chose en utilisant jquery ?

Answer 1

Vous ne pouvez pas rendre une vue partielle en utilisant uniquement jQuery. Toutefois, vous pouvez appeler une méthode (d'action), qui rendra la vue partielle pour vous et l'ajouter à la page à l'aide de jQuery/AJAX. Dans le ci-dessous, nous avons un bouton, cliquez sur gestionnaire de chargement de l'url de l'action à partir d'un attribut de données sur le bouton et déclenche une demande de remplacement de la DIV contenu dans la vue partielle avec la mise à jour de contenu.

$('.js-reload-details').on('click', function(evt) {
    evt.preventDefault();
    evt.stopPropagation();

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

    $.get(url, function(data) {
        $detailsDiv.replaceWith(data);
    });
});

lorsque l'utilisateur contrôleur dispose d'une action nommée détails qui n':

public ActionResult Details( int id )
{
    var model = ...get user from db using id...

    return PartialView( "UserDetails", model );
}

C'est en supposant que votre vue partielle est un conteneur avec l'id detailsDiv , de sorte que vous remplacez simplement la chose entière avec le contenu du résultat de l'appel.

Vue Parent Bouton

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

UserDetails vue partielle

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

Answer 2

J’ai utilisé charge ajax pour ce faire :

Answer 3

@tvanfosson des rochers avec sa réponse.

Cependant, je voudrais suggérer une amélioration à l'intérieur de js et un petit contrôleur de vérifier.

Lorsque nous utilisons @Url aide pour appeler une action, nous allons recevoir une formaté en html. Il serait préférable de mettre à jour le contenu (.html) ne sont pas l'élément actuel (.replaceWith).

Plus sur: Quelle est la différence entre jQuery remplaceavec() et html()?

$.get( '@Url.Action("details","user", new { id = Model.ID } )', function(data) {
    $('#detailsDiv').html(data);
}); 

Cela est particulièrement utile dans les arbres, où le contenu peut être modifié à plusieurs reprises.

Au niveau du contrôleur, on peut réutiliser l'action selon le demandeur:

public ActionResult Details( int id )
{
    var model = GetFooModel();
    if (Request.IsAjaxRequest())
    {
        return PartialView( "UserDetails", model );
    }
    return View(model);
}

Answer 4

Vous aurez besoin créer une Action sur votre contrôleur qui renvoie le résultat rendu du « UserDetails » vue partielle ou du contrôle. Ensuite il suffit d’utiliser un Http Get ou Post de jQuery pour appeler à l’Action pour obtenir le code html affiché à afficher.