Mise à jour des paramètres Ajax.RouteLink avec jquery

Question

J'ai un tableau qui répertorie les utilisateurs enregistrés sur mon site Web. La page contient une zone de texte qui agit comme un filtre: dès qu'un utilisateur tape quelque chose dans la zone de texte, la table est filtrée, de sorte que seuls les utilisateurs sont récupérés dont le nom contient la valeur de la zone de texte.

Ceci est fait en utilisant jquery. Il envoie un message à une action du contrôleur, qui renvoie à son tour un fichier json, qui est analysé afin que la liste des utilisateurs soit mise à jour. Cela fonctionne très bien.

Maintenant, cette liste d'utilisateurs doit avoir une pagination. Assez simple, seulement les boutons précédents et suivants, qui iront chercher les 10 résultats précédents ou suivants. Ce sont Ajax.RouteLinks. Cependant, je dois bien sûr poster le pagenumber correct à l'action du contrôleur, afin qu'il sache quels utilisateurs récupérer. Voilà le problème: je ne sais pas comment faire. D'où puis-je obtenir cette valeur? J'ai essayé:

• Définir une clé ViewData dans le contrôleur, mais comme je renvoie un résultat Json, cette valeur n'est jamais mise à jour.
• J'ai essayé d'ajouter les pagenumbers précédent et suivant dans le résultat de json, mais alors quoi? Le Ajax.RouteLink génère un long lien avec toutes sortes de données, je ne vois pas comment je peux utiliser jquery pour modifier facilement certains paramètres là-bas
• J'ai essayé de générer le lien côté serveur et l'ajouter à Json, mais Je ne peux pas accéder au ViewContext à partir du contrôleur, ce qui est nécessaire pour instancier un nouveau AjaxHelper dans mon action. Ou peu importe.

Si cela aide, voici une partie du code. Comme vous pouvez le voir dans le code jquery, les pagenumbers corrects SONT alertés là. Mais comment l'obtenir dans le routelink? Ou tout autre moyen intelligent pour y parvenir? Merci!

Code jquery:

function searchUsers() { 
    $.post("/Search/Users", $("#searchUsersForm").serialize(), function(data) { 
    $('#searchResultsTable tr').remove(); 
    $.each(data.Result, function(index, result) { 
     $('#searchResultsTable').append('<tr><td>' + result.Username + '</td></tr>'); 
    }); 
    if (data.PreviousPageNumber != null) 
     alert('previous: ' + data.PreviousPageNumber); 
    if (data.NextPageNumber != null) { 
     alert('next: ' + data.NextPageNumber); 
    } 
    }, "json"); 
} 

Html:

<form id="searchUsersForm"> 
     <input type="text" name="userName" id="userName" onkeyup="searchUsers()" onchange="searchUsers()" /> 
</form> 

<% 
Response.Write("<span class='pagingPrevious'>" + Ajax.RouteLink("< previous", "User-List", new { pageNumber = ((int?)ViewData["PreviousPageNumber"]).Value }, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "profilePageInbox" }) + "</span>"); 

Response.Write("<span class='pagingNext'>" + Ajax.RouteLink("next >", "User-List", new { pageNumber = ((int?)ViewData["NextPageNumber"]).Value }, new AjaxOptions() { InsertionMode = InsertionMode.Replace, UpdateTargetId = "profilePageInbox" }) + "</span>"); 
%> 

Controller:

public ActionResult SearchUsers(string userName) 
{ 
     // fetch data 

     ViewData["PreviousPageNumber"] = userViewModel.PreviousPageNumber; // does not work 
     ViewData["NextPageNumber"] = userViewModel.NextPageNumber; // does not work 
     return this.Json(userViewModel); 
} 

Answer 1

Je viens d'avoir le même pro blem et trouvé une solution assez simple. Après avoir passé plus d'une journée à bricoler avec des tables et des trucs, j'ai téléchargé ce joli composant Telerik Asp.Net MVC Grid.
Comme il n'a pas fait exactement ce que je voulais (filtrage en direct) j'ai écrit un petit plugin JQuery pour gérer cette fonctionnalité manquante Gridfilter Plugin

Pour filtrer avec une zone de texte que vous auriez à faire ce qui suit: Trouver cette ligne dans la source du plugin

// Binding the Button events 

$('.' + opts.applyButtonClass).click(function() { 
    ... 

maintenant remplacer la partie clic avec le bouton et voilà.

je recommande la mise en œuvre d'un minimum de lettres et de sorte que juste un « un » ne serait pas filtrés à la place le filtre est appliqué après une durée spécifiée comme: textbox.val().length > 3