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.. 🙂
Sitecore Diaries 