Telerik blogs

Why Do We Need a Search Functionality in our Website

 Literally, every WebSite, from big eCommerce sites like Amazon.com, down to small blogs or personal sites has an immense need of search functionality. Once your site’s content stars to grow, your visitors will want to be able to search the site for information. Such search utility will make your website more interactive, from a customer’s point of view and will encourage them to stay longer. While there are several main approaches in implementing search functionality, such as Search In a XML, SiteMap or using a Custom Provider, in the following lines, we are going to cover the basics of the ‘Search in the underlying DataBase’ and the advantages, which the Telerik ASP.NET SearchBox migth provide you with.

The Search Scenario

 In this blog post we will be creating a simple search functionality for our site. As for an architecture pattern, we are going to use the online Telerik ASP.Net demos site. Once the user searches for information, we are going to query our DataBase using Entity Framework and display the results as links in the ClientTemplate of RadSearchBox. The control will be populated with data via WebService, where the returned data will be structured. 

The DataBase

 For the sake of the example, we are going to create a simple Table (ControlsTable) adding few columns: ControlID, ControlName, ControlContents and SectionName.

Data Base Image

Querying the DataBase Using Entity Framework

 Entity Framework is an Object/Relational Mapping (O/RM) framework, which provides an automated mechanism for accessing and storing the data in the database. It provides the ability for the developers to retrieve and manipulate data as strongly typed objects using C# or VB.Net.

DataEntities db = new DataEntities();
 
        var q = db.ControlsTables.Where(i =>
                  i.ControlName.Contains(context.Text.Trim()) ||
                  i.ControlContents.Contains(context.Text.Trim()) ||
                  i.SectionName.Contains(context.Text.Trim())
              ).ToList();

 

Each time the user types a character in the input of the control a callback is triggered to the WebService and the underlying database is requested with the above query. The retrieved entries from the database would be the ones, which contain the value that was entered in the input.

Displaying the Results

Regarding the aforementioned structure of our website (similar to the Telerik ASP.Net demos site), we would need to provide the user with the ability to navigate to a specific page where the search criteria is met. This could be easily achieved, using the ClientTemplate of  the ASP.NET SearchBox control and displaying the results as a hyperlinks. In order to provide RadSearchBox with the needed, we have to manage the returned datasource in the WebService in the following manner:

[WebMethod]
    public SearchBoxData GetSearchResults(SearchBoxContext context)
    {
        List<SearchBoxItemData> resultSet = new List<SearchBoxItemData>();
 
        DataEntities db = new DataEntities();
 
        var q = db.RadControlsTables.Where(i =>
                  i.ControlName.Contains(context.Text.Trim()) ||
                  i.ControlContents.Contains(context.Text.Trim()) ||
                  i.SectionName.Contains(context.Text.Trim())
              ).ToList();
 
        foreach (var item in q)
        {
 
            string controlName = item.ControlName.ToString();
            string sectionName = item.SectionName.ToString();
 
 
            string url = string.Format("{0}/{1}/{2}/default.aspx",
                                HttpContext.Current.Request.ApplicationPath,
                                controlName,
                                sectionName);
 
            SearchBoxItemData searchItemitem = new SearchBoxItemData();
            searchItemitem.Text = controlName;
            searchItemitem.Value = url;
            searchItemitem.DataItem["Text"] = sectionName;
 
            resultSet.Add(searchItemitem);
 
        }
        SearchBoxData res = new SearchBoxData();
        res.Items = resultSet.ToArray();
 
        return res;
    }

 

 Then you could easily configure the ClientTemplate of ASP.NET SearchBox control, in order to evaluate the structured data:

<ClientTemplate>
     <a href="#= Value #">
       <span>#= DataItem.Text #</span>
         <span>#= Text #</span>
    </a>
</ClientTemplate>

 

User Experience

 At the end, what we’ve achieved is a quite flexible (agile) search functionality, using a WebService and Entity Framework, which serves out the result in a user-friendly manner.

 Search Animation

What We’ve Learned So Far    

  What we’ve covered with this article is a simple way to implement a search functionality in your website. No matter how much more advanced your real world search scenario is, we believe the RadSearchBox will save you at least half of your development efforts and time. Check out the demos to see what other functionality the control has built-in and don’t hesitate to share what you think below.


Nencho Nenchev
About the Author

Nencho Nenchev

Nencho Nenchev (@nnenchef) started his career at Telerik back in 2012 as a tech support engineer in one of the Telerik ASP.NET Ajax teams. He then passed through the position of a Support Lead and is currently a Product Manager of one of the Kendo UI for jQuery, Telerik UI for ASP.NET Core, and MVC teams. Ever since he joined the company his constant focus is improving and evolving the big product family and providing best in class support to the customers. Apart from work, Nencho enjoys spending time with his family or playing different sports with friends.

Comments

Comments are disabled in preview mode.