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="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <pipelines>
      <initialize>
        <processor patch:after="processor[@type='Sitecore.Pipelines.Loader.EnsureAnonymousUsers, Sitecore.Kernel']" type="DummyWebsite.Pipelines.WebAPIRoute, DummyWebsite"/>
      </initialize>
    </pipelines>
  </sitecore>
</configuration>

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 != "") {
                    $.ajax({
                        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 {
                    $("#txtSearchpage").text("");
                }
            });
        });
    </script>

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:

WordPress.com Logo

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

Google photo

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

Twitter picture

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

Facebook photo

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

Connecting to %s