AJAX and the DotNetNuke Repository

After upgrading my sites to DotNetNuke version 4.5.0 I have decided to start experimenting with the new AJAX support built into the DotNetNuke core. I thought the one of the best ways I could start would be to look into the various core modules that I use on a daily basis and see which of them could successfully handle enabling AJAX and still render appropriate page content. This blog entry provides the detail on my first module modification, the DNN Repository.

Disclaimer:

Given the nature of the AJAX support and requirements for successful implmentation you should test the below items on a safe environment prior to actually updating any working production sites as it is possible that even though this worked in my setup that it might not work for you. Therefore, I offer no guarantees that these steps will work for you, however, I can tell you that I have tested them on 5 different DNN installations and they are all working fine for me.

Summary of Changes:

To actually enable AJAX is very simple give tne new features of DNN. You can enable AJAX on an individual user control within a specific module from within the module definitions page. What exactly does enabling AJAX do for the module if it is enabled? Well when you have AJAX enabled for a specific control DotNetNuke will automatically wrap the entire module within an UpdatePanel control which will allow the module to use AJAX for postbacks. This is all accomplished by setting the "Supports Partial Rendering?" option under the module control definition. Below I will provide details on how to enable AJAX on the Repository Module.

Making the Changes:

To make the needed changes you must be logged into the site with the host account, then follow the below instructions.

From the "Host" menu select "Module Definitions"
Click the "Edit" link to the left of the "Repository" module
Scroll to the Control definitions and select "Edit" for the "Repository.aspx" control
On this settings page check the box for "Supports Partial Rendering?"
Click "Update" to save the settings
(Optional) You can set the "Dependencies:" setting for the module by adding "System.Web.UI.ScriptManager" (without quotes), however in my testing this was NOT necessary if modifying an existing module
You should now notice when clicking the "Comments", "Rating", and other selection items within the repository that only that module is updated and not the entire page.

Summary:

This was a very quick and simple tutorial on my first attempts at enabling AJAX on DotNetNuke core modules, there will be more to come in the near future. If you plan on making this change to your own site PLEASE be sure to test this prior to implementation. To see a demonstration of this in action please visit this page http://freedotnetnukestuff.com/FreeModulesSkins/tabid/177/Default.aspx

EDIT 5/31/2007 - Issues have been identified with this method that do not make it practical in all circumstances!

Posted by Mitchel on Monday, April 16, 2007

Tags: DotNetNuke, Tutorials

Comments

Hi,
could you please provide a sample that use the ajaxToolkit:CascadingDropDown as i am not sute how to make a webservice call in dotnetnuke. ans the example I have on MS sites are making webservice call.

Thanks,
Dileep

By Dileep on Tuesday, April 17, 2007 at 4:30 AM

I will try to make this on my list of items to complete. However if you are only interested in making web service calls from DNN, have a look at my Weather Conditions Service module as it makes web service calls.

By host on Sunday, April 22, 2007 at 5:48 PM

Hi Mitchel,

I followed the tutorial and here is my results:
On a page where several repositories are within an aggregator (dnnstuff), the page throws an error:
A critical error has occurred.
Unhandled Error Adding Module to cell1_1

On another page where I just have 1 repository, I get:
A critical error has occurred.
The control with ID 'Repository_UP' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.

I'm in over my head when it comes to troubleshooting these types of errors but I would like to implement this feature for the repository module only because the db postback causes my page skin to break in certain places.

Any suggestions?

Thanks,

Paul

By Paul Sellers on Friday, May 11, 2007 at 11:27 AM

Paul,

That is a very interesting set of errors. For the first one I wonder if it isn't a conflict with the thrid party module you are using.

For the second instance. Are there other modules on the page?

Also, if you look in the event viewer you should have some more detailed information. If you want, grab those errors and make a post in the forum and I can try to help you debug.

I am using this myself on my repository and not having any issues...

By mitchel.sellers@gmail.com on Friday, May 11, 2007 at 11:54 AM

Hi Mitchel,

Here is the error for the page with only the repository on it - no other modules.

