Пересвязать gridview с помощью AJAX (без обратной отправки)

Question

Я планирую разрешить пользователю открывать модалпопупексендер, содержащий сетку с текстовым полем «Фильтр». Я хочу, чтобы, когда пользователь вводит фильтр, фильтр применяется к сетке, а затем содержимое сетки обновляется, чтобы отразить примененный фильтр - и все это без последующей отправки. Кроме того, в идеале, вид сетки будет фильтроваться при вводе пользователем, а не при нажатии кнопки.

Я предполагаю, что он будет использовать FilterParameters на моем SqlDataSource и UpdatePanel, но кто-нибудь может предложить более подробное объяснение того, как я это сделаю? Также было бы неплохо, если бы используемый мной код был «общим» и мог использоваться с любыми другими GridView и DataSource.

Спасибо

Answer 1

Не могли бы вы обернуть представление сетки в панели обновления, а затем при изменении текстового поля повторно связать источник данных с фильтром?

Answer 2

Вы будете заходить на сервер и запускать запрос каждый раз, когда пользователь вводит букву.Это может стать дорогим очень быстро.Используете ли вы Javascript Framework, как JQuery?Большинство фреймворков будет иметь таблицу данных, которая обернута вокруг тега <table> с такой функциональностью.

Быстрый поиск в Google находит это для jQuery: http://www.datatables.net/ (есть множество других, у dojo и yui тоже есть свои собственные)

Вы можете сделать что-то вроде:

$(document).ready(function(){
  $('#<% = GridView1.ClientID%>').dataTable();
});

Обратите внимание, что это решение также имеет свои недостатки в зависимости от размера набора данных.

Answer 3

Поместите вид сетки в UpdatePanel и TextBox за ее пределами.Добавьте на эту панель скрытую кнопку, являющуюся асинхронным триггером, затем добавьте javascript onchange в текстовое поле, чтобы нажать эту кнопку.

  <asp:Button ID="DoRefresh" style="display:none;" UseSubmitBehavior="false"
 runat="server" OnClick="Recalculate()" />

В Page_Init:

    myTextBox.Attributes.Add("onChange",
"document.getElementById('" + DoRefresh.ClientID + "').click()");

Введите код повторной привязкив Пересчитать ()

Это должно сделать это.Я уверен, что есть гораздо лучшие способы сделать это, но если вы хотите использовать серверные элементы управления, такие как GridView, я думаю, что вы застряли с частичной обратной передачей, чтобы обновить его.Но будьте осторожны, вы уверены, что хотите запускать запрос каждый раз, когда они вводят букву?

РЕДАКТИРОВАТЬ - позвольте мне добавить, что я думаю, используя плагин jQuery или какое-либо другое клиентское решение с ajax, какдругой ответ предполагает, имеет больше смысла, чем делать это таким образом.Это не совсем то, для чего нужны UpdatePanels, и вы будете делать обратную передачу (хотя и частичную) каждый раз, когда они вводят букву.Но обратная передача - единственный способ сообщить серверу код для обновления вашей страницы.