Skip to main content
Home  ›  Blog

New in 2sxc 7: #4 Using Visual Query with WebAPI (Updated)

This is a part of my series The New Features of 2sxc 7 and introduces you to using the Visual Query together with  WebAPI

There are many ways to consume Query data - the most powerful way to give use it in JavaScript is to deliver it as JSON - which can be done easily in WebAPI. Here are the three ways to use queries in WebAPI:

  1. Updated / New in 7.1: Just use the REST API (see end of this article)
  2. Retrieve the data for some C# work inside WebAPI
  3. Get a Query and just serialize the entire query with all streams into JSON
  4. Just serialize some streams (not all) of a query to JSON
  5. Serialize one single content-item from a query into JSON
  6. Manually serialize something 

Method 1: Retrieve the data for code-use in WebAPI

Web-APIs are always written in C# - and the object App.Query[...] is also available there. So you can always access it through that, like:

var query = App.Query["All Active Categories"]; var categories = App.Query["All Active Categories"]["Categories"];

Typically it's more fun to work with dynamic objects, so you would usually write:

var categories = AsDynamic(App.Query["All Active Categories"]["Categories"]);

Method 2: Deliver an entire Query to JSON

For most cases when you just want to deliver the data as-is to your client, you can use our new serializers - like this:

[HttpGet] 
[DnnModuleAuthorize(AccessLevel = SecurityAccessLevel.Edit)] 
[ValidateAntiForgeryToken] public dynamic All() { 
    return Sxc.Serializer.Prepare(App.Query["All Feedback"]); 
} 

} 

Method 3: Deliver one stream from a Query to JSON

If you just want one stream - add that stream name as well:

    [
[HttpGet] 
[DnnModuleAuthorize(AccessLevel = SecurityAccessLevel.Anonymous)] 
[ValidateAntiForgeryToken] public dynamic Categories() { 
    // The following line demonstrates how we return all categories from the query, already sorted 
    return Sxc.Serializer.Prepare(App.Query["All Categories"]["Default"]); 
 }

}

BTW: You can also add more than one custom stream - so if your Query delivers 7 streams and you just want to deliver 2 of the streams in JSON, do this:

return Sxc.Serializer.Prepare(App.Query["All Categories"], "Categories, Top10"); 

Method 4: Serialize a single item

return Sxc.Serializer.Prepare(App.Query["All Categories"]["Default"].List.FirstOrDefault());

Method 5: Manually Serialize Something

Often you will have large objects (like Addresses with 20+ fields) but only want to serialize some fields. There are 2 ways to do this:

  1. Create a query which delivers fewer attributes using the Attribute-Filter (not explained here)
  2. Use an anonymous object in your WebAPI (see next example)

 

[HttpGet] 
[DnnModuleAuthorize(AccessLevel = SecurityAccessLevel.Anonymous)]
[ValidateAntiForgeryToken] 
public dynamic Categories() 
{ 
    // And this demonstrates how we would return a list of assembled objects with attributes as we would want 
    return from c in AsDynamic(App.Query["All Categories"]["Default"]) select new { 
        Id = c.EntityId, Title = c.EntityTitle 
    }; 
}

A Note on Query Parameters when using WebAPI

Since a Query can contain any kind of parameters like [QueryString:ID] or [Tab:TabId] or even [In:UserConfiguration:DefaultSortDirection] these are automatically resolved by the Query-Engine whenever you access the query. 

Just make sure that you are using the correct URL-Parameters in the WebAPI-call as they are expected in the Query. A typical mistake would be to have [QueryString:SortDirection] in your Visual Query , but use an AJAX-call placing the Sort-Direction in the post (instead of the url). 

Fully automatic REST / JSON-Interface

New in 2sxc 7.1: This is now possible! On each query you can set read-permissions and then access it through REST .../app-query/QUERYNAME. So you can create a query like "AllCategories", define that anonymous users may access it, and then call it from your JavaScript at  /DesktopModules/2sxc/API/app-query/AllCategories - this will return a JSON based on your query. Just remember to include DNN security tokens OR use the built in helpers from 2sxc which would do that for you - like the AngularJS-service called query.

It would be nice, if actually all Visual-Queries would be available as JSON automatically, without the need for a WebAPI-Interface. The reason this is missing is for security reasons. In WebAPI you can define security requirements for each call - but the Visual Query Designer doesn't offer security settings yet. Once we add that (probably in 2sxc 7.3) we will also create a fully automatic WebAPI-interface which won't require any more coding to retrieve data in JSON. 

Have Fun! 

With love from Switzerland, Daniel 


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see github), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler