Geeks With Blogs
O(geek) Ryan Cain, running in time proportional to Geek.

While working to get the AutoCompleteExtender control up and running in a custom DNN module, I ran across a forum post that said doing so "just works", which if you have previous ASP.NET AJAX experience and know what is and isn't in DNN is probably very true.  Trying to get it to run for the first time though, there's a few items to be aware of. 

Getting Started

First recommendation, go download Fiddler (http://www.fiddler2.com/fiddler2/), like now... no seriously go download it. 

If you are running DNN in a dev environment on localhost, I'd also recommend getting Firefox for testing.  There is a fiddler plugin for Firefox that allows all traffic to be forwarded to fiddler, including localhost traffic, something that isn't easy for Internet Explorer to do.  I'm sure there's some extra tricks to getting DNN to use the ipv4.fiddler name (see the docs post fiddler install that described using the tool with IE), but I didn't have a chance to get into that, and Firefox just works, plus it forces you to test your site in another browser.

The combination of these are are exactly what you need to debug any errors you might be getting but don't see since the AJAX calls are happening in the background (duh). 

You'll also need to download and install the ASP.NET AJAX Control Toolkit from Microsoft (http://www.asp.net/ajaxlibrary/act.ashx).  What is very nice (I'm running DNN 5+) is the core pieces supporting ASP.NET AJAX are already in place in DNN, so there is nothing you need to do in the CMS itself.  The control toolkit when compiled will copy itself into the bin directory of your custom module, so there's nothing extra to install on your DNN server either. 

The Service

Something important to remember is a DNN Module is an ASP.NET user control, which means the default callback mechanisms for AJAX to a static method on a page, will not work.  In fact the built in Smart Tag tool to "Add AutoComplete Page Method" will error out with the error "Cannot create page method "GetCompletionList" because no CodeBehind or CodeFile file was found!".  You will need to either create your own ASMX web service and WCF service.  In my case I simply added the service to my custom module, but since it's just a web service you can serve that up from anywhere. 

I used the VS 2010 built-in "AJAX-enabled WCF Service", but you can use a standard ASMX web service as well, though you do need to decorate this service correctly for it to work with AJAX (notably the class need to be decorated with [ScriptService]).  This automatically decorates your class with all the necessary attributes for it to work as an AJAX enabled web service.  This will also create a new web.config in your custom module and add all sorts of stuff that really can't be there since your module is hosted within the context of a larger site.  You'll need to copy the relevant bits into the web.config for your DNN site.  The relevant bits include everything in the <system.serviceModel> section, including the behaviors, serviceHostingEnvironment and services. 

Now you can add your WCF service for the auto complete.  In my case I'm working against a Linq-to-SQL model, so my method looks like (note that if you use clipboard inheritance and copy from another project that created this method in the code behind of an ASP.NET page this method is marked as static, which it can't be in the context of a true service.  This is soemthing that I kept missing and causes things not to run during execution):

        [OperationContract]
        public string[] GetCompletionList(string prefixText, int count, string contextKey)
        {
            DataClassesDataContext dc = new DataClassesDataContext();

            var q = from t in dc.Tags
                    where t.Description.ToLower().StartsWith(prefixText.ToLower())
                    select t.Description;

            return q.Take(count).ToArray();
        }

That's it for your service. 

The Client

On the client side, if you've followed the Microsoft install instructions, you should now be able to drag and drop a TextBox onto your page and extend it with the AutoCompleteExtender.  Since DNN is already ASP.NET AJAX aware, it already has a ScriptManager on the page, so if you happen to add that or a ToolkitScriptManager to your code, your module will blow up at runtime.  If needed you can always get at this script manager and add attributes and info to do via code.  In this case the AutoCompleteExtender has all it needs in the tag attributes. 

The two key tag attributes you need for the AutoCompleteExtender are:

ServiceMethod

="GetCompletionList"

 

ServicePath="MyService.svc"

The first tells the control what web service method to call, the second is the actual URL of the service that you will be calling.  (DNN appears to resolve the URL correctly into the folder DesktopModules where your custom module code is located.) 

 

That should be all you need to get up and running.  It is nice to see these "newer" technologies supported by DNN while the CMS lags a big behind in other areas. 

Posted on Tuesday, September 7, 2010 8:30 AM | Back to top


Comments on this post: ASP.NET AJAX Control Toolkit and DotNetNuke Module Development

# re: ASP.NET AJAX Control Toolkit and DotNetNuke Module Development
Requesting Gravatar...
Thank you Thank you Thank you Thank you Thank you!
God bless you.
my problem was the static modifier in the 'GetCompletionList' function.
Thanks!!!
Left by Rina on Aug 25, 2011 4:04 PM

Your comment:
 (will show your gravatar)


Copyright © Ryan Cain | Powered by: GeeksWithBlogs.net