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 de même en utilisant jquery?

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 pour vous et l'ajoutera à la page à l'aide de jQuery / AJAX. Dans ce qui suit, nous avons un gestionnaire de clic de bouton qui charge l'URL de l'action à partir d'un attribut de données sur le bouton et déclenche une demande 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) {
        $detailDiv.replaceWith(data);         
    });
});

où le contrôleur utilisateur a une action nommée détails qui:

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 de detailsDivsorte que vous remplacez simplement le tout par le contenu du résultat de l'appel.

Bouton Affichage parent

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

Userest le nom du contrôleur et le detailsnom de l'action dans @Url.Action(). Vue partielle UserDetails

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

J'ai utilisé ajax load pour ce faire:

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

@tvanfosson bascule avec sa réponse.

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

Lorsque nous utilisons @Urlhelper 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 () de jQuery 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 niveau du 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);
}

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

Et pour faire tout sjmansy fansy, 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;
}

Homme j'aime mvc :-)

Vous devrez créer une action sur votre contrôleur qui renvoie le résultat rendu de la vue ou du contrôle partiel "UserDetails". Ensuite, utilisez simplement un Http Get ou Post de jQuery pour appeler l'action pour que le code HTML rendu soit affiché.

Utilisation d'un appel Ajax standard 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);
        }

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");
        }

Si vous devez 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 @ URL.

    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);
    }