SiteSearch

<TSC:SiteSearch>

The SiteSearch templated server controla server control uses API language to interact with the CMS and Framework UI to display the output. A server control can be dragged and dropped onto a Web form and then modified. lets site visitors search your website. SiteSearch consists of the following components:

To provide search capabilities for your Web site content, insert all three controls onto an .aspx template. Because the search functions are managed by separate controls, you can place a search field and button in one section of a page, and the results in another.

Also, unless you want to use the default paging properties (which show only ten results), insert an <TSC:Pager> control on the page to manage the paging of the search results.

Input and output markup

InputView and ResultsView controls have a corresponding .ascx template that contains default markup. You can modify a template to change a control’s default markup. You can find the search control template files at the following locations:

[site root]\workarea\FrameworkUI\Templates\Search\SiteSearchInputView.ascx
[site root]\workarea\FrameworkUI\Templates\Search\SiteSearchResultsView.ascx

Process controller

The Controller control takes input from an InputView control, and returns search results to a ResultsView control. It provides an interface to the search API, giving search view controls access to search data. The Controller control executes a search using a query string from search InputView control’s Text property, as specified in the code-behind’s OnClick event. You may modify the Controller or write your own.

Unlike the other search controls, the Controller control has no UI functionality.

SiteSearchInputView

The SiteSearchInputView server control provides a text box and submit button, which visitors use to search content. The control contains no business logic. It merely accepts a search term and passes it to the SiteSearchController, which retrieves and sends results to the SiteSearchResultsView control. See also:Properties for SiteSearchInputView.

The SiteSearchInputView control's main purpose is a placeholder for markup, which you use to modify its appearance. The control's default markup is very simple: it inserts a text box, a Search button, and an Advanced Search link.

To enable search functionality, connect a SiteSearchController to a SiteSearchInputView control. Use the control's ControllerID property to do this. As a value for the ControllerID property, enter the ID of the SiteSearchController that you place within the <form> tags. For example:

<ektron:SiteSearchInputView ID="SiteSearchInputView1" 
  ControllerID="SiteSearchController1" runat="server">
</ektron:SiteSearchInputView>

Placing a SiteSearchInputView server control on a page

 

You added search server controls to the Visual Studio Toolbox.

To place a SiteSearchInputView control on a page:

  1. Open the page in Visual Studio.
  2. Drag and drop the SiteSearchInputView control.

You can place the SiteSearchInputView control anywhere on a page -- it does not need to be next to the results. Also, you can place several SiteSearchInputView controls on a page.

Customizing the SiteSearchInputView control

  1. Add a set of <ItemTemplate> tags between the SiteSearchInputView control's opening and closing tags. Then, insert an asp text box or an EktronUI:TextField to accept the user's input. Here is an example.
    <ektron:SiteSearchInputView ID="SiteSearchInputView1" 
  ControllerID="SiteSearchController1" runat="server"> 
  <ItemTemplate> 
    <ektronUI:TextField ID="queryText" Text='<%# Eval("QueryText") %>'
      runat="server"></ektronUI:TextField> 
  </ItemTemplate>
