CODEWITHSUNDEEP
c#asp.netrepeater
Kohnarik
Kohnarik

Reputation: 377

Search ImageButton in Repeater

I have a TextBox:

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

and a Repeater with 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>

In code behind, I add the Images to the ImageButtons with this function:

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

I want to be able to search and only display the wanted ImageButtons similar to this example:

Search Example

I would type in 00 into the Search-TextBox and all ImageButtons, which contain 00 will be shown. The thing is that I'd have to do this after every KeyDown.

Upvotes: 2

Views: 464

Answers (1)

Sunil
Sunil

Reputation: 21416

This is a complex scenario and can be implemented in two different ways.

  1. Using ajax postback by hooking up a server-side text changed event of search textbox. In this server-side event, you would get records from database using the search text box text value. An example of a similar scenario using gridview can be found at this URL: Server-side Search
  2. The second approach, which is more prefered is calling the server-side method to get records directly from JavaScript or jquery. This can be very quick and fast. An example of such a scenario using gridview can be found at this URL: Search using client-side code.

For the second option, you have to hookup client-side keyup event to get search text before making an ajax call to a web service method from jquery, and also only do a search if user has input a minimum number of characters like 2 or 3 or 4 or whatever you think is a good number. The web service method on server-side will return a JSON collection of the searched items for your repeater control. Finally, in the success event of jquery ajax call you would need to populate the repeater items with the search items.

A Suggestion

Also, as another suggestion to make it easier to implement the client-side solution you could create an html string in the web service method and then in success event of jquery ajax call just set the innerHTML of a div to this html, so in jquery just one line of code in success event would populate the repeater control. This would be easier than returning a JSON collection from web service and then in success event of jquery ajax call you would need to create/populate html into the repeater control using DOM manipulation which would need some jquery.

Upvotes: 2

Related Questions