Introduction to HTML Helpers

6/18/2013

When making use of the SiteSeeker integration module v4 you will have access to the built-in HTML helpers which we ship. The helpers will allow you to build a search page with very few lines of code. Below is an example of that:

<html>
  <head id="Head1">
    <title>SiteSeeker Search Page Example</title>
    <link href="<%=Url.Content("~/siteseeker-example-site.css") %>" rel="stylesheet" type="text/css" />
    <%var helpers = HtmlHelperFactory.Get<XHtmlHelpers>(Model.Name, new CultureInfo( Request[UrlParameters.SearchLanguage] ?? "en-US"));%>
    <%= helpers.SiteSeeker_Css() %>
    <%= helpers.SiteSeeker_AutoComplete_Javascripts(true,true,"x","y")%>
   </head>
<body>
    <h1 class="ess-bodyHeader">Söksida</h1>
    <%using (Html.BeginForm("Search", "Search", FormMethod.Get, new Dictionary<string, object> { { "class", "ess-searchForm ess-box" }}))
      {%>
        <%=helpers.FormSearchBox()%>
        <%=helpers.FormFacetList(Model.SearchContext.Facets, Model.Name)%>
    <%}%>
  <a href="~/Search/Custom?query=*" runat="server">Custom html helper</a> <br />
  <a href="~/Search/Search?query=*&debugHelper" runat="server">Show htmlHelper debug information</a><br />
  <a href="~/Search/FakeIndexSearch?query=*" runat="server">working with a fake index</a><br />
  <a href="~/Search/SearchASPNetState?query=*" runat="server">Using aspn.net state to store session</a><br />
  <a href="~/SegmentedSearch/Search?query=*" runat="server">Segmented search</a><br />
  <p>
  </p>
  </body>
</html>

The html helpers consists of a number of smaller functions which all returns a string consisting of the html to be rendered.

You will be able to override and exctend these functions with your own implementation.

Below is the a list of functions that exist currently.

