How to make a Site Search in Episerver

Searching is one of the major factors of building a website.  When you build an Episerver website you have a few options available to you.

In today’s tutorial I’m going to cover how to create a basic top search block that directs you to a search page

Episerver_Search_Homepage

Getting Started

Searching is a very complex subject and, for most websites, trying to index all the different page types and blocks is a big challenge and for the small costs of a Google Site Search, would not recommend building your own custom solution if the only thing you need is a basic out of the box search.

I’ve worked on a lot of projects where there’s been a requirement for a very specific search, examples include:

  • Only displaying results of a particular page type, like or blog or news pages
  • A search to only return page published this year
  • Only display pages within a particular section in the page tree

When you start to have these requirements and you can’t afford Find in your budget, then you will have to start thinking about creating a custom solution.  As there is a lot of code you may want to skip the post and directly download the website from the link at the bottom,

Top Search Block

First we need a page

[ContentType(DisplayName = "Top Search Block",
GUID = "B3486083-ADD1-4AA9-800A-7BA42A585EE1",
Description = "Top Search Block")]
public class TopSearchBlock : SiteBlockData
{
}

Next we create a view model:

public class TopSearchViewModel : BlockViewModel<TopSearchBlock>
{
public TopSearchViewModel(TopSearchBlock currentBlock, IEpiserverDependencies epiServerDependencies)
: base(currentBlock, epiServerDependencies)
{
}
public SearchPage Link
{
get
{
return _epiServerDependencies.ContentRepository
.GetChildren<SearchPage>(_epiServerDependencies.ContextResolver.StartPage)
.FirstOrDefault();
}
}
}

Lastly, we create a view

@model JonDJones.com.Core.ViewModel.Blocks.TopSearchViewModel
@using EPiServer.Web.Mvc.Html;
<form method="POST" action="@Url.PageUrl(@Model.Link.LinkURL)">
<div class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" name="searchterm" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</div>
</form>

The Search Page

Define the page type:

[ContentType(
DisplayName = "Search Page",
GUID = "5835D525-77D9-4F5F-BAB9-D0C14E273C15",
Description = "Search Page",
GroupName = "Standard")]
public class SearchPage : GlobalBasePage
{
[Display(
Name = "Page Title",
Description = "Page Title",
GroupName = SystemTabNames.Content,
Order = 100)]
[CultureSpecific]
public virtual string PageTitle { get; set; }
}

Define the view model:

public class TopSearchViewModel : BlockViewModel<TopSearchBlock>
{
public TopSearchViewModel(TopSearchBlock currentBlock, IEpiserverDependencies epiServerDependencies)
: base(currentBlock, epiServerDependencies)
{
}
public SearchPage Link
{
get
{
return _epiServerDependencies.ContentRepository
.GetChildren<SearchPage>(_epiServerDependencies.ContextResolver.StartPage)
.FirstOrDefault();
}
}
}

Define the html:

@model JonDJones.Com.Core.ViewModel.Pages.SearchPageViewModel
<section class="container-fluid">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<h1>SearchResults...</h1>
<br>
@if (Model.HasSearchResult)
{
foreach (var result in Model.SearchResults)
{
<p class="lead">
<a href="@Url.PageUrl(@result.LinkURL)">
@result.Name
</a>
<p>@Url.PageUrl(@result.LinkURL)</p>
</p>
<hr />
}
}
@if (!Model.HasSearchResult)
{
<img src="~/ClientResources/img/NoResult.jpg">
}
</div>
</div>
</section>

Conclusion

Today we have created everything you need to do in order to add a basic search into your website.

Code Sample

All the above code can be downloaded in a fully working website from my github account here.

JonDJones.com.EpiSiteSearchSampleSite

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

More Posts

1 reply

Trackbacks & Pingbacks

  1. […] has a few special keywords but you can make any up yourself. See How to make a Site Search in Episerver for more information to do […]

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *