c# - 在 Repeater 中搜索 ImageButton

Question

我有一个 TextBox:

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

和一个带有 ImageButtons 的 Repeater:

<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，类似于此示例:

我会在 Search-TextBox 中输入 00，所有包含 00 的 ImageButtons 都将是显示。问题是我必须在每次 KeyDown 之后执行此操作。

Answer 1

这是一个复杂的场景，可以通过两种不同的方式实现。

1. 通过连接搜索文本框的服务器端文本更改事件来使用 ajax 回发。在此服务器端事件中，您将使用搜索文本框文本值从数据库中获取记录。可以在以下 URL 中找到使用 gridview 的类似场景示例:Server-side Search
2. 第二种方法更受欢迎，它调用服务器端方法直接从 JavaScript 或 jquery 获取记录。这可以非常快速。可以在以下 URL 中找到使用 gridview 的此类场景示例:Search using client-side code .

对于第二个选项，您必须连接客户端 keyup 事件以在从 jquery 对 Web 服务方法进行 ajax 调用之前获取搜索文本，并且仅在用户有输入最少数量的字符，如 2 或 3 或 4 或任何您认为合适的数字。服务器端的 web 服务方法将为您的转发器控件返回搜索项目的 JSON 集合。 最后，在 jquery ajax 调用的成功事件中，您需要用搜索项填充转发器项。

一个建议

此外，作为使客户端解决方案更容易实现的另一个建议，您可以在 Web 服务方法中创建一个 html 字符串，然后在 jquery ajax 调用成功事件中将 div 的 innerHTML 设置为此 html，所以在 jquery 中，成功事件中只有一行代码会填充转发器控件。这比从 Web 服务返回 JSON 集合更容易，然后在 jquery ajax 调用的成功事件中，您需要使用 DOM 操作创建/填充 html 到转发器控件中，这需要一些 jquery。