How to use service calls from javascript

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

It is possible in Sense/Net to build rich AJAX application using javascript service calls. This is usually done by defining an MVC controller on server side or using a built-in controller's service functionality and use simple jQuery methods to send requests to the server. This way you could refresh the user interface without refreshing the whole page. In the following example we will use the built-in search functionality of the ContentStoreController service.

Steps

1. Create user control

Create a new user control.ascx. In 6.0.8 you can create a user.control.ascx directly, however in previous versions you could create an empty content view.ascx, and rename it, for example to AjaxTest.ascx. Create it in /Root/Global/renderers.

2. Define AJAX logic

Paste the following code, into your ascx binary:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.UserControl" %>
  <script>
    AjaxTest = {
      search: function(searchStr) {
        $.getJSON('/ContentStore.mvc/Search',
            {
                searchStr: searchStr,
                searchRoot: '/Root',
                contentTypes: '',
                rnd: Math.random()
            },
            AjaxTest.showResults);
      },
      searchAdmin: function() {
        AjaxTest.search('+TypeIs:Post +CreatedBy:{{+TypeIs:User +Name:Admin}}');
      },
      searchWorkspaces: function() {
        AjaxTest.search('+TypeIs:Workspace');
      },
      showResults: function(data) {
        var $container = $('#postlist');
        $container.html('');
        for (var i=0;i<data.length;i++) {
          var markup = data[i].Name+'<br />';
          $container.append(markup);
        }
      }
    }
    AjaxTest.search('TypeIs:Post');
  </script>
 
  <div id="postlist">
  </div>
  <input type="button" value="Show admin posts" onclick="AjaxTest.searchAdmin();" />  
  <input type="button" value="Show workspaces" onclick="AjaxTest.searchWorkspaces();" />

So the markup here is very simple, a div with an id of 'postlist', then 2 buttons. The inline script defines a namespace of AjaxTest with 4 functions in it:

  • search: this uses the ContentStore controller's built-in search functionality. It is used by the content picker. If you want to create your own, just look at ContentStoreController.cs, or WorkspaceController.cs. The search function here gets some parameters and returns with a json of object array.
  • searchAdmin: calls the above with the Lucene query string that will return posts created by the user named admin
  • searchWorkspaces: calls the above with the Lucene query string that will give back all the Workspaces
  • showResults: displays the result set of the query. Uses jquery to locate the target div, and appends all elements individually, with a custom markup. If you want to see what properties a returned JSON object has, simply write JSON.stringify(data[i]) to the markup, and you'll see. If you need some specific field, use your own controller to return with a customized JSON.

The script also automatically calls the search function to display all posts initially.

3. Deploy user control

Go to a page, switch it to edit mode, and add a new portlet: a User Control portlet (under Application category). For it set the 'User Control' property to point at your user control you have created in /Root/Global/renderers. Clicking the buttons will trigger an AJAX request to the server and refresh the list of items without reloading the page.

Related links

References