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>


            

            @if (Model.HasSearchResult)
            {
                foreach (var result in Model.SearchResults)
                {



                        <a href="@Url.PageUrl(@result.LinkURL)">
                            @result.Name
                        </a>



@Url.PageUrl(@result.LinkURL)






<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


Back to top
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-35662136-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();