Asynchronous call implementation in Orchard Custom Module

Topics: Customizing Orchard
Mar 5, 2012 at 1:19 PM

Hi, I’m trying to Ajaxify my custom module which is being build using Orchard framework.

Once my home page is loaded in the browser, with developer tool - its html will look something like this.


<div class="aside-12" id="layout-wrapper">

    <header class="group" id="layout-header">

    <div id="layout-main-container">

        <div class="group" id="layout-main">

            <aside class="aside-first group" id="aside-first">

            <div class="group" id="layout-content">

                <div id="before-content">

                <div class="group" id="content">

                <div id="after-content">

            <aside class="aside-second" id="aside-second">


I have placed 3 widgets in "before-content", "content" and "after-content" zones respectively, with some layer rules; all 3 will be displayed in my Home page. I got a button in aside-second zone; when I click the button, based on the Action URL, the layer rules will be executed(I have set Layer Rule for that Url such that only 2 widgets i.e., the before-content and content zone widgets are displayed). This works perfectly for synchronous call. Now, I want to change the button’s functionally to asynchronous call. In this case, since it is an Ajax call, how the Layer rule will get executed? And how to replace the Content-layout zone alone?

 And also, since it is asynchronous call, I have removed “themed” attribute for the Controller so that, only the respective view alone returned rather than the entire theme layout. Please help us around this.

Mar 5, 2012 at 10:45 PM

If you do an Ajax call, do it to a specific controller action. I'm not sure what you mean about the rules here or why you would want them to execute though.

Mar 6, 2012 at 4:48 AM

When we add widget to particular zone from admin panel, we can associate it to certain Layer Rule. For example,

Widget 1 layer rule is "authenticated and url ("~/")"

Widget 2 layer rule is "authenticated and (url ("~/gallery") or url ("~/"))".

Both widgets will be displayed in Home page. When I click a button say “show gallery” button which is at aside-second zone, my URL will change to “~/gallery”. At this time, widget 1 won’t be displayed. When I make showgallery button's functionality to Ajax call and click it from Home page, widget 1 will still be displayed since layer rules are not executed. please help out.

Mar 6, 2012 at 4:56 AM

Thanks for explaining layers to me ;)

It is still not clear what you are expecting to happen. Please explain exactly what should happen when you click that button and what really happens. Also explain how you implemented the ajax call.

Mar 6, 2012 at 9:47 AM

As I explained earlier, home page URL has 2 zones. When I click gallery button, some action will be called and it will return ViewResult which will be placed at the content zone by default by the orchard framework. After this, only widget 2 will be displayed. This works fine in synchronous thread.

This is how ajax implementation is done,

<script type="text/javascript">function showGallery() {

           var actionUrl = '/gallery';  var token = $('#_voterequesttoken').children().val();

           $.ajax({  type: 'get',  url: actionUrl,  dataType: 'html',  data: { __RequestVerificationToken: token },

               success: function (response, status) {


               }  });   }</script>


<a href="javascript:void(0);" onclick="showGallery()">Show Gallery</a>

In this, I have manually replaced the layout-content div with the html response returned by the Action in order to remove the before-content widget that is Widget 1. But this is not right approach; it just solves this particular scenario alone.

What if a button click for a Url, matches with layer rule which results in addition of 3rd Widget in after-content zone, (this will work in Synchronous call, but not for AJAX call, because the layer rule will not get executed. So, the content div alone get replaced(manually) but not the after-content zone, but as per layer rule this after content zone should be added for that Url)

How to know what pieces should come inside Entire content-layout (Before Content, Content, and After Content) div when using Ajax? Can I generate the entire content-layout by Ajax with the rule evaluation?

Mar 6, 2012 at 9:01 PM

So you want to use ajax, but you want it to refresh the whole page? That doesn't make any sense to me, sorry.