c# - 在中继器中搜索 ImageButton

Question

我有一个文本框:

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

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

建议

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