Sitecore 7 Ajax call not working

Question

I have only worked with Sitecore 8+ and for Ajax calls, all I do is this

 $.ajax({
       url: '@Url.Action("ActionName", "ControllerName")',
       type: "POST",
       data: '{sampleModel: ' + JSON.stringify(jsModel) + '}',
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (response) {
       },
  });

The controller is a regular MVC controller and also there was no need to create any Routes. I also delete the routeconfig.cs as soon as creating the project.

It works. Now this is Sitecore 7 with MVC 3 and the same Ajax call isn't working. It throws the 404 in the browser console.

Should anything else be done in Sitecore 7 or MVC 3.

Answer 1

I found the solution here. MVC Routing is not available by default in Sitecore 7.0 and we have to create one.

Create a custom processor for the initialize pipeline and define custom route in the Process method similar to the following:

public class RegisterCustomRoute
{
   public virtual void Process(PipelineArgs args)
   {
     RouteTable.Routes.MapRoute("CustomRoute", "mycustomroute/{controller}/{action}/{id}");
   }
}

Add this processor to the initialize pipeline right before the Sitecore InitializeRoutes processor. You can do this with the help of the configuration patch file in the following way:

<?xml version="1.0" encoding="utf-8"?>
<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
     <sitecore>
          <pipelines>
               <initialize>
                    <processor type="MyNamespace.RegisterCustomRoute, MyAssembly" patch:before="processor[@type='Sitecore.Mvc.Pipelines.Loader.InitializeRoutes, Sitecore.Mvc']" />
               </initialize>
          </pipelines>
     </sitecore>
</configuration>

Important: Ensure your custom configuration patch file is applied as the last patch to Sitecore configuration.
You can do this by placing the patch file into a subfolder of the /App_Config/Include directory. The name of the subfolder must be the last one alphabetically related to other subfolders (such as Z_CustomConfigs).

And the JS code will be like:

$.ajax({
       url: '/mycustomroute/<controllername>/<actionname>',
       type: "POST",
       data: '{sampleModel: ' + JSON.stringify(jsModel) + '}',
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function (response) {
       },
  });