Question

我有一个表格，列出了在我的网站上注册的用户。该页面包含一个类似于过滤器的文本框：只要用户在文本框中键入内容，该表就会被过滤，因此只检索其名称包含文本框值的用户。

这是使用jquery完成的。它发布到一个控制器动作，该动作又返回一些json，它被解析，以便更新用户列表。这很有效。

现在，此用户列表中必须包含分页。非常简单，只有上一个和下一个按钮，它们将获取前一个或下一个10个结果。这些是Ajax.RouteLinks。但是，我当然必须将正确的pagenumber发布到控制器操作，因此它知道要检索哪些用户。这就是问题所在：我不知道该怎么做。我从哪里获得这个值？我试过了：

在控制器中设置ViewData键，但是当我返回Json结果时，该值永远不会更新。
我尝试在json结果中添加上一页和下一页的数字，但那又怎么样？ Ajax.RouteLink生成一个包含各种数据的长链接，我看不出如何使用jquery轻松修改那里的某些参数
我尝试生成链接服务器端并将其添加到Json，但我无法从控制器访问ViewContext，这是在我的操作中实例化新的AjaxHelper所需的。或者其他什么。

如果有帮助，下面是一些代码。正如您在jquery代码中看到的那样，正确的页面编号会在那里被警告。但如何进入routelink？或任何其他聪明的方法来实现这一目标？谢谢！

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 Plugin

要使用文本框进行过滤，您必须执行以下操作：在插件源中查找此行

// Binding the Button events

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

现在用keyup替换点击部分，然后你去。

我建议同时使用最少的字母，以便只过滤“a”而不是过滤器在指定的长度后应用，例如：textbox.val().length > 3

使用jquery更新Ajax.RouteLink参数

1 个答案: