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

223

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?

Prasad
la source
Vous pouvez également consulter l'article ci-dessous. tugberkugurlu.com/archive/… Il suit une approche différente et améliore le chemin.
tugberk
Question stupide. UserDetails est-il une vue partielle en tant que page cshtml: UserDetails.cshtml? J'essaie de charger une vue partielle. Et normalement j'utiliserais: @ Html.Partial ("~ / Views / PartialViews / FirstPartialViewTwo.cshtml")
George Geschwend
1
@GeorgeGeschwend, rien n'est stupide ici, jusqu'à ce que quelqu'un puisse y répondre. UserDetails (UserDetails.cshtml) est la vue partielle à l'intérieur du contrôleur utilisateur. Comme dans les commentaires de la réponse marquée, il vaut mieux utiliser Url.Action au lieu de coder en dur le chemin complet de la vue.
Prasad

Réponses:

286

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>
tvanfosson
la source
Je reçois toujours une mauvaise demande avec cet exemple de code que vous avez donné. J'ai copié tel quel et je viens de changer l'action du contrôleur à laquelle il doit aller. Je ne sais pas à quoi sert "l'utilisateur".
chobo2
1
J'ai juste utilisé des noms de contrôleur et d'action "probables" car vous n'avez inclus aucun code que nous pourrions utiliser. Remplacez simplement "détails" par votre action et "utilisateur" par le nom de votre contrôleur.
tvanfosson
1
Merci encore pour une excellente réponse tvanfosson.
une idée de comment cela fonctionnerait avec Razor? essayé $ .get ("@ Url.Action (\" Manifest \ ", \" Upload \ ", new {id =" + key + "})", function (data) {$ ("<div />") .replaceWith (data);});
Patrick Lee Scott
1
@Zapnologica - si vous rechargez la table entière, vous devrez peut-être réappliquer le plugin car les éléments DOM auxquels il était initialement connecté ont été remplacés. Il pourrait être préférable de le connecter à une méthode qui renvoie les données au format
tvanfosson
152

J'ai utilisé ajax load pour ce faire:

$('#user_content').load('@Url.Action("UserDetails","User")');
Prasad
la source
46
En général, je pense que vous feriez mieux d'utiliser l'aide de Url.Action au lieu de coder en dur le chemin. Cela va casser si votre site Web se trouve dans un sous-répertoire plutôt qu'à la racine. L'utilisation de l'assistant résout ce problème et vous permet d'ajouter des paramètres avec des valeurs définies dynamiquement.
tvanfosson
18
Vous pouvez faire $ ('# user_content'). Load ('@ Url.Content ("~ / User / UserDetails")') pour contourner cela - j'utilise souvent cette méthode si j'ai besoin du javascript pour gifler les paramètres de la requête à la fin de l'url
Shawson
Dans cette réponse, UserDetailsest le nom d'une action, pas une vue partielle, non?
Maxim V. Pavlov
4
@Prasad: les URL doivent toujours être évaluées en utilisant à la @Url.Action("ActionName","ControllerName", new { area = "AreaName" } )place le codage manuel .
Imad Alazani
3
@PKKG. @ Url.Action () n'évalue que dans Razor. cela ne fonctionne pas si OP veut mettre son code dans un fichier js séparé et le référencer.
Michael
60

@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);
}
Custodio
la source
11

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 :-)

Peter
la source
Pourquoi avez-vous chacun fonctionné? Comment ça fonctionne? Faites-vous quelque chose comme: data-actionurl = "@ Url.Action (" details "," user ", new {id = Model.ID} data-actionurl =" Another Action "?
user3818229
Non, la fonction each boucle sur tous les éléments html qui ont l'attribut data-actionurl et le remplit en appelant une requête ajax pour la méthode d'action. Donc, plusieurs <div class="renderaction fade-in" ...></div>éléments.
Peter
9

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

Chris Pietschmann
la source
comment définir l'intervalle de temps pour actualiser les données mises à jour dans cette fonction jQuery
Neeraj Mehta
5

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);
        }
DevC
la source
0

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");
        }
Un van
la source
0

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);
    }
Rider Harrison
la source