Render Partial View Using jQuery in ASP.NET MVC

vous ne pouvez pas rendre une vue partielle en utilisant seulement jQuery. Vous pouvez, cependant, appeler une méthode (action) qui rendra la vue partielle pour vous et l'ajouter à la page en utilisant jQuery/AJAX. Dans ce qui suit, Nous avons un bouton click handler qui charge l'url de l'action à partir d'un attribut de données sur le bouton et déclenche une requête GET pour remplacer le DIV contenu dans la vue partielle par le contenu mis à jour.

$('.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);
    });
});

où le contrôleur de l'Utilisateur a une action nommée détails qui fait:

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

    return PartialView( "UserDetails", model );
}

cela suppose que votre vue partielle est un conteneur avec l'id detailsDiv de sorte que vous venez de remplacer la chose entière avec le contenu du résultat de l'appel.

Bouton De Vue Parent

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

UserDetails vue partielle

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

@ tvanfosson déchire avec sa réponse.

cependant, je suggérerais une amélioration à l'intérieur de js et une petite vérification du contrôleur.

lorsque nous utilisons @Url helper pour appeler une action, nous allons recevoir un html formaté. Il serait préférable de mettre à jour le contenu ( .html ) et non l'élément proprement dit ( .replaceWith ).

plus à propos de at: Quelle est la différence entre le remplacement de jQuery par() et html()?

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

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

au controller nous pouvons réutiliser l'action en fonction du demandeur:

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

une autre chose que vous pouvez essayer (basé sur la réponse de tvanfosson) est ceci:

<div class="renderaction fade-in" 
    data-actionurl="@Url.Action("details","user", new { id = Model.ID } )"></div>

et puis dans la section scripts de votre page:

<script type="text/javascript">
    $(function () {
        $(".renderaction").each(function (i, n) {
            var $n = $(n),
                url = $n.attr('data-actionurl'),
                $this = $(this);

            $.get(url, function (data) {
                $this.html(data);
            });
        });
    });

</script>

cela rend votre @Html.RenderAction utilisant ajax.

et pour faire tout fansy sjmansy vous pouvez ajouter un fade-In effet en utilisant ce css:

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
    opacity: 0; /* make things invisible upon start */
    -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation: fadeIn ease-in 1;
    -o-animation: fadeIn ease-in 1;
    animation: fadeIn ease-in 1;
    -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}

l'Homme que j'aime mvc :-)

vous aurez besoin de créer une Action sur votre Controller qui renvoie le résultat rendu de la vue partielle ou du contrôle" UserDetails". Ensuite, il suffit d'utiliser un Get ou un Post Http de jQuery pour appeler L'Action pour que le html rendu soit affiché.

Je l'ai fait comme ça.

$(document).ready(function(){
    $("#yourid").click(function(){
        $(this).load('@Url.Action("Details")');
    });
});

Détails De La Méthode:

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }