Microsoft hubs(8920128728): How to implement google search box in asp.net

Saturday, August 10, 2019

How to implement google search box in asp.net

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>&copy; <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </div>
        </div>
    </footer>
    </form>
</body>
</html>

Microsoft hubs(8920128728)

Saturday, August 10, 2019

How to implement google search box in asp.net

Step - 1: Create New Project.

Step-2: Add a Webpage and Design for Show Google Search Result.

Step-3: Sign up & 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).

Step-5: Design & Write Code to your master page for Place Search Box & Implement Search.

Step-6: Run Application.

No comments:

Post a Comment

How to register multiple implementations of the same interface in Asp.Net Core?

Report Abuse