InnerException: The control with ID 'Repository_UP' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
FileName:
FileLineNumber: 0
FileColumnNumber: 0
Method: System.Web.UI.UpdatePanel.get_ScriptManager
StackTrace:
Message: System.InvalidOperationException: The control with ID 'Repository_UP' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it. at System.Web.UI.UpdatePanel.get_ScriptManager() at System.Web.UI.UpdatePanel.RegisterPanel() at System.Web.UI.UpdatePanel.OnInit(EventArgs e) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.AddedControl(Control control, Int32 index) at System.Web.UI.ControlCollection.Add(Control child) at DotNetNuke.UI.Skins.Skin.InjectModule(Control objPane, ModuleInfo objModule, PortalSettings PortalSettings)

Here is the page where multiple repositories are within the 3rd party aggregator

InnerException: The control with ID 'Repository_UP' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.
FileName:
FileLineNumber: 0
FileColumnNumber: 0
Method: System.Web.UI.UpdatePanel.get_ScriptManager
StackTrace:
Message: System.InvalidOperationException: The control with ID 'Repository_UP' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it. at System.Web.UI.UpdatePanel.get_ScriptManager() at System.Web.UI.UpdatePanel.RegisterPanel() at System.Web.UI.UpdatePanel.OnInit(EventArgs e) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.InitRecursive(Control namingContainer) at System.Web.UI.Control.AddedControl(Control control, Int32 index) at System.Web.UI.ControlCollection.Add(Control child) at DotNetNuke.UI.Skins.Skin.InjectModule(Control objPane, ModuleInfo objModule, PortalSettings PortalSettings)

It looks like the same error in the log but the actual errors on the pages differ.

Paul

By Paul on Friday, May 11, 2007 at 12:27 PM

Sorry...you said post it in the forums. I'll copy and paste it on over.

Paul

By Paul on Friday, May 11, 2007 at 12:29 PM

hi,I have a same question.I use cascadingdropdown in dnn_4.5.1,
if I use scriptmanager in the module ,I got a error.
[only a instance].
if I donot use scriptmanager in the module
I got another error
[The control with ID 'CascadingDropDownProv' requires a ScriptManager on the page. The ScriptManager must appear before any controls that need it.]
by the way .
my page_load like that

protected void Page_Load(System.Object sender, System.EventArgs e)
{
try
{
if (DotNetNuke.Framework.AJAX.IsInstalled())
{
DotNetNuke.Framework.AJAX.RegisterScriptManager();
ScriptManager objScriptManager = ScriptManager.GetCurrent(this.Page);
ServiceReference objServiceReference = new ServiceReference();
objServiceReference.Path = @"~/DesktopModules/IDCard/IDCardWebService.asmx";
objScriptManager.Services.Add(objServiceReference);
}

}
catch (Exception exc) //Module failed to load
{
Exceptions.ProcessModuleLoadException(this, exc);
}

}

By skygui on Wednesday, May 30, 2007 at 6:06 PM

From my understanding this issue is one that is caused by the way the AJAX implementation was completed in 4.5.1

4.5.2 has fixed SOME of these items, however, the repository is still not fully operational with AJAX enabled.

By mitchel.sellers@gmail.com on Wednesday, May 30, 2007 at 7:55 PM

I have tested it in dnn4.5.2.as same as 4.5.1,by the way.the module was correct in dnn_4.4.

By skygui on Thursday, May 31, 2007 at 12:13 AM

skygui,

I apologize I believe I mis-understood your issue. The issue you are experiencing is in a custom module.

You could try adding a "Script manager Proxy" rather than a script manager to the page.

If you want some more ideas/help please post this to the "Forums" so we can keep the comments clean here.

Thanks!

By mitchel.sellers@gmail.com on Thursday, May 31, 2007 at 3:30 AM

My dnn version is 4.5.3 and i can't work with CascadingDropDown. The error is method error 500.
Any help?
Thanks

By Joao Norte on Friday, July 13, 2007 at 5:30 AM

Joao Norte did you manage to solve the problem with the CascadingDropDown? I'd appreciate if you can post your solution.

By Arif Khan on Sunday, July 29, 2007 at 8:30 PM

please i have a problem
when i use ajaxtelerik
when i add scriptmanager

A critical error has occurred.
Object reference not set to an instance of an object.