add google custom search in dot net
Welcome, Guest

by Nitin on Friday, 08 October 2010
add google custom search in dot net

ASP.NET's site map feature and SiteMapPath, TreeView, and Menu controls help visitors navigate your site and find the information they are looking for. However, ASP.NET does not provide any built-in functionality for search, which is the most common way people find information online. This is unfortunate because it gives ASP.NET developers

the impression that search is not essential, but that couldn't be farther from the truth. Companies like Google and Yahoo! have made search part of the de facto website user interface. Web giants like Amazon.com, ESPN.com, eBay.com, and CNN.com all share one thing in common - a prominent search bar at the top of each and every page. People expect a search box on a website as much as they expect a close icon in the upper right corner of their windows.


Implementing a search engine is no easy task. It involves creating and maintaining an index and indexing content that may reside in a variety of locations (in a database

or on the file system) and in a variety of formats (text, PDF, Microsoft Word documents, and so on). And implementing a general purpose search engine that works across different configurations is even more complex, so I understand why Microsoft omitted a Search control from the Toolbox.


A simpler alternative is to use Google's Custom Search Engine (CSE). Normally, when you search Google the results are pulled from their master index that includes millions of websites. With the CSE you can constrain the search results to a specified set of websites. What's more, you can add a CSE search box to your site and have the results displayed on a page in your site.

There is no such thing as a free lunch, and Google's CSE is no exception. The search results displayed on your site include a handful of text ads at right, top and right, or top and bottom of the search results. (Non-profits, universities, and government agencies may omit these ads.) The good news is that you can associate your CSE account with a Google AdSense account and make money when users click the ads shown in the CSE results. Another option is to use SiteSearch, which is Google's ad-free version of its CSE. Pricing starts at $100 per year and goes up from there depending on the number of pages indexed and the number of searches performed.

This article provides step-by-step instructions on how to use Google's CSE to implement search on an ASP.NET website. In particular, it shows the steps I took to add search to my blog, ScottOnWriting.NET.

Getting Started with the Google Custom Search Engine

Start by visiting the Google's Custom Search Engine homepage and clicking the "Create a Custom Search Engine" button. This takes you to a one-page form that prompts you for the name of your custom search engine, a description, and sites to include in your search. You can configure the CSE to search just particular URLs, parts of sites, entire sites, or entire domains. For example, to search just .aspx pages in your site enter http://www.example.com/*.aspx in the Sites to Search textbox. Because I want to search all pages on my blog (http://www.ScottOnWriting.NET/sowBlog/) I entered the string www.scottonwriting.net/sowBlog/*.

Figure 1: Specify the sites to include in your CSE results.

Specify the sites     to include in your CSE results.

Once you've entered the sites to search and answered the other questions on this form, click Next. This takes you to a page where you can test out your custom search engine by entering queries and viewing the results. From the test page click the Finish button to create the custom search engine.

When testing your custom search engine you may not get back the results you expect. Keep in mind that the search results returned by CSE are a subset of those found in Google's master index. Therefore, there will be a delay between when you add a new page to your site and when it appears in the CSE. Moreover, any pages that are not available to anonymous users, or are otherwise omitted from search engines due to a Robots.txt file or other factors, will not be included in the results.

Adding a Custom Search Engine to Your Website

After creating your custom search engine you are taken to the My Search Engines page. From here you can manage your custom search engines and view usage statistics.

Figure 2: Manage your custom search engines and view usage statistics from this page.

Manage your custom search engines and view usage statistics from this page.

Click the "control panel" link. This takes you to a multi-tabbed page where you can edit your custom search engine's basic information, change what sites are included in the results, see how many pages are included in the index, and add refinements to help users narrow their search results.

The control panel's Code tab provides the HTML and JavaScript

you need to embed in your site in order to show the CSE search box. You can configure the results to be shown on Google's website or to host them on your own site. As the screenshot below shows, there are two options for hosting the results on your website:


  • Showing them in an <iframe>
  • Showing the results in an overlay

