Changing the Sift Results Layout

When you install Sift a _SiftDefaultResults partial view is added that provides a default layout for the search results. This partial view is rendered in the results <div> to display the search results. There is nothing to stop you updating this partial view to meet your requirements. However, I would recommend creating separate partial views for your filter results.

You specify which partial view to display by adding the data-sift-result-partial to the outer <div> of a sift block. Do not include the ".cshtml" extension.

@inherits Umbraco.Web.Mvc.UmbracoViewPage

<h1>Results Partial View Filter</h1>

<div class="sift"
     data-sift-result-document-type="cinemaCento"
     data-sift-result-partial="_SiftResultsPartialExample">

    <form class="sift-criteria">

        @Html.AntiForgeryToken()

        <label for="filmName">Name</label>
        <input type="text" id="filmName" name="filmName"
               class="sift-criterion"
               data-sift-match-property="nodeName" />
        <p></p>

        <input type="submit" value="Search" />

    </form>

    <div class="sift-result">
    </div>

</div>

<script src="~/Scripts/sift.js" type="text/javascript"></script>

The partial view should accept a SearchResultNodes object, which includes a Nodes property with a list of IPublishedContent references to the content found. It also contains the Criteria information and details on the number of results and number of pages returned.

Take a look at _SiftDefaultResults for an example of how this information can be used. The following results partial example displays the date and star rating for the films returned.

@model SiftLibrary.Models.SearchResultNodes

@foreach (var node in Model.Nodes)
{
    var formattedDate = node.Value<DateTime>("date").ToString("dd MMM yyyy");
    var numStars = node.Value("starRating") + " stars";

    <a href="@node.Url()">@node.Name()</a><br/>  
    @formattedDate<br/>
    @numStars
    <hr />
}

When rendered this looks like this.

Sift result partial view

<< Back to User Guide