SharePoint 2013 Custom Search Result using Visual Studio 2012

Section A - Custom Search Results

We will have our own custom Search results page which will consist of a visual web part containing a User Control.

A.1.        Search Mechanism

Once the SharePoint Search Service is running and has something to crawl, the user will be able to search through the content of the SharePoint website, lists, document libraries and pages. Our search Web part will be shown instead of the OOTB search bar of SharePoint. Upon clicking the search button user will be redirected to the custom search results page. Following query string values are also sent while redirecting to this page which we will use these query strings to call the search on our custom search page.

A.2.        Custom Search Page

This page will have a Visual Web Part containing a User Control containing the Grid view to show the results of the search. The User control will use the REST based service exposed by the SharePoint. The details of the API are as follows:

A.2.a.     Location of the Search Rest service

                The Search REST service is located at the following URI: http://host/site/_api/search

A.3.        Visual Web Part Implementation

 

Go to the file-> Add new project and then Select Empty SharePoint Project. A new solution will be created now right click the project file and add new Visual Web Part to the project.

Your project will look like just as shown in the picture above, now add the following code to the .ascx file in your project.

<%@ Assembly Name="$SharePoint.Project.AssemblyFullNamequot; %>


<%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>


<%@ Import Namespace="Microsoft.SharePoint" %>


<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VisualWebPart1.ascx.cs" Inherits="searchWebPart.VisualWebPart1.VisualWebPart1" %>


Custom Result Page


Search: <input id="query" type="text" /> <input id="searchBtn" type="button" onclick="PerformSearch()" value="button" />


<%-- <asp:Button ID="searchBtn" runat="server" Text="Button" OnClientClick="PerformSearch()" CommandName="test" />--%>


<div id="resultsDiv" style="display:none;"></div>


<div id="products"></div>

Once you have setup the files as mentioned above, deploy the project using visual studio 2012 and it will place the User control in the Visual Web Part in the ControlTemplates folder of the 15 hive. So your web part will appear in the Custom Web Parts category and can be used on any page.

Once the Web Part has been deployed successfully, create a new site page in the site library and add this WebPart to the page. Stay tuned for the next version of this post where I shall show how to use Kendo UI to display the Search Results.