web-dev-qa-db-fra.com

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

Comment rendre la vue partielle à l'aide de jQuery?

Nous pouvons rendre la vue partielle comme ceci:

<% Html.RenderPartial("UserDetails"); %>

Comment pouvons-nous faire la même chose avec jQuery?

javascriptjqueryasp.net-mvcrenderpartial
213
Prasad

J'ai utilisé ajax load pour faire ceci:

$('#user_content').load('@Url.Action("UserDetails","User")');
145
Prasad

Vous ne pouvez pas rendre une vue partielle en utilisant uniquement jQuery. Vous pouvez cependant appeler une méthode (action) qui rendra la vue partielle et l'ajoutera à la page à l'aide de jQuery/AJAX. Ci-dessous, nous avons un gestionnaire de clic sur le bouton qui charge l'URL de l'action à partir d'un attribut de données du bouton et déclenche une requête GET pour remplacer la DIV contenue 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 utilisateur a une action nommée details qui:

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

    return PartialView( "UserDetails", model );
}

En supposant que votre vue partielle soit un conteneur avec l'ID detailsDiv, vous ne devez donc que remplacer l'intégralité du contenu par 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>

Vue partielle de UserDetails

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

@tvanfosson bascule avec sa réponse.

Cependant, je suggérerais une amélioration dans js et une petite vérification du contrôleur.

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

En savoir plus sur: Quelle est la différence entre replaceWith () et html () de jQuery?

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

Sur le contrôleur, 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);
}
58
Custodio

Une autre chose que vous pouvez essayer (basée sur la réponse de tvanfosson) est la suivante:

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

Et ensuite 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 en utilisant ajax.

Et pour rendre tous les fans sjmansy vous pouvez ajouter un effet de fondu 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;
}

Man I love mvc :-)

10
Peter

Vous devez créer une action sur votre contrôleur qui retourne le résultat de la vue partielle ou du contrôle "UserDetails". Ensuite, utilisez simplement une requête HTTP ou Post de jQuery pour appeler l’Action afin d’obtenir le code HTML affiché.

9
Chris Pietschmann

Utiliser l'appel standard Ajax pour obtenir le même résultat

        $.ajax({
            url: '@Url.Action("_SearchStudents")?NationalId=' + $('#NationalId').val(),
            type: 'GET',
            error: function (xhr) {
                alert('Error: ' + xhr.statusText);

            },
            success: function (result) {

                $('#divSearchResult').html(result);
            }
        });




public ActionResult _SearchStudents(string NationalId)
        {

           //.......

            return PartialView("_SearchStudents", model);
        }
1
DevC

Je l'ai fait comme ça. 

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

Détails Méthode: 

public IActionResult Details()
        {

            return PartialView("Your Partial View");
        }
0
Avan

Si vous avez besoin de référencer une valeur générée dynamiquement, vous pouvez également ajouter des paramètres de chaîne de requête après le @ URL.Action comme ceci:

    var id = $(this).attr('id');
    var value = $(this).attr('value');
    $('#user_content').load('@Url.Action("UserDetails","User")?Param1=' + id + "&Param2=" + value);


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