Обновите параметры Ajax.RouteLink с помощью jquery - PullRequest
1 голос
/ 14 сентября 2009

У меня есть таблица, в которой перечислены пользователи, которые зарегистрированы на моем сайте. Страница содержит текстовое поле, которое действует как фильтр: как только пользователь вводит что-то в текстовое поле, таблица фильтруется, поэтому извлекаются только пользователи, имя которых содержит значение текстового поля.

Это делается с помощью jquery. Он отправляет в действие контроллера, которое, в свою очередь, возвращает некоторый json, который анализируется, поэтому список пользователей обновляется. Это прекрасно работает.

Теперь этот список пользователей должен содержать нумерацию страниц. Довольно простые, только предыдущие и следующие кнопки, которые будут получать предыдущие или следующие 10 результатов. Это Ajax.RouteLinks. Однако я, конечно, должен опубликовать правильный номер pagen в действии контроллера, чтобы он знал, каких пользователей извлечь. В этом и заключается проблема: я не знаю, как это сделать. Где я могу получить это значение? Я пробовал:

  • Установка ключа ViewData в контроллере, но когда я возвращаю результат Json, это значение никогда не обновляется.
  • Я попытался добавить предыдущие и следующие номера страниц в результат json, но что тогда? Ajax.RouteLink генерирует длинную ссылку со всеми видами данных, я не понимаю, как я могу использовать jquery для простого изменения какого-либо параметра там
  • Я попытался сгенерировать ссылку на стороне сервера и добавить ее к Json, но я не могу получить доступ к ViewContext из контроллера, который необходим для создания нового AjaxHelper в моем действии. Или что угодно.

Если это поможет, ниже приведен фрагмент кода. Как вы можете видеть в коде jquery, там указаны правильные номера страниц. Но как получить это в Routelink? Или любой другой умный способ добиться этого? Спасибо!

Код запроса:

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);
}

1 Ответ

1 голос
/ 10 мая 2010

У меня была такая же проблема, и я нашел довольно простое решение. Потратив более одного дня на работу с таблицами и прочим, я скачал этот замечательный компонент Telerik Asp.Net MVC Grid .
Так как он не делал то, что я хотел (живая фильтрация), я написал небольшой плагин JQuery для обработки этой отсутствующей функции Плагин Gridfilter

Для фильтрации по текстовому полю вам нужно сделать следующее: Найти эту строку в источнике плагина

// Binding the Button events

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

Теперь замените часть щелчка на keyup, и все.

Я бы порекомендовал также реализовать минимум букв, чтобы не фильтровать только «а», вместо этого фильтр применяется после указанной длины, например: textbox.val().length > 3

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...