</ektron:SiteSearchInputView>

    NOTE: As an alternative, you can copy the line that inserts a text box from siteroot\Workarea\FrameworkUI\Templates\Search\SiteSearchInputview.ascx.

    Note that the Eval statement (<%# Eval("QueryText") %>) databinds the search term to the textbox. As a result, the term remains in the box after the user clicks the search button.

  2. Insert an asp search or EktronUI:Button, like this.
    <ektron:SiteSearchInputView ID="SiteSearchInputView1" ControllerID="SiteSearchController1" runat="server"> <ItemTemplate> <ektronUI:TextField ID="queryText" Text='<%# Eval("QueryText") %>' runat="server"></ektronUI:TextField> <ektronUI:Button ID="Button1" DisplayMode="button" Text="Button 1" runat="server" OnClick="Button1_Click"> </ektronUI:Button> </ItemTemplate>
</ektron:SiteSearchInputView>

    NOTE: As an alternative, you can copy the line that inserts a search button from siteroot\Workarea\FrameworkUI\Templates\Search\SiteSearchInputview.ascx.

  3. Assign to the button an onclick event that executes a search. To accomplish this, open the page’s code-behind file and add the following code.
    protected void searchButton_Click(object sender, EventArgs e) 
  { SiteSearchController1.Search (queryText.Text); }

Now you can customize the control's markup as needed.

See also: MSDN Button class, MSDN Textbox class

Separating the search field from the results display

You can place the search field and button on different parts of the page. To do that, insert 2 SiteSearchInputView controls. In one control, place the search field, like this.

<ektron:SiteSearchInputView ID="SiteSearchInputView1" 
  ControllerID="Scontroller" Visible="true" runat="server">
  <ItemTemplate>
	<ektronUI:TextField ID="queryText" Text='<%# Eval("QueryText") %>' 
          runat="server"></ektronUI:TextField>
  </ItemTemplate>
</ektron:SiteSearchInputView>

In the second control, in another section of the page, place the button, like this.

<ektron:SiteSearchInputView ID="SiteSearchInputView2" 
  ControllerID="Scontroller" Visible="true" runat="server">
  <ItemTemplate>
	<ektronUI:Button ID="Button1" DisplayMode="button" Text="Button 1" 
         runat="server" OnClick="Button1_Click">
       </ektronUI:Button>
  </ItemTemplate>
</ektron:SiteSearchInputView>

Then, assign an onclick event to the button that executes a search. To accomplish this, open the page’s code-behind file and add the following code.

protected void searchButton_Click(object sender, EventArgs e)
  {
   SiteSearchController1.Search (queryText.Text);
  }

SiteSearchController

The SiteSearchController server control takes input from a SiteSearchInputView control, and returns results to a SiteSearchResultsView control. It provides an interface to the search API, thereby giving SearchView controls access to search data. See also:Properties for SiteSearchController.

You can modify Ektron's SiteSearchController or write your own.

Use only 1 SiteSearchController per page.

The SiteSearchController executes a search using a query string from the SiteSearchInputView control's Text property, as specified in the code-behind's Onclick event.

Unlike the other search controls, SiteSearchController has no UI functionality. So, there is no corresponding .ascx file.

SiteSearchResultsView

The SiteSearchResultsView control receives search results from the SiteSearchController and displays them on a page. See also:Properties for SiteSearchResultsView.

By default, the control's display looks like this.

NOTE: To manage the paging display at the bottom of the page, use an EktronUI:Pagercontrol.

To enable search functionality, connect a SiteSearchController to a SiteSearchResultsView control. Use the control's controllerID property to do this. For the controllerID property value, enter the ID of the SiteSearchController that takes input from SiteSearchInputView control and returns search results to this control. For example:

<ektron:SiteSearchResultsView ID="SiteSearchResultsView1" 
    ControllerID="SiteSearchController1" runat="server">
</ektron:SiteSearchResultsView>

To customize the SiteSearchResultsView control, first add a set of <ItemTemplate> tags between the SiteSearchResultsView control's opening and closing tags (as explained in Templated server controls). Then, modify the search results in the following ways.

NOTE: As an alternative, you can copy the line that inserts a text box from siteroot\Workarea\FrameworkUI\Templates\Search\SiteSearchResultsView.ascx.

Displaying the search phrase with results

Use <%# Eval("QueryText") %> to databind the search term to the SiteSearchResultsView control. This code sample below displays an example of this Search Phrase: followed by the search term.

<ektron:SiteSearchResultsView ID="SiteSearchInputView1" 
  ControllerID="SiteSearchController1" runat="server">
  <ItemTemplate>
	<p>Search Phrase:<%# Eval("QueryText") %> </p>
  </ItemTemplate>
</ektron:SiteSearchResultsView>

Displaying search results using a ListView control

Use a ListView control to display search results from a SiteSearchController.

  1. Within a ListView control, use an <%# Eval("Results") %> statement to databind search results to the ListView control.
    <asp:ListView ID="aspResults" runat="server" 
  DataSource='<%# Eval("Results") %>' 
  ItemPlaceholderID="aspPlaceholder">
  2. To define the main (root) layout of a ListView control, insert a LayoutTemplate. Within that template, insert a placeholder to store the server controls on the page.
    <asp:ListView ID="aspResults" runat="server" 
  DataSource='<%# Eval("Results") %>' 
  ItemPlaceholderID="aspPlaceholder">
<layouttemplate> 
  <ul class="results">
    <asp:PlaceHolder ID="aspPlaceholder" runat="server">
    </asp:PlaceHolder>  
  </ul>
</layouttemplate>
  3. Use an ItemTemplate to specify the markup used to generate each record bound to the ListView. Here is an example that displays search results' title, summarya short description that supplements a content item's title on a Web page. Content authors compose a summary when creating or editing content. Server controls and widgets can display a content title and summary to attract readers to the full story. Summaries can include images and text formatting., URL and date.
    <itemtemplate> 
  <li>
    <h3><a href="<%# Eval("Url") %>"><%# Eval("Title") %></a></h3> 
    <p><%# Eval("Summary") %></p> 
    <p><%# Eval("Url") %> <%# Eval("Date") %></p> 
  </li>
</itemtemplate>

    4. Here is the entire sample.

    <itemtemplate>
  <asp:ListView ID="aspResults" runat="server" 
    DataSource='<%# Eval("Results") %>' 
    ItemPlaceholderID="aspPlaceholder"> 
    <layouttemplate>
       <ul class="results">
         <asp:PlaceHolder ID="aspPlaceholder" runat="server"> 
         </asp:PlaceHolder></ul>      
    </layouttemplate> 
    <itemtemplate>
      <li>
         <h3><a href="<%# Eval("Url") %>"><%# Eval("Title") %></a></h3>
         <p><%# Eval("Summary") %></p>
         <p><%# Eval("Url") %> <%# Eval("Date") %></p>
      </li> 
    </itemtemplate> 
  </asp:ListView>
</itemTemplate>

Displaying search results using a GridView control

You can use an asp:Gridview control to make search results look like the following.

To modify the UI for SearchResultsView:

  1. Within the <ektron:SearchResultsView> tags, insert <ItemTemplate></ItemTemplate>.
  2. Between the <ItemTemplate> tags, insert the following code, shown in bold.
    <ektron:SearchResultsView ControllerID="SiteSearchController1" 
  runat="server"> 
  <ItemTemplate> 
    <h2>Search results for: <%# Eval("QueryText") %></h2> 
    <asp:Gridview ID="Gridview1" DataSource='<%# Eval("Results") %>' 
      runat="server"> 
    </asp:Gridview> 
  </ItemTemplate>
</ektron:SearchResultsView>
  3. Modify the appearance of the results using Gridview properties and styles. See also: GridView Class.

Inserting SiteSearch templated server controls

To provide search capabilities to your website content, insert all 3 components of the SiteSearch templated server control onto an .aspx template. Because the search functions are managed by separate controls, you can place a search field and button in a one section of a page, and the results in another.

Also, unless you want to use the default paging properties (which show only 10 results), insert an <TSC:Pager> control on the page to manage the paging of the search results.

Prerequisite

Search server controls were added to the Visual Studio Toolbox. See Adding search server controls to Visual Studio.

If you drag and drop controls from the Visual Studio Toolbox, the necessary register statements are copied from the web.config file and added to the page. 

<add tagPrefix="ektron" namespace="Ektron.Cms.Framework.UI.Controls" 
  assembly="Ektron.Cms.Framework.UI.Controls, Version=8.5.0.356, 
  Culture=neutral, PublicKeyToken=559a2c4fa21e63be" />
<add tagPrefix="ektronUI" 
  namespace="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  assembly="Ektron.Cms.Framework.UI.Controls.EktronUI, 
  Version=8.5.0.356, Culture=neutral, PublicKeyToken=559a2c4fa21e63be" />

If you copy and paste the sample code, add the following register statement for templated controls:

<%@ Register assembly="Ektron.Cms.Framework.UI.Controls" 
  namespace="Ektron.Cms.Framework.UI.Controls" 
  tagprefix="ektron" %>

For Ektron UI controls, use this register statement:

<%@ Register assembly="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  namespace="Ektron.Cms.Framework.UI.Controls.EktronUI" 
  tagprefix="ektronUI" %>

The tag prefix can be anything as long as it matches the control's prefix.

The following template shows the 3 components of the SiteSearch templated server control.

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="TemplatedControl.aspx.cs" 
  Inherits="TemplatedControl" ValidateRequest="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title></title> 
  </head>
  <body> 
    <form id="form1" runat="server">
      <div>
        <ektron:SiteSearchInputView ID="SiteSearchInputView1" 
          ControllerID="SiteSearchController1" runat="server">
        </ektron:SiteSearchInputView>
        <ektron:SiteSearchController ID="SiteSearchController1" 
          runat="server" />
        <ektron:SiteSearchResultsView ControllerID="SiteSearchController1" 
          ID="SiteSearchResultsView1" runat="server">
        </ektron:SiteSearchResultsView>
        <ektronUI:Pager ID="pager1" runat="server" 
          PageableControlID="SiteSearchController1" 
          ResultsPerPage="10"></ektronUI:Pager>
      </div>
    </form>  
  </body>
</html>

Attributes for SiteSearch

You can use the properties with Eval statements to display aspects of content search results. For example, <%# Eval("Summary") %> displays the summarya short description that supplements a content item's title on a Web page. Content authors compose a summary when creating or editing content. Server controls and widgets can display a content title and summary to attract readers to the full story. Summaries can include images and text formatting. for content being returned by the search.

Properties for SiteSearchInputView

  • ControllerID. The ID of the SiteSearchController that provides the data.
  • ExactPhrase. Sets an EXACT ORDER relationship among search terms.
  • Fields. Label, Name, Xpath: Retrieve information from XML Smart Forms. See also:XmlSearch.
  • QueryText. The string that the site visitor entered to begin search.
  • SortProperties. Provides a dropdown list that lets a site visitor sort search results by a list of pre-selected search properties.


    The Name of the SearchProperty (by which you intend to sort search results) must exactly match the search property name in the search index. Sample code:

    <cc1:SiteSearchInputView ID="SiteSearchInputView1" runat="server" ControllerID="SiteSearchController1">
<SortProperties>
	<cc1:RankSearchProperty DisplayName="Relevance" />
	<cc1:DateSearchProperty Direction="Descending" Name="ebddatemodified" DisplayName="Date" />
	<cc1:StringSearchProperty Direction="Descending" Name="exact_title" DisplayName="Title" />
	<cc1:IntegerSearchProperty Direction="Ascending" Name="ebicontentid" DisplayName="Id" />
</SortProperties>
</cc1:SiteSearchInputView>
  • WithAllWords. Sets an AND relationship among search terms.
  • WithAnyWord. Sets an OR relationship among search terms.
  • WithoutWords. Sets a NOT relationship among search terms.

Properties for SiteSearchController

  • AdvancedQueryText. See Customizing the search behavior with AdvancedQueryText.
  • AutoCompleteMaxCount. (Solr) the maximum number of results returned.
  • AutoSuggestMaxCount. (Search Server, FAST) the maximum number of entries in the auto-suggest list.
  • EnableAutoComplete. (Solr) suggests terms based on the user's input. For example, of you enter ba, autocomplete returns backup, banner, base, basic, and so on.
  • EnableAutoSuggest. (Search Server, FAST)  suggests similar terms or common refinements that searchers have used in the past which are related to the search term. As a user enters text, possible matches appear.
  • EnableQueryStatistics. Enable logging of query statistics in Sharepoint based on the clicks on a search result, which are used to build auto-suggestions for a term.
  • ID (Required). Provides the association for the SiteSearchInputView and SiteSearchResultsView server controls. The following example shows the ID property with the SiteSearchController.
    <ektron:SiteSearchController ID="SiteSearchController1" 
  runat="server" />

Properties for SiteSearchResultsView

Events for SiteSearch

None.

Methods for SiteSearch

  • Search(string queryText, string advancedQueryText)
    • Description: Basic search
      • queryText. The text you have in the INPUT text box.
      • advancedQueryText. The extra query text that is appended to the end of the queryText, which you do not want to show on the INPUT text box.
    • Return Type: None
  • Search(string withAllWords, string withoutWords, string withAnyWord, string exactPhrase, string advancedQueryText)
    • Description: Advanced search
      • includes withAllWords, withoutWords, withAnyWord and exactPhrase.
      • advancedQueryText. The extra query text that is appended to the end of the queryText, which you do not want to show on the INPUT text box.
    • Return Type: None

Theming for SiteSearch

Theming styles the appearance, including colors and background textures, using jQuery UI CSS Framework and Ektron UI CSS Framework. Use the ThemeRoller tool to create and download custom themes that are easy to build and maintain. If you want to customize it further, you can use control-specific classes referenced within the control’s markup.

<div id="uxSiteSearchInput"
  class="ektron-ui-control
  ektron-ui-search
  ektron-ui-search-site">
  <div class=basicSearch>
  <span class="ektron-ui-control ektron-ui-input ektron-ui-textField"
    id="uxSiteSearchInput_ctl00_0_uxSearchText_0_TextField_0_
      uxTextField_0">
  <input type="text"
    id="uxSiteSearchInput_ctl00_0_uxSearchText_0_TextField_0_aspInput_0"
    name="uxSiteSearchInput$ctl00$ctl00$uxSearchText$TextField$aspInput">
  </span>
  <span class="ektron-ui-button">
    <input type="button" autocomplete="off" value="Search" title=""
      onclick="WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions
      ('uxSiteSearchInput$ctl00$ctl00$uxBasicSearchButton', '', true,
        '', '', false, true));"
      name="uxSiteSearchInput_ctl00_0_uxBasicSearchButton_0_Button"
      id="uxSiteSearchInput_ctl00_0_uxBasicSearchButton_0_Button"
      class="ui-button ui-widget ui-state-default ui-corner-all"
      role="button">
  </span>
  <script type="text/javascript" 
    id="uxSiteSearchInput_ctl00_0_uxBasicSearchButton_0_uxSiteSearchInput_
      ctl00_0_uxBasicSearchButton_0EktronScriptBlockdmvjp_0"> 
    <!--//-->
    <![CDATA[//>
    <!--
      Ektron.ready(function(event, eventName)
      {
      $ektron
      ("#uxSiteSearchInput_ctl00_0_uxBasicSearchButton_0_Button"
       ).button();
      });
    //--><!]]>
  </script>
  <div class="toggleAdvancedSearchWrapper">
  <a onclick="return false;" class="toggleAdvancedSearch"
    id="uxSiteSearchInput_ctl00_0_aspAdvancedSearchLink_0" href="">
    Advanced Search
  </a>
  <a onclick="return false;"
    class="toggleAdvancedSearchIcon toggleAdvancedSearch"
    id="uxSiteSearchInput_ctl00_0_aspAdvancedSearchIcon_0" href="">
    <span class="ui-icon ui-icon-triangle-1-s"></span>
  </a>
  </div>
  </div>
  <script type="text/javascript" id="uxSiteSearchInput_ctl00_0_
    uxScriptBlockSearch_0_uxSiteSearchInput_ctl00_0_uxScriptBlockSearch_
    0EktronScriptBlockmknws_0">
    <!--//-->
    <![CDATA[//>
    <!--
      Ektron.ready(function(event, eventName)
      {
        setTimeout("Ektron.Controls.Search.SiteSearch.init(
          { clientId: 'uxSiteSearchInput_ctl00_0' })", 0);
      });
    //--><!]]>
  </script>
</div>
<div id="uxSiteSearchResults" 
  class="ektron-ui-control
    ektron-ui-search
    ektron-ui-search-results
    ektron-ui-search-results-site">
  <div class="section suggested-results">
  </div>
  <div class="section no-results">
  </div>
  <div class="section results">
  <ul>
    <li class="result   ektron-ui-clearfix">
      <h3 class="title">
        <a href="http://ws10548b/Clients/Alex-Tishler,-Aveya/">
        Alex Tishler, Aveya
        </a>
      </h3>
      <div class="summary"> &nbsp;"I have recently purchased
        a copy of OnTrek and am very happy with the software.
        It is amazing how many features are available within
        the network. I am also very impressed by the quality
        and the speed of the technical support."
        … Alex Tishler Lead Analyst <strong>Aveya</strong>
        /uploadedImages/MainSite/Content/Clients/Client_Quotes …" 
      </div>
        <span class="url   ektron-ui-quiet">
          http://ws10548b/Clients/Alex-Tishler,-Aveya/</span>
        <span class="date   ektron-ui-quiet">9/7/2011 2:47:07 PM</span>
      </li>
    </ul>
  </div>
</div>

Properties

None.

Search results

The following example shows just 2 of the many results of searching for "training" in the demo field.

Example for SiteSearch

.aspx

<ektron:SiteSearchInputView ID="uxSiteSearchInput"
  ControllerID="uxSearchController" runat="server">
</ektron:SiteSearchInputView>
<ektron:SiteSearchResultsView ID="uxSiteSearchResults"
  ControllerID="uxSearchController" runat="server">
</ektron:SiteSearchResultsView>
<ektron:SiteSearchController ID="uxSearchController" runat="server">
</ektron:SiteSearchController>