Total votes: 2
Print: Print Article
Please login to rate or to leave a comment.
Published: 15 Sep 2008
Scott Mitchell shows how to implement searching with Google Custom Search in ASP.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
Figure 1: 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.
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.
- Showing them in an
- Showing the results in an overlay
<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 (.
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.
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.
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.
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:
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:
This displays the search box, but clicking the Search button triggers a postback. That won't do.
<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
SearchSite function is shown below:
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 (
SearchSite function is called.
The complete markup and script for these enhancements follows:
Listing 1: Search Box Markup to Appear within the Postback Form
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.
Scott Mitchell, author of eight ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott works as an independent consultant, trainer, ...
This author has published 16 articles on DotNetSlackers. View other articles or the complete profile here.
Please login to rate or to leave a comment.