Sitecore and AJAX

Does Sitecore offer anything extra to call your code using AJAX, comparing to standard ASP.Net website? The quick answer is yes and no. Under the Sitecore’s hood there is ASP.Net MVC app, so basically you can use typical ASP.Net approach to call AJAX method. There are some helpers though, which make the implementation a little easier.

Creating Model View Controller

Let’s start with simple View Rendering:

In the NewsFeed.cshtml file for this view let’s add container for lazy loaded content and some input fields which will be used later for POST request. One addition worth mentioning, is data-context attribute where we store ID of current item. This is important cause we need to somehow pass it to AJAX request to keep Sitecore context.

Model for this sample is pretty straight-forward. In whole project we use¬†Glass.Mapper’s strongly typed objects.

We also create additional NewsFeedList.cshtml view, which will render the model created in previous step. For simplicity we just display field content without Experience Editor support.

Next, let’s create controller which tie all together. We create two methods, one will render news articles based on the current context item using the view created above. Second will create new article and return status of this operation. Important thing in this step: we inherit from GlassController which gives us access to ContextItem property.

Adding AJAX calls

Now, there is an optional step: we register route for our controller using standard .Net MVC method. We do it using Sitecore pipeline. This step is optional cause Sitecore out-of-the-box creates routes available under url /api/sitecore/{controller}/{action} for all your controllers actions.

Why should we register our custom route anyway? Yeah, /api/sitecore/{controller}/{action} route is used mainly for SPEAK framework and it’s not official, documented way to access your controllers actions in Sitecore. It requires that you have /App_Config/Include/Sitecore.Speak.Mvc.config file enabled on both CM and CD servers (for Sitecore 8.1 and earlier this file should be disabled on CD servers according to Sitecore guidance, for Sitecore 8.2 it should be enabled on both CD and CM). If you can live with it, next two steps are not required, also you need to remember to use /api/sitecore/ prefix in your .js files when calling your server’s methods.

If we created pipeline in previous step, we need to create Sitecore configuration patch, so our route registration code will be called before Sitecore standard routes registration.

Finally let’s write simple javascript and call our controller actions using jQuery. In first step we added data-context attribute to one of the view’s element, now we read it and add to our request. If we add it as ?sc_itemid= parameter Sitecore will automatically set ContextItem in our controller. In “loadNews” function we append html returned from server to the container. In “insertNewsItem” function we read data from input fields pass it to the server as JSON object and receive object in response.

If debug our script we see that everything works as expected. We pass current page context (Item ID) and receive dynamic Html or JSON object in our server’s response.