Поиск ImageButton в Repeater

Question

У меня есть TextBox:

<asp:TextBox ID="textSearch" runat="server" Width="80" ForeColor="Black" /> 

и Repeater с ImageButtons:

<asp:Panel ID="panRepeater" runat="server" ScrollBars="Vertical"> 
    <asp:Repeater ID="Repeater" runat="server"> 
     <ItemTemplate> 
      <asp:ImageButton ID="imgSearchResult" runat="server" ImageUrl='<%# Eval("ImageUrl") %>'/> 
     </ItemTemplate> 
    </asp:Repeater> 
</asp:Panel> 

В коде позади, я добавить изображения к ImageButtons с помощью этой функции:

private void LoadImages() 
{ 
     string[] filesindirectory = Directory.GetFiles(Server.MapPath("~/Images/ORAS")); 
     List<System.Web.UI.WebControls.Image> images = new List<System.Web.UI.WebControls.Image>(filesindirectory.Count()); 

     foreach (string item in filesindirectory) 
     { 
      System.Web.UI.WebControls.Image image = new System.Web.UI.WebControls.Image(); 
      image.ImageUrl = (String.Format("~/Images/ORAS/{0}", System.IO.Path.GetFileName(item))); 
      images.Add(image); 
     } 

     Repeater.DataSource = images; 
     Repeater.DataBind(); 
} 

Я хочу иметь возможность использовать арки и отображать только хотел ImageButtons аналогично этому примеру:

Я напечатал бы в 00 в Search-TextBox и все ImageButtons, которые содержат 00 будут показаны. Дело в том, что я должен был бы сделать это после каждого KeyDown.

Answer 1

Это сложный сценарий и может быть реализован двумя различными способами.

1. Использование ajax postback путем подключения текстового поля с текстовым изменением текста на стороне сервера. В этом случае на стороне сервера вы получите записи из базы данных, используя текстовое поле текстового поля поиска. Пример аналогичного сценария с использованием gridview можно найти по этому URL-адресу: Server-side Search
2. Второй подход, который более предпочтителен, вызывает метод на стороне сервера для получения записей непосредственно из JavaScript или jquery. Это может быть очень быстро и быстро. Пример такого сценария с использованием gridview можно найти по этому адресу: Search using client-side code.

Для второго варианта, вы должны Подвод на стороне клиента keyup событие, чтобы получить искомый текст, прежде чем сделать вызов AJAX для метода веб-службы из JQuery, а также делать только поиск, если пользователь имеет вход минимальное количество таких символов, как 2 или 3 или 4, или то, что вы считаете хорошим. Метод веб-службы на стороне сервера возвращает коллекцию JSON из найденных элементов для вашего элемента управления ретранслятора. Наконец,, в случае успешного вызова jquery ajax вам нужно будет заполнить элементы повторителя элементами поиска.

Предложение

Кроме того, в качестве еще одного предложения, чтобы сделать его проще реализовать на стороне клиента решение, которое вы могли бы создать HTML строку в метод веб-сервиса, а затем в успех случае JQuery Ajax вызова просто установить innerHTML div для этого html, поэтому в jquery только одна строка кода в событии успеха заполнит элемент управления ретранслятора. Это было бы проще, чем возвращать коллекцию JSON из веб-службы, а затем в случае успешного вызова jquery ajax вам нужно было бы создать/заполнить html в элементе управления ретранслятора, используя DOM-манипуляцию, которая потребует некоторого jquery.