Adding a custom route in Sitecore site

If we want to create a custom Sitecore route, for ex. if we want to read the user input and pass it to the controller method then we will require a custom route.

Simplest example of this requirement is Search box.

We will need to create a class file to add our route. You can add the class file either to the root of the project or by creating a Pipelines folder.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
using Sitecore;
using Sitecore.Mvc;
using Sitecore.Pipelines;

namespace DummyWebsite.Pipelines
    public class WebAPIRoute
        public virtual void Process(PipelineArgs args)
            RouteTable.Routes.MapRoute("search", "api/search/{action}/", new { controller = "search"});

In the above code, we are trying to create a route with the name “search”, to call search controller using url “api/search/[nameofthemethod]”

Once you have created the route file, you will need to create a config file to register this route.

<configuration xmlns:patch="">
        <processor patch:after="processor[@type='Sitecore.Pipelines.Loader.EnsureAnonymousUsers, Sitecore.Kernel']" type="DummyWebsite.Pipelines.WebAPIRoute, DummyWebsite"/>

Place the above file under App_config/Include folder.

The above 2 files should create your custom route. To verify this route in the browser, you will need to use sitecore keyword in the path:

Our route path: api/search/[nameofthemethod]
Browser URL: http://%5Bdomainname%5D/api/sitecore/search/%5Bnameofthemethod%5D

But if you are using the AJAX then you don’t need to add “sitecore” keyword explicitly.

You can refer to below AJAX script for the reference:

<script type="text/javascript">
        $(function () {
            $("#btnSearchpage").on("click", function () {
                var searchterm = $("#txtSearchpage").val();
                if (searchterm != "") {
                        url: "api/search/SearchResult",
                        type: "POST",
                        data: { searchTerm: searchterm },
                        context: this,
                        success: function (data) {
                            window.location.href = "/en/search?searchterm=" + searchterm;
                            console.log("success", searchterm);
                        error: function (data) {
                            console.log("error", searchterm);
                else {

Hope this is helpful for you.

Thank you.. Keep Learning.. Keep Sitecoring.. 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s