web-dev-qa-db-fra.com

Utilisation de la pagination en vue partielle, asp.net mvc

J'apprécierais beaucoup si quelqu'un pouvait me conseiller sur les points suivants:

@model PagedList.IPagedList<Items>
@using PagedList.Mvc; 
 @foreach (var item in Model)
          {//displaying data}

mon téléavertisseur ressemble à ceci:

@Html.PagedListPager(Model, page => Url.Action("Index", new { humanID = ViewBag.HumanID, page = page }),
                                                             new PagedListRenderOptions
                                                             {
                                                                        LinkToFirstPageFormat = "<<",
                                                                        LinkToPreviousPageFormat = "prev",
                                                                        LinkToNextPageFormat = "next",
                                                                        LinkToLastPageFormat = ">>",

                                                              })

Le problème est que lorsque je clique sur la page suivante, il est renvoyé vide, sans mon _Layout. Je ne voudrais pas recharger _Layout tout le temps. Existe-t-il un moyen d'utiliser Ajax.ActionLink pour un pageur? Pour pouvoir UpdateTargedId dans ma vue partielle?

c#asp.net-mvcasp.net-mvc-partialviewpagedlist
11
Gyuzal R

Vous ne pouvez pas utiliser Ajax.ActionLink mais vous pouvez AJAXify les liens. Mettez le pager dans un <div>:

<div id="myPager">
    @Html.PagedListPager(
        Model, 
        page => Url.Action(
            "Index", 
            new { 
                humanID = ViewBag.HumanID, 
                page = page 
            }
        ),
        new PagedListRenderOptions
        {
            LinkToFirstPageFormat = "<<",
            LinkToPreviousPageFormat = "prev",
            LinkToNextPageFormat = "next",
            LinkToLastPageFormat = ">>",
        }
    )
</div>

puis AJAXify les liens:

$(function() {
    $('#myPager').on('click', 'a', function() {
        $.ajax({
            url: this.href,
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#some_grid_container').html(result);
            }
        });
        return false;
    });
});

Notez que dans le callback success, j’ai utilisé $('#some_grid_container'), qui devrait être une sorte de séparation enveloppante autour de votre table.

27
Darin Dimitrov

Il existe toujours un moyen d'implémenter Ajax avec PagedList.

@Html.PagedListPager((IPagedList)Model,
 page => Url.Action("Index", new { humanID= ViewBag.HumanID, page }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(PagedListRenderOptions.PageNumbersOnly,
        new AjaxOptions
        {
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "Get",
            UpdateTargetId = "targetContainer"
        }))

Cette pièce fera une requête ajax et remplacera le contenu dans "targetContainer". Il vous donne beaucoup plus d'options en ce qui concerne l'appel Ajax et la façon dont vous souhaitez que cela soit affiché. 

6
Utkarsh

Configuration de mon projet: MVC4, MvcPaging (PagedList), avec des zones. Cette réponse est orientée vers cette configuration.

Réponse courte:
Lors de la configuration de vos AjaxOptions pour le pager, assurez-vous de définir votre zone (correctement)

new AjaxOptions { UpdateTargetId = "grid-list" , OnBegin = "beginPaging", 
                  OnSuccess = "successPaging", OnFailure = "failurePaging"}
        , new { area = "Admin", controller = "MyController", action = "Index"}

Longue réponse:
L'exemple PagedList montre comment passer à une zone et effectuer une pagination dans une zone, mais ne montre pas d'exemple d'utilisation de la pagination avec une vue partielle.

Le projet exemple contient le code suivant (tiré de _AjaxEmployeeList.cshtml):

}, new AjaxOptions
            {
                UpdateTargetId = "grid-list",
                OnBegin = "beginPaging",
                OnSuccess = "successPaging",
                OnFailure = "failurePaging"
            }, 
    new { controller = "Home", action = "Index", 
        employee_name = ViewData["employee_name"] }))

L'exemple PagedList utilise une table en ligne dans un foreach, vous n'avez donc aucun problème/conflit avec cette installation. 

@using MvcPaging
@model IPagedList<MvcPagingDemo.Models.Employee>
<table class="table table-bordered table-hover">
        @foreach (var item in Model)
        { 
            <tr>
               <td>@item.ID</td>
            </tr>
        }    
</table>

Lors du refactoring de cette table dans une vue partielle (pour encapsuler la logique (et gérer la pagination), j'ai commencé à obtenir un "La vue partielle '_MyPartialView' n'a pas été trouvée ou aucun moteur de vue ne prend en charge les emplacements recherchés"

@using MvcPaging
@using MyProject.Models
@model IPagedList<MyProject.Models.MyModel>
  foreach (var item in Model)
        {
        <div data-task-id="@item.MyModel_ID.ToString()">
            @Html.Partial("_Detail", item)
        </div>
        }

Je suis passé par une série de modifications tentant de forcer la zone dans l'appel Html.Partial (), notamment: 
Modification du traitement du routage, qui ne fonctionnait pas.
Comment définir un itinéraire par défaut (vers une zone) dans MVC
Qualifiant complètement le chemin de la vue partielle, qui fonctionnait mais était laid.
mvc3 - utilisation de vues partielles dans une zone différente
La recherche sur le chargement des vues partielles m'a montré comment le moteur MVC traite les demandes. Cela m'a renvoyé à modifier Ajax Pager, pour envoyer la zone à chaque demande. J'ai essayé d'utiliser une syntaxe similaire à celle de Html.ActionLink. (Cela n'a pas/ne fonctionne pas)

@Html.ActionLink("Admin", "Index", "Admin", new { area = "Admin" }, null)

Cela n'a pas fonctionné, alors, en omettant tout le reste, j'ai reproduit le schéma de configuration du contrôleur, ce qui nous amène à:

new AjaxOptions { UpdateTargetId = "grid-list" ,  OnBegin = "beginPaging", 
                  OnSuccess = "successPaging", OnFailure = "failurePaging"}
           , new { area = "Admin", controller = "MyController", action = "Index"}

Ma leçon personnelle est la suivante: C #! = Razor! = Javascript. Chacun fait les choses légèrement différemment et vous devez savoir à quelle langue correspond votre ligne d'écriture.

2
Lodlaiden