Create the basic search

📘

Note

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

In the previous step, you prepared the site for Optimizely Search & Navigation, but the CMS still uses Optimizely Search. In this step, you plug in Optimizely Search & Navigation and add basic free text search. Optimizely Search & Navigation bases search features on the Client class and the IClient interface manages 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.

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.

Create a view and a controller for the search page

Here, you implement a basic, free-text search based on Unified Search. First, create a view model for the Optimizely Search & Navigation 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 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 on your website using Optimizely Search & Navigation.

📘

Note

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