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>