Loading...

Last updated: Jun 15 2018

Area: Episerver Find Applies to versions: Latest

3. Creating the basic search

Note: If you selected the Episerver Find option while installing the Episerver CMS, you can skip this step.

In the previous step, you prepared the site for Find, but the CMS is still using Episerver search. In this step, you plug-in Find and add basic free text search. Search features are based on the Client class and the IClient interface, which manage operations like indexing objects, getting documents, deleting documents, and searching. You can also use Unified Search, which lets you index and query objects of existing classes.

The search page type

In this example, you use the sample site which already has a SearchPage (MVC). In Visual Studio, you can find the SearchPage page type in the sample site project, under Models/Pages. If your site does not have a search page, you need to create one.

Creating a view and a controller for the search page

Here, you implement basic, free-text search based on Unified Search. First, create a view model for the Find search, inheriting from the PageViewModel, and using UnifiedSearchResults for returning search hits objects with selected properties such as title and URL. The view model can look something like this:

namespace MyFindWebsite.Models.ViewModels
{
    public class FindSearchPageViewModel : PageViewModel<SearchPage>
    {
        public FindSearchPageViewModel(SearchPage currentPage, string searchQuery)
            : base(currentPage)
        {
            SearchQuery = searchQuery;
        }
        public string SearchQuery { get; private set; }
        public UnifiedSearchResults Results { get; set; }
    }
}
Next, create a new default page controller for the search page, which overrides the current one (which uses the built-in search), and uses SearchClient for the actual search.
namespace MyFindWebsite.Controllers
{
    [TemplateDescriptor(Default=true)]
    public class FindSearchPageController : PageController<SearchPage>
    {
        public ActionResult Index(SearchPage currentPage, string q)
        {
            var model = new FindSearchPageViewModel(currentPage, q);
            if (String.IsNullOrEmpty(q))
            {
                return View(model);
            }
            var unifiedSearch = SearchClient.Instance.UnifiedSearchFor(q);
            model.Results = unifiedSearch.GetResult();
            return View(model);
        }
    }
}
Finally, create the view (using the new view model), which renders search results based on data sent from the controller. In this example, the view uses the layout provided in the sample site. You add a search box and a search button. The search page displays the entered query, the number of retrieved results, and the results. The view looks something like this:
  
@model MyFindWebsite.Models.ViewModels.FindSearchPageViewModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/Layouts/_TwoPlusOne.cshtml";
}

@using (Html.BeginForm(FormMethod.Post))
{
    <input type="text" tabindex="1" name="q" value ="@Model.SearchQuery" />
    <input type="submit" tabindex="2" class="btn" value="Search" />
}
@if (Model.Results != null)
{
    <p>Your search for <i>@Model.SearchQuery</i> resulted in @Model.Results.Count() hits</p>
    <div class="listResult">
        <ul>
            @foreach (var item in Model.Results)
            { 
            <li>
                <h4><a href="@item.Url">@item.Title</a></h4>
                @item.Excerpt
            </li>
            }
        </ul>
    </div>
}
    

Rebuild your project and verify that you can perform a free text search using Find on your website.

Note: By default, only 10 search results appear on a page. To change this value, use the Take method.

Next steps


Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/