(734)545-8017

The Human Element Blog

Installing an Ajax Toolkit on a DotNetNuke site

Posted May 17, 2011 by

For those who have never heard of Ajax, let me bring you up to speed.

Ajax stands for Asynchronous Javascript and XML. But that’s just a fancy way of saying: Ajax can make things move or update on a web page reloading entire page. (doing that flickering thing that happens when you press the roundy arrow button on your browser or go to a new page).

Note: Click here to check out various Ajax controls in action.

So how can you get DotNetNuke to play nicely with Ajax?

Ajax / DNN Implementation

There many different ways to use Ajax. To make things simpler, let’s just explore one implementation, which will prove that I’ve successfully downloaded and installed an AjaxToolkit on my DotNetNuke site:

My Ajax/DNN implementation: I have created a custom DotNetNuke container that uses the “CollapsiblePanelExtender” control from AjaxControlToolkit version 3.0.30930 so that the container can expand and contract vertically to hide / show its content. The actual code is outside the scope of this writing, but I will describe what I did to get the Ajax toolkit working within a DNN container.

Before jumping ahead to the installation steps, we’ll have to cover some basic concepts for all the newbies out there:

Basic Concepts

DNN Containers: As you may know, DotNetNuke uses “Containers”.

You can apply containers to blocks of content (modules) on a DNN page from within the admin (Module Settings / Page Settings / Module Container).  A module can inherit a whole new set of styles / appearance depending on what container is assigned to it.

If you have access to editing the DotNetNuke file system, you can even make your own custom containers.

Containers are made up of .ascx and .css files. In the .ascx file, developers can write code including HTML, JavaScript and ASP.NET to define the structure and custom functionality of the container.

Control: The best way to explain controls is to give examples. Drop down box, buttons, text boxes, radio buttons, check boxes are all examples of controls. Controls each have their own behavior, properties and functions. There are a set of controls that are specific to HTML. Also, ASP.Net has a set of controls and Ajax toolkits come with their own set of unique controls too.

Note: Click here to check out various Ajax controls in action.

Applying the Basic Concepts

So what do Ajax controls have to do with creating a DNN container that can expand and contract vertically to show / hide its HTML content?

Well… the “CollapsiblePanelExtender” Ajax control allows you to define an area to expand or contract when a certain button is clicked. You can include the “CollapsiblePanelExtender” Ajax control in a DotNetNuke container .ascx file to make its content pane expand or contract.

Note: Click here to see the “CollapsiblePanelExtender” Ajax control in action

Finally, Installing an Ajax Toolkit on a DotNetNuke site

When I applied my custom container (that used the“CollapsiblePanelExtender” Ajax control ) to a page, it looked like this:

AjaxControlToolkit_NotInstalledError

Don’t worry, this is just a development site and is not public facing! I got an error because the AjaxControlToolkit version 3.0.30930 hasn’t been installed yet. Here are the steps I took to get this toolkit installed:

  • Note: These steps were carried out for DotNetNuke Version 05.02.01. Always backup your files and databases before you make any changes. If you break it, it’s your fault so don’t try to shift the blame here.
  • Download the AjaxControlToolkit version 3.0.30930 September 2009 Release
  • Note: The first time I tried this, I used the latest AjaxControlToolkit version at the time. My local DNN 05.05.01 development environment didn’t seem to respond to this version, but it worked for version 3.0.30930. Maybe you would have more success with the latest version of the AjaxControlToolkit. Maybe not.
  • Go ahead and download the “AJAX Control Toolkit – Binary”. We don’t want the source because there is no need to make any modifications to the core files of the toolkit unless you really want to nerd out… nerd.
  • You will get a .zip file. If you are running on Windows 7, make sure you do the following before you try to unzip the .zip. Right click on the .zip folder / Properties / General tab / Unblock / and apply your changes. If you don’t unblock the .zip file, then not all of the files may not be extracted. If you don’t see the “Unblock” button in the “General” tab, then maybe it’s already unblocked. Thank you Windows security!
  • Right click / Extract all. Moving on…
  • Note: You will need to be able to see your file extensions for the next step. Congratulations if your settings are already set up to show file extensions; you may move to the next step. If not, welcome to the party. Please catch up.
  • If you open the unzipped file, you will see a lot of files that we don’t really care about right now. Find the one with the .dll extension (AjaxControlToolkit.dll). For those who are easily impressed by metaphorical jargon, consider this the heart of the AjaxControlToolkit. Alright! We are going to transplant this baby into your DotNetNuke file system!
  • Note: There’s a chance that, your DotNetNuke file system is on a remote server. You will need access to this file system. There are different ways to accomplish this including using FTP or a remote desktop connection application. Whatever access method you choose is none of my business because that’s outside the scope of this writing.
  • Copy the AjaxControlToolkit.dll file and get ready for some pasting!
  • Note: Be very careful when messing with the contents of the “bin” file. It contains a whole bunch of compiled code that DotNetNuke needs to be something more than a broken pile of fail. You probably already know this though, but now I know you know and that helps me sleep at night.
  • There’s a folder called “bin” at the root of your DotNetNuke site. Go ahead and paste the AjaxControlToolkit.dll file here.
  • Now, when you refresh your DotNetNuke site, it’s going to take a little longer than usual. This is because there was a change in the bin file and DotNetNuke is processing it.
  • When DNN is done computing the new .dll, you should be all set to use the controls in the AjaxControlToolkit anywhere in your DNN site. At least it works for me! Hooray for me! (hopefully you too)!
  • Check out my error-free custom container now! Ohhhhhhh yeah.

AjaxSlider_working

Posted By

Senior Software Engineer

Comments (0)

Post a comment