Jump To …

FindTemplate.aspx

<%@ Page Title="" Language="C#" 
    MasterPageFile="~/Views/MasterPages/Site.master" 
    AutoEventWireup="false" 
    CodeBehind="FindTemplate.aspx.cs" 
    Inherits="EPiServer.Templates.Alloy.Views.Pages.FindTemplate" %>

We need to include the EPiServer.Find namespace to access extension methods.

<%@ Import Namespace="EPiServer.Find" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Content" runat="server">
    <div class="row">
        <asp:Panel runat="server" CssClass="span8" DefaultButton="btnSearch">
            <asp:TextBox runat="server" ID="tbQuery" />
            <asp:Button runat="server" ID="btnSearch" Text="Search" OnClick="SearchButtonClick"/>
        </asp:Panel>
    </div>
        
    <div class="row">

Main area in which to show search results.

        <div class="span8 SearchResults">

Show the entered search query and number of hits

            <p>
                <EPiServer:Translate Text="/searchpagetemplate/searchfor" runat="server"/> 
                <i><%: Query %></i>
                <EPiServer:Translate Text="/searchpagetemplate/resultedin" runat="server" />
                <%: Results.TotalMatching %>
                <EPiServer:Translate Text="/searchpagetemplate/hits" runat="server"/>.
            </p>
            

Display each search hit utilizing existing CSS classes from the Alloy templates

            <% foreach (var hit in Results) { %>

            <div class="listResult">

Display linked title for the search hit

                <h3><a href="<%= hit.Url %>"><%= hit.Title %></a></h3>
                <p>

If an image exists and the editor has specified that images should be shown by specifying a height for them we show it and let the browser scale the width relative to the height. In a real scenario we should use an image scaling library.

                    <% if(CurrentPage.HitImagesHeight > 0 && hit.ImageUri != null) { %> 
                    <img src="<%= hit.ImageUri.ToString() %>" height="<%= CurrentPage.HitImagesHeight %>">
                    <% } %>

Show the excerpt text. As it may contain HTML tags for highlighting we don't HTML encode it.

                    <%= hit.Excerpt %>             
                </p>

                <hr />
            </div>
            
            <% } %>
            

Display paging controls.

            <div class="pagination pagination-centered">
                <ul>

Link to the previous paging page.

                    <li <%= PagingPage == 1 ? "class=\"disabled\"" : "" %> >
                        <a href="<%= GetPagingUrl(PagingPage-1) %>">&laquo;</a>
                    </li>
                    

Display links for each specific paging page.

                    <% for (int pageNumber = 1; pageNumber <= TotalPagingPages; pageNumber++) { %>

                    <li <%= PagingPage == pageNumber ? "class=\"active\"" : "" %>>
                        <a href="<%= GetPagingUrl(pageNumber) %>"><%= pageNumber %></a>
                    </li>

                    <% } %>
                    

Link to the next paging page

                    <li <%= PagingPage == TotalPagingPages ? "class=\"disabled\"" : "" %>>
                        <a href="<%= GetPagingUrl(PagingPage+1) %>">&raquo;</a>
                    </li>
                </ul>
            </div>

End of search results area.

        </div>
        

Sidebar in which facets/filter are shown.

        <div class="span4">
            <div class="well">
                <h2>Sections</h2>
                <ul class="nav nav-list">
                    

Link for clearing section filter.

                    <li <%= string.IsNullOrWhiteSpace(SectionFilter) ? "class=\"active\"" : "" %>>
                        <a href="<%= GetSectionFilterUrl("") %>">
                            All (<%: Results.FilterFacet("AllSections").Count %>)
                        </a>
                    </li>
                    

Display number of hits per section with link for filtering by section.

                    <% foreach (var sectionGroup in Results.TermsFacetFor(x => x.SearchSection)) { %>
                    
                    <li <%= SectionFilter == sectionGroup.Term ? "class=\"active\"" : "" %>>
                        <a href="<%= GetSectionFilterUrl(sectionGroup.Term) %>">
                            <%: sectionGroup.Term %> (<%: sectionGroup.Count %>)
                        </a>
                    </li>

                    <% } %>
                
                </ul>
            </div>

End of sidebar.

        </div>
    </div>
</asp:Content>