Reload particular Rendering/Component on button click

Question

I am working on Sitecore 9 update 2.

I have two renderings, Rendering-A, and Rendering-B in Component-A and Component-B. In Component-A, I am displaying the most popular Articles using Rendering-A and in Component-B, I am displaying Music category Articles using Rendering-B.

In the first Component-A(Rederning-A), three articles are displayed let Article-A, Article-B, Article-C, and each article has a like button with the count.

In the second Component-B(Rederning-B) again I have three articles based on the category let Article-A, Article-D, Article-E, and each has a like button with the count.

There can be a chance the same article will come in both components. Article-A occurs in both the component in mine case.

Question:

Suppose In case I select the like button of Article-A in the first Component-A then the article-like count will update on UI and DB as well and it should be reflected in the Component-B of Article-A as well.

I want to render the Component-B again instead of reloading the whole page to see the updated count of likes. So wherever Article-A is coming in page in any Component it should be updated like count.

Is it possible to reload a particular Rendering/Component on the page? If yes, then How, please suggest.

PS: As of now I have done this job using jQuery, but want to go with Component reloading.

Answer 1

By default Sitecore does not do such a thing. You still need JavaScript to reload the Article in the other component. On the like button click event you can search for other Articles on the page which has the same ID as the liked Article and then do an AJAX call to the rendering which needs to be updated. So you will have 2 actions in the Controller (if you use MVC), one for the page load and one for the AJAX call.

public class ArticlesController : Controller
{
    pulic ActionResult Index()
    {
        /* collect articles implementation */
        return View(articles);
    }

    public ActionResult ForAjaxCall(Guid datasourceId)
    {
        /* collect articles implementation, probably you need the datasourceId or other parameters */
        return View(articles);
    }
}