Using ajax in DotNetNuke

Article describes how to load data from server and show results on DotNetNuke page using AJAX.

Introduction

There are many nice javascript controls and libraries that you could use within your DotNetNuke site but you are not. This is often because they need to load some data from server in form of text, JSON, XML, etc. And after user made some manipulations you probably want to update some data in the database, but again without page reload. But how data can be delivered to the client-side script? Using Visual Studio leads to huge overhead: you need a test environment, you must plan deployment, etc. If you have a small site and little budget you probably won't be happy with this. But there is a way to do it rapidly without any compilation, deployment, test environment and other stuff.

There are 3 steps to be done here:

• Write SQL code
• Create server-side code that formats data and sends it to the client
• Write a client-side code that initiate the process and send data to the UI controls.

All this stuff can be easily done using DotNetNuke browser-based development environment - XsltDb. Here I show you 2 ways of delivering data from server to client: by using AJAX and by providing URL.

Using javascript function to access server

This is what we want to have on client:

getSomeDataFromServer(a,b,c, function(downloadedData){<br />      someControl.data = downloadedData;<br />   });<br />

Some function sends some parameters to the server and calls a callback when done. To create such a function I use XsltDb. Put a new XsltDb module on a page where you need this javascript function and write following code into it:

##handler: getUsers(searchKey)<br />  <xsl:copy-of select="mdo:sql('<br />    select UserID, DisplayName from {databaseOwner}[{objectQualifier}Users]<br />    where Username like @searchKey<br />    ', 'user', '@searchKey', mdo:request('searchKey'))"/><br />

That'all ! Three step mentioned above are completed.  Attention! This module must be a super module (checker above the code editor) as it accesses database directly. This function searches for users by DisplayName The usage is:

alert(getUsers('%bu%'));  /* Synchronous */<br />  getUsers('%bu%', function(users){    /* Asynchronous */<br />    alert(users);<br />  });<br />

Creating an URL that returns some data as XML

Again, put a new XsltDb module on a page. Paste the following code and check "super module" option:

<xsl:if test="mdo:request('service')"><br />  <xsl:copy-of select="mdo:sql('<br />    select UserID, DisplayName from {databaseOwner}[{objectQualifier}Users]<br />    where Username like @searchKey<br />    ', 'user', '@searchKey', mdo:request('searchKey'))"/><br /></xsl:if>

Fill alias field above configuration as users. After that you can use the service as follows:

$.get('/DesktopModules/XsltDb/ws.aspx?service=<span style="font-weight:bold;">users</span>&searchKey='<br />    + escape('%bu%'), function(xml){<br />    alert((new XMLSerializer()).serializeToString(xml));<br />  });<br />

As you see, AJAX-ing in DotNetNuke is quite simple!

Tools used

Tools used for this article:

• DotNetNuke 5.4.2
• XsltDb 01.01.31