EPiServer Search Page introduction
2012-04-05The Anatomy of a SiteSeeker Search page for EpiServer
The objective of this guide is to give you an overview over the process involved in creating a search page in EPiServer. Other examples of setting up mvc or webforms projects can be found here
Installation
Installation can either be done manually or automatically. See Installation section for further details.
This guide will assume that you have run the installer and that the web.config is configured based on the default setup given by the installer.
Configuration
The configuration will typically look like this after you have run the installer:
<siteseeker autoConfigure="true">
<searchIndices>
<add name="exampleSearchIndex" displayName="the example index" url="http://siteseeker-knowledgebase.siteseeker.se/ws/siteseeker-knowledgebase" userName="ws" password="gnus5/dopier" />
</searchIndices>
</siteseeker>
the autoconfigure flag tells EPiServer to run the initialization of the bootstrapper in by loading the InitializeModule component that SiteSeeker ships with at application startup.
Once the system is initialized you will no longer be able to configure the system in code.
Setting the autoconfigure to false will allow you to configure the system in code like below example:
SystemConfiguration configuration = new SystemConfiguration();
configuration.DefaultServices = SetupDefaultServices();
return configuration;
Creating the EPiServer Search page
There is three aspects to creating the Search page. The HTML, codebehind and the deployment.
The HTML
Typically you would want to put the css and javascript needed for SiteSeeker in the header.
<head>
<title></title>
<link href="siteseeker-example-site.css" rel="stylesheet" type="text/css">
<%var helper = HtmlHelperFactory.Get<XHtmlHelpers>();%>
<%= helper.SiteSeeker_Css() %>
<%= helper.SiteSeeker_Javascripts(SearchIndexName)%>
</head>
The above code creates a instance of the registered html helper. Note that if you used autoconfigure = true then the htmlhelper would be the default xhtmlhelpers implementation. This can be overriden through the bootstrapping process.
The helper generates the siteseeker.css stored as an embedded stylesheet shipped with the sitesseeker.dll.
The javascript for the siteseeker needs to know which search index the specific page is working with, as the script will hook up httphandlers which in turn will communicate with the SiteSeeker search engine.
<form action="SimpleSearchWithPost.aspx" id="form1" method="post" runat="server">
<div class="ess-searchForm ess-box">
<%=helper.FormSearchBox(SearchResponse.UserQuery)%>
</div>
<%=helper.ResultQueryRefinements(SearchResponse.QueryRefinements, true)%>
<%=helper.SpellingSuggestions(SearchResponse.SpellingSuggestions)%>
<%=helper.ResultBestBets(SearchResponse.Results.First().BestBets)%>
<%=helper.Result(SearchResponse.Results.First())%>
<%=helper.ResultFacetList(SearchResponse.Results.First())%>
</form>
The code above makes use of the helper methods to generate the html needed to render a search page.
The result of the search request will yield a search response which is passed to the html helpers to render the result html.
The htmlHelper methods listed above can be overriden to change the html output.
The Codebehind
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string query = Request.QueryString["query"];
var searchIndex = SearchIndexFactory.GetSearchIndex("exampleSearchIndex");
var searchRequest = UrlParameterParser.CreateRequest(searchIndex.SearchContext);
SearchResponse = searchIndex.Search("Default search page", query, searchRequest);
}
else
{
Response.Redirect(SiteSeeker.UI.UrlBuilder.FromPost(SearchIndexName));
}
}
The page load handles to scenerios.
- The initial page load
When the page is loaded for the first time, we would want to get the query from the url and perform a search based on the information available in the url.
- The PostBack
Once the user has posted the form we need to rewrite the url in order for the search page to maintain state. We do a redirect and build the url based on the information available on the search page.
Import into EpiServer
In order to import and search page as a page type in to EpiServer, you would need to ensure that your .cs class inherit from EpiServer's PageTemplate class
public partial class SiteSeekerSearch : TemplatePage
Testing the page
Once you have completed above steps you will be able to import the page template into EpiServer and create a page based on this template. You can then browse to the page and verify that the page works as expected.