Function name
AddSortOrderAttributes
Gets Heading by level.
BuildRecommendationUrl
Builds url for recommendation result
BuildSearchIndexListItem
Builds a search index entry for the EPiServer search tab
CachedPage
generates html for cached page
Equals
Determines whether the specified Object is equal to the current Object.
(Inherited from Object.)
FileMetaTags
Finalize
Allows an Object to attempt to free resources and perform other cleanup operations before the Object is reclaimed by garbage collection.
(Inherited from Object.)
FormFacetList(IEnumerable<(Of <<'(Facet>)>>))
Generates the list for facet requests.
FormFacetList(IEnumerable<(Of <<'(Facet>)>>), String)
Generates the list for facet requests.
FormFacetListItem
render html for a single facet
FormSearchBox()()()()
generates searchbox
FormSearchBox(String)
generates searchbox
FormSearchBox(String, Boolean)
generates searchbox
GenerateCSSScriptLink
Renders CS link
GenerateHiddenSessionId
Html helper class used for generating sessionid
GenerateJSScriptLink
Generates javascript link
GetCssLink
Get the css link for a embedded style script
GetHeadingByLevel
Gets Heading by level.
GetHitDateTime
Gets hit datetime.
GetRefinedUrl
Generates the refined Url when a requery refinement link is clicked
GetTagByName
Gets Tag by name
Header_Title
Renders the header title tag
MemberwiseClone
Creates a shallow copy of the current Object.
(Inherited from Object.)
MetaTags<(Of <<'(T>)>>)
Renders metatags based on the registered implementation of SiteSeeker.Extensions.IMetaHandler.
Recommendation_Item
Build the Recommendation item html
Recommendations
Generates html for recommendations returned from siteseeker
RenderCachedPage
Renders cached page
Result(SearchResult)
Generates html to display the search response
Result(SearchResult, Boolean)
Renders Search result
Result(SearchResult, String)
generates html to dispaly the search response
Result_Header
generates html to dispaly the search result header
Result_Hit_DocumentInformation
Generates document information
Result_Hits
generates html to dispaly the search response
Result_SortOrders
Generates html to represent sort out
ResultBestBetItem
Generates html for best bet
ResultBestBets
Generates html for best bets
ResultFacetList(SearchResult)
Generates html for the result list showing the facets, higlighting the selected facets
ResultFacetList(SearchResult, array<String>[]()[][])
Generates html for the facets which match the given facetKeys
ResultFacetList_Facet
Generates html for a single facet.
ResultFacetList_Facet_RemoveSelectionLink
Generates the link for the removal of selected facet values
ResultFacetList_FacetValue
Renders the facet value html
ResultFacetList_FacetValue_Item_NumberOfHits
render the facet value's number of hits
ResultFacetList_FacetValue_NotSelected
The facet value html when not selected
ResultFacetList_FacetValue_Selected
The facet value's html when selected
ResultFacetList_FacetValue_Url
The url for the facet value when clicked
ResultFacetList_Item_Header
The html for each facet header
ResultFacetList_RemoveSelectionUrl
Generates url for the remove selection link
ResultHit(SearchHit, String)
Generreate html for a specific hit
ResultHit(SearchHit, String, Boolean, Boolean, Boolean)
Generreate html for a specific hit
ResultHitAttachment
Generates html for the hit attachments
ResultHitAttachmentFooter
Generates html for the hit attachments footer
ResultHitAttachments
Generates html for the hit attachments
ResultHitFacets
generates html for facets associated with the search response
ResultHitFileFormat
Returns the file format for a hit
ResultHitFileSize
Generates html for the file size for a hit
ResultHitFooter
Generates html for the hit footer
ResultHitMarkedUrl
Return hit with marked url
ResultHitMetaData
Generates meta data
ResultHitShowBacklink
generate html for links leading to this hit
ResultHitShowCachedLink
generate cache link
ResultHitThumbnail
Renders the thumbnail for a hit
ResultHitTitleAndSnippet
Generates hit title and snippet.
ResultPaginator(Int32, SearchResult)
Generates pagination list
ResultPaginator(Int32, Int32, Int32, String)
Generates pagination list
ResultPaginator_NextPage
Generates next pagination items
ResultPaginator_PreviousPage
Generates previous pagination
ResultQueryRefinement
Generates the query refinement for a single element
ResultQueryRefinements(IEnumerable<(Of <<'(QueryRefinement>)>>))
Renders query refinements html
ResultQueryRefinements(IEnumerable<(Of <<'(QueryRefinement>)>>), Boolean)
Renders the query refinement result
ResultThumbnailCachedLink
Generate thumbnail cached link
SiteSeeker_AutoComplete_Javascripts()()()()
Renders the autoocomplete scripts for siteseeker.
SiteSeeker_AutoComplete_Javascripts(Boolean, Boolean, String, String)
Renders the autoocomplete scripts for siteseeker.
SiteSeeker_ClickTracking_Javascripts
Renders javascript for click tracking.
SiteSeeker_ClickTracking_Javascripts(Boolean)
Renders javascript for click tracking.
SiteSeeker_Css
Generates default CSS files for SiteSeeker's autocomplete and html helpers
SiteSeeker_Javascripts()()()()
Renders javacript needed to communicate with SiteSeeker
SiteSeeker_Javascripts(Boolean, Boolean, String, String)
Includes the core css and js files needed for interaction between helpers and javascript shipped as default.
SpellingSuggestion_Item
Generates html for spelling suggestion item

SpellingSuggestions

Generates html for spelling suggestions

Debugging the HtmlHelpers

Its possible to understand which functions output what html by appending 'debugHelper' to the querystring of the url that renders the search page. F.eks http://localhost/search?debugHelper.

A sample of the output could look like this:

<form action="/mvc/Search/Search" class="ess-searchForm ess-box" method="get"><!--Begin:FormSearchBox()--><input class="ess-searchbox" name="query" type="text" value="" /><input class="ess-searchbutton" type="submit" value="Search" /><!--Begin:GenerateHiddenSessionId()--><input name="si" type="hidden" value="BBF22153D07B3D7ACABD85B55BDC8C58" /><!--end:GenerateHiddenSessionId()--><!--end:FormSearchBox()-->
     

Overriding a function

Its possible to override a function to suit your needs. Notice that you will need to register you html helper in the system configuration when bootstrapping the system.

Here is an example of changing the output of the selected facet.

public class CustomHtmlHelper : XHtmlHelpers
    {
        protected override void ResultFacetList_FacetValue_Selected(FacetValue facetValue, Common.TagBuilder li)
        {
            li.AddCssClass("ess-active");
            li.SetInnerText(facetValue.Text + ">>>>>");
        }
    }

There is example projects for mvc and for webforms. The example projects can be downloaded from here

The example code makes use of the helpers extensively and is a great source for inspiration when developing your own search page.