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.

  • Episerver Find: Find is probably the most advanced and feature-rich search tool for you, however, it is expensive.
  • Google Site Search: For about $100 bucks a year you can integrate the power of Google into your website
  • Custom Solution

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


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 Episerver 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

Next, we create a view model:

Lastly, we create a view

The Search Page

Define the page type:

Define the view model:

Define the html:

Code Sample

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