Introduction
In this post, I explain How to implement google search box in asp.net.It's very difficult to create a search engine for a dynamic asp.net website. Google search engine is the best search engine. Here I have explained How to implement google search box in asp.net.
Steps :
Step - 1: Create New Project.
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Add a Webpage and Design for Show Google Search Result.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.Step-3: Sign up & Setup your Search Engine for Google Search.
Go to https://www.google.com/cse/all > Sign up for Google Search > Setup your Search Engine for Google Search.Step-4: Place Google Search Code to the Search Result Page (Where you want to show your result).
Open Search Result Page and place Google Search Code in your page where you want to show google search result.HTML Code
<%-- Here I will Add code for show search result --%>
<script>
(function () {
var cx = '002672153316751420378:ho6psrycb1e';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
'//www.google.com/cse/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
</script>
<gcse:searchresults-only></gcse:searchresults-only>
Step-5: Design & Write Code to your master page for Place Search Box & Implement Search.
Complete HTML Code for Master Page
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="ASPGoogleSearch.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<asp:PlaceHolder runat="server">
<script src="<%: ResolveUrl("~/Scripts/modernizr-2.5.3.js") %>"></script>
</asp:PlaceHolder>
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
<script>
function SubmitOnEnter(searchBox, event) {
var keyCode;
if (window.event) {
keyCode = window.event.keyCode;
}
else if(event) {
keyCode = event.which;
}
else {
return true;
}
if (keyCode == 13) {
// This is for Enter Key
SiteSearch();
return false;
}
else {
return true;
}
}
function SiteSearch() {
document.location.href = "/SearchResult.aspx?q=" +
EncodeText(document.getElementById('q').value); // Here we should use url encode for the user input
}
function EncodeText(value) {
var returnValue = "";
var x = 0;
var regex = /(^[a-zA-Z0-9_.]*)/
while (x < value.toString().length) {
var match = regex.exec(value.substr(x));
if (match != null && match.length > 1 && match[1] != '') {
returnValue += match[1];
x += match[1].length;
}
else {
if (value[x] == ' ') {
returnValue += '+';
}
else {
var charCode = value.charCodeAt(x);
var haxValue = charCode.toString(16);
returnValue += "%" + (haxValue.length < 2? '0':'') + haxValue.toUpperCase();
}
x++;
}
}
return returnValue;
}
</script>
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="jquery.ui.combined" />
</Scripts>
</asp:ScriptManager>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title"><a runat="server" href="~/">your logo here</a></p>
</div>
<div class="float-right">
<%-- Here I am going to add Our search control in the Master Page --%>
<div style="width:300px; text-align:right; margin-bottom:10px;">
<input type="text" value="Search" style="width:200px;"
id="q" name="q" onblur="if(this.value == '') this.value=this.defaultValue;"
onfocus="if(this.value == this.defaultValue) this.value = '';"
onkeypress="return SubmitOnEnter(this, event);" />
<input type="button" value="Search" onclick="SiteSearch();" style="padding:4px; margin:0px;" />
</div>
<section id="login">
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul>
<li><a id="registerLink" runat="server" href="~/Account/Register.aspx">Register</a></li>
<li><a id="loginLink" runat="server" href="~/Account/Login.aspx">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<p>
Hello, <a runat="server" class="username" href="~/Account/Manage.aspx" title="Manage your account">
<asp:LoginName runat="server" CssClass="username" />
</a>!
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" />
</p>
</LoggedInTemplate>
</asp:LoginView>
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About.aspx">About</a></li>
<li><a runat="server" href="~/Contact.aspx">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent" />
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
</div>
</div>
</footer>
</form>
</body>
</html>
Step-6: Run Application.
Related Post :
- how to use google recaptcha in asp.net.
- How to create Google Combo chart with database data in ASP.NET
- How to create Google Column chart with database data in ASP.NET
- How to create google Bar chart with database data in ASP.NET
- How to create google line chart with database data in ASP.NET
- How to create google chart (pie) with database data in ASP.NET