The <iframe> option provides users with the typical search experience: they enter their query in a search box and, on submission, are taken to a different page and shown the results. Consequently, this approach requires that you create a web page on your site to display the search results. Because the results are loaded using an <iframe> that gets its content from a remote server (namely, Google's), no server-side code is needed to display these results. Therefore, the search results page can be implemented as an ASP.NET page (.aspx) or an HTML (.htm) page.

The overlay option displays the search results on the same page from where the search was performed, laying the results over the current page's content using a modal HTML element. You cannot make any AdSense income from the ads in the search results shown in the overlay. Furthermore, to use the overlay option you must first sign up to use Google's free AJAX Search API.

I decided to use the <iframe> option for my blog because it implements the search experience users are most accustomed to.

Figure 3: Generate the markup and script to display the search box and results in your website.

Generate the markup and script to display the search box and results in your website.

The search box and search results markup are displayed in textboxes on the Code tab. Note that if you select the <iframe> option (as I did in the screenshot above) then you need to also provide the URL to the search results page on your site. I created a new HTML page named SearchResults.htm to display the results.

Copy the markup for the search box and paste it into your website wherever you want the search box to appear. I recommend adding it to your master page so that the search box appears on every page in your site. Next, open the page you created to display the results and add the markup for the search results.

That's all there is to it!

It's easy to customize the appearance of the search box and search results. You can choose among different search box displays and adjust the search results colors from the "Look and feel" tab.

The following screenshot shows the search box on my blog.

Figure 4: A search box is displayed at the top of every page on my blog.

A     search box is displayed at the top of every page on my blog.

Entering a query into the search box and clicking "Search" sends the user to the results page.

Figure 5: A search box is displayed at the top of every page on my blog.

A     search box is displayed at the top of every page on my blog.

Embedding the Search Box in an ASP.NET Page with a Postback Form

One challenge with adding the Google CSE to an ASP.NET website is that the search box markup is implemented as a form. The search box markup suggested by Google for my blog follows:

04.      id="cse-search-box">
05.  <div>
06.    <input type="hidden" name="cx" value="010199128167657050181:ztmz7aqoddc" />
07.    <input type="hidden" name="cof" value="FORID:11" />
08.    <input type="hidden" name="ie" value="UTF-8" />
09.    <input type="text" name="q" size="31" />
10.    <input type="submit" name="sa" value="Search" />
11.  </div>
13.<script type="text/javascript"
14.      src="/http://www.google.com/coop/cse/brand?form=cse-search-box&;lang=en"></script>

Most ASP.NET pages already have a postback form present, which complicates integrating the search box form into your ASP.NET pages. In my first attempt at adding the search box I stripped off the <form> tags from Google's suggested markup, placing the <input> elements within the page's existing postback form:

01.<form runat="server">
02.    ...
03.    <input type="hidden" name="cx" value="010199128167657050181:ztmz7aqoddc" />
04.    <input type="hidden" name="cof" value="FORID:11" />
05.    <input type="hidden" name="ie" value="UTF-8" />
06.    <input type="text" name="q" size="31" />
07.    <input type="submit" name="sa" value="Search" />
08.    ...

This displays the search box, but clicking the Search button triggers a postback. That won't do.

Because the <form> uses the action="get" behavior it sends its form fields through the querystring. Therefore, we can view the search results by visiting the URL directly. For example, to see the search results for the term "ASP.NET" visit:


To take advantage of this fact I updated the suggested search box markup to contain just two <input> elements: one for the query text and a Search button. Next, I added a client-side onclick event handler to call a JavaScript function that redirects the user to the search results URL.

1.<input type="text" id="q" name="q" size="15" />
2.<input type="button" name="sa" value="Search" onclick="SearchSite();" />

The SearchSite function is shown below:

1.function SearchSite()
4.  cx=010199128167657050181%3Aztmz7aqoddc&cof=FORID%3A11&ie=UTF-8&q=' +
5.  document.getElementById('q').value + '&sa=Search';

An alternative approach, which would work just as well, would be to replace the <input> tags with TextBox and Button Web controls. Next, you could create a server-side Click event handler that used a Response.Redirect to send the user to the search results page. The JavaScript approach, while a bit more cumbersome, saves a trip to the web server.

This is a good first stab at the problem but suffers from two problems. First, the search term is copied into the search results page URL directly. Consider what would happen if the user entered a search term with an ampersand (&), such as Scott&Jisun. It would results in a querystring like SearchResults.htm?...&q=Scott&Jisun&sa=.... As you can see, the CSE would think the search term was just Scott. The text after the ampersand (Jisun) is assumed to be a separate querystring field. To remedy this faulty behavior we need to escape the user's search query. ASP.NET includes the handy Server.UrlEncode method, but that's a server-side method. A bit of searching turned up a JavaScript equivalent: JavaScript URL encoding and decoding.

The second problem is that the JavaScript that redirects the user to the search page only executes when the Search button is clicked. If the user types in the search query and hits enter the postback form is submitted. To fix this I created a client-side onkeypress event handler for the search box. If the Enter key is pressed while the focus is in the search box the SearchSite function is called.

The complete markup and script for these enhancements follows:

Listing 1: Search Box Markup to Appear within the Postback Form

1.<input type="text" id="q" name="q" size="15"
2.       onKeyPress="return submitenter(this,event)" />
3.<input type="button" name="sa" value="Search" onclick="SearchSite();" />

Listing 2: The Relevant JavaScript

01.// Function retrieved from: http://cass- hacks.com/articles/code/js_url_encode_decode/
02.function URLEncode (clearString) {
03.  var output = '';
04.  var x = 0;
05.  clearString = clearString.toString();
06.  var regex = /(^[a-zA-Z0-9_.]*)/;
07.  while (x < clearString.length) {
08.    var match = regex.exec(clearString.substr(x));
09.    if (match != null && match.length > 1 && match[1] != '') {
10.        output += match[1];
11.      x += match[1].length;
12.    } else {
13.      if (clearString[x] == ' ')
14.        output += '+';
15.      else {
16.        var charCode = clearString.charCodeAt(x);
17.        var hexVal = charCode.toString(16);
18.        output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
19.      }
20.      x++;
21.    }
22.  }
23.  return output;
26.function SubmitOnEnter(myfield, e)
28.    var keycode;
29.    if (window.event)
30.        keycode = window.event.keyCode;
31.    else if (e)
32.        keycode = e.which;
33.    else
34.        return true;
35.    if (keycode == 13)
36.    {
37.        SearchSite();
38.        return false;
39.    }
40.    else
41.        return true;
43.function SearchSite()
46.28167657050181%3Aztmz7aqoddc&cof=FORID%3A11&ie=UTF-8&q=' +
47.URLEncode(document.getElementById('q').value) + '&sa=Search';


Every website with more than a few web pages should have a site search engine. Your visitors expect to be able to search your site and search is the first thing they'll try when they are at your site but can't find what they're looking for. A quick way to add search to your site is to use Google's Custom Search Engine tool, which allows you to search against Google's master index but pare down the results to only those found in a select set of websites. The CSE search box and results can be embedded within your website, providing your visitors with a fully functional site-wide search experience. 




Nitin Jain

Blogger Image
My Blog Title

Product Engineering, software engineering company, Product Development, Product Migration, Product Re-engineering, Product Maintenance, Product Testing Commercial Application Development, Business Software development, commercial software for startups, Application Support and Maintenance, software testing Product Maintenance, Outsource product maintenance, product support and maintenance Product Migration, Product Re-engineering, product re-engineering services Product Research, Product Engineering, UI Prototyping Services Software Testing Services, Quality Assurance services, professional software testers, Load Testing, Functional Testing, Cross Platform, Browser Testing, Test Automation, Testing Tools, software quality analysis Functional Testing Services, software quality analysis, Software Testing Services, Application Testing Services, Functional Testing Types Automated Testing, Automated Testing Services, automation testing, test script development, Automation Test Tools, outsource automation testing Load Testing, Performance Testing Services, Load Testing Tools Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Benefits of IT Outsourcing, Offshore Software Development companies, offshore software development firms Outsource planning, IT outsourcing, IT development services, offshore IT companies, offshore software development Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering Offshore Software Development, Outsource software services, offshore outsourcing services, offshore software development services, IT outsourcing services, software quality assurance services, Offshore IT services, Custom Application Development Services, Offshore Product Engineering