用jquery更新Ajax.RouteLink參數

Question

我有一個表，列出了在我的網站上注冊的用戶。 該頁面包含一個類似於過濾器的文本框：用戶在文本框中輸入內容后，表格就會被過濾，因此僅檢索名稱包含文本框值的用戶。

這是使用jquery完成的。 它發布到控制器操作，該操作又返回一些json，該json被解析，以便更新用戶列表。 這很好。

現在，此用戶列表中必須包含分頁。 很簡單，只有前一個和下一個按鈕，這將獲取上一個或下一個10個結果。 這些是Ajax.RouteLinks。 但是，我當然必須將正確的頁碼發布到控制器操作中，以便它知道要檢索哪些用戶。 問題就出在這里：我不知道該怎么做。 我從哪里得到這個價值？ 我努力了：

• 在控制器中設置ViewData鍵，但是當我返回Json結果時，此值永遠不會更新。
• 我嘗試在json結果中添加上一頁和下一頁的頁碼，但是那又是什么呢？ Ajax.RouteLink生成包含各種數據的長鏈接，我看不到如何使用jquery輕松修改其中的某些參數
• 我試圖生成服務器端鏈接並將其添加到Json，但是我無法從控制器訪問ViewContext，這在我的操作中實例化一個新的AjaxHelper是必需的。 管他呢。

如果有幫助，下面是一些代碼。 如您在jquery代碼中所看到的，在那里警告了正確的頁碼。 但是如何使它進入路由鏈接？ 或任何其他聰明的方法來實現這一目標？ 謝謝！

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

控制器：

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

我只是遇到了同樣的問題，並且找到了一個簡單的解決方案。 在花了一天多的時間修補表格和東西之后，我下載了這個漂亮的組件Telerik Asp.Net MVC Grid 。
由於它沒有完全實現我想要的功能（實時過濾），因此我編寫了一個小型JQuery插件來處理此缺少的功能Gridfilter插件

要使用文本框進行過濾，您必須執行以下操作：在插件源代碼中找到此行

// Binding the Button events

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

現在將click部分替換為keyup，然后就可以了。

我也建議實現最少的字母，這樣就不會過濾“ a”，而是在指定的長度后應用過濾器，例如： textbox.val().length > 3