Implement google custom search engine in ASP.Net MVC

Table of Content

  1. Introduction
  2. Google Custom search engine (CSE)
  3. Getting Started with Google custom search engine
  4. Customize CSE
  5. Implement in ASP.Net MVC
  6. Summary

Introduction

Search is the most common and must to have feature in every website. Google has emerged as the synonyms of Search. Here in this post, I have described how to implement a full running search functionality within an hour using google custom search engine (CSE). It will work for all whether it is a small site, medium or large. Let's go with me and see how easy it is.

Google custom search engine (CSE)

Google Custom Search,  allow you to add a search box to your website's  homepage to help your visitors to find what they need on your website. You have a great website having articles, contents, videos and want to make theses easily available to your visitors. Here google custom search engine comes in the picture. It allows your visitors to search the content within your website they are looking for. CSE works well for small, medium and large web application. Google Custom search engine is freely available and also as a premium service.

Getting started with google custom search engine

You need a google account to get started. If you do not have, first create a google account.

Go to https://cse.google.co.in/cse/ and click on button Create a custom search engine.

Create google custom search engine

Add the Website URLs in site to search text box you want to search. If you want to search entire website then add URL of the home page. You can also add multiple URLs.

Create custom search engine

After entering the information click on create.

Customize CSE

You may need to customize the default behaviour of custom search engine to match with look and feel of your website. Google provide functionality to change the default behaviour of the custom search engine. Google provide different layouts, themes for Web search and image search customization. After creating CSE you need to edit the same in order to add customization.

customize custom search engine

This image describes how you can change look and feel, themes. Similarly, you can also change the complete look of how search result will be displayed in your site and other attributes.

Make the changes as per your need and click on save and Get Code button.

Implement in ASP.Net MVC

Add Controller

Add a search controller in your project and create a method Search ().

public class SearchController : Controller
    {
        public ActionResult Search(string SearchString)
        {
            ViewBag.SearchString = SearchString;
            ViewBag.Title = "Search";
            return View("SearchResult");
        }
    }

This method takes searchString parameter, searchStraing holds the value user is looking for.

Add search form

Now let's add a form to accept search string from the user. You may add this code in any page, you want but good to have it on Layout page so user can search using this from entire website.

<div class="searchControl">
 @using (Html.BeginForm("Search", "Search", FormMethod.Get)) 
 {
 <div class="input-group">
 <input type="text" name="SearchString" class="form-control" placeholder="type something and hit enter">
 <span class="input-group-btn">
 <input class="btn" type="submit" value="Search!"/>
 </span>
 </div><!-- /input-group -->
 }
 </div>

If you are using simple HTML page (for now MVC websites) add simple form tag with action attribute in place or razor syntax.

Now when the user hits enter or click on search button this form will be submitted to the server. Search method in search controller will handle the request on form submit and display SearchResult view.

Add search result page

Finally, add a view "SearchResult.cshtml" in search directory under views and add the code taken from google in customize CSE section. Here is sample code. You need to place your code.

@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container"">
<div class="row"> 
<div class="col-md-12"> 
<script>
//register call back once custom search result gets load
(function () {
window.__gcse = { 
callback: searchCallback 
};
function searchCallback() {
$('#gsc-i-id1').focus();
 $('#gsc-i-id1').val('@ViewBag.SearchString');
 $(".gsc-search-button").trigger('click');
 } 
var cx = 'xxxxxxxxxxxxxxxxxx:atjybvayeme'; 
var gcse = document.createElement('script'); 
gcse.type = 'text/javascript';gcse.async = true; 
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//cse.google.com/cse.js?cx=' + cx; 
var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(gcse, s); })(); 
</script> 
<gcse:search>
</gcse:search> 
</div> 
</div>
</div>

Explanation: Note the script section I have registered a callback function searchCallback, which will be executed when custom search engine loads. You need to this code manually as google does not provide it by default.

Now also note the function searchCallback(), I have set the value of searchString in the textbox provided by Google custom search and trigger click event of default search button. Now control in on google's hand. It search entire website based on indexed pages and looks for requested search string and displays result back on our page.

Here it is how works for Modern Pathshala

Search result

Summary

So this article describes the implementation of Google custom search engine in ASP.Net MVC website and a brief about the custom search engine. If you have further concern and questions then comment below in comment section. Subscribe at the bottom of the page for more updates.

Article tagged as
Author
Author: Ashish Shukla
Published On: 19/12/2015
Last revised On: 19/12/2015
View all articles by Ashish Shukla

Share this post

Comments

Comments
comments powered by Disqus

Navigation

Social Media