DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.


Creating A DotNetNuke Module using the ASP.NET AJAX Control Toolkit

This tutorial will build a sample module that implements the Popup Control Extender from the Microsoft ASP.NET AJAX Control toolkit. The extender will be used to display a list of names in a drop-down when the user clicks on the text box. The user will be able to type a name in the text box or select a name from the drop-down list.

Install The AJAX Control Toolkit

Download the AJAX Control Toolkit from http://www.asp.net 

The .zip file that you download will contain a number of files.

Unzip the file AjaxControlToolkit.dll and place it in the "/bin" directory of your DotNetNuke web site.

Add the AJAX Toolkit controls to the Visual Studio Toolbox

In Visual Studio (or Visual Web Developer Express), right-click on the toolbox and select Add Tab.

Give the Tab a name

Expand the tab that was just created and right-click on the section and select Choose Items.

Use the Browse button to browse to AjaxControlToolkit.dll (in the /bin folder of your DotNetNuke installation) and click the OK button.

The AJAX Toolkit controls will now appear in your toolbox:

Enter the Code

Create a DotNetNuke User Control  (See the tutorial Creating a  Super-Simple DotNetNuke module for information on how to create a DotNetNuke User Control).

Open the source view of the .aspx page of your User Control and enter this code:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="AJAXControlToolkit.ascx.vb" 
Inherits="DotNetNuke.Modules.AJAXControlToolkit.AJAXControlToolkit" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<br />
<table>
    <tr>
        <td nowrap="noWrap" valign="top">
            <strong>Enter User:</strong>
            <asp:TextBox ID="MessageTextBox" runat="server" Width="200" autocomplete="off" />&nbsp;
            <asp:Button ID="btnUser" runat="server" Text="Select User" /></td>
        <td nowrap="noWrap" valign="top">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <strong>&nbsp; Selected:</strong>
                    <asp:Label ID="lblSelectedUser" runat="server"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnUser" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </td>
    </tr>
</table>
<br />
&nbsp;<br />
<asp:Panel ID="Panel2" runat="server">
    <div>
        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
            <ContentTemplate>
                <asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" 
	OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
                    Style="border: 1px outset white; width: 200px" BackColor="white">
                    <asp:ListItem Text="Shaun Walker" />
                    <asp:ListItem Text="Joe Brinkman" />
                    <asp:ListItem Text="Nik Kalyani" />
                    <asp:ListItem Text="Scott Willhite" />
                    <asp:ListItem Text="Cancel" Value="" />
                </asp:RadioButtonList>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</asp:Panel>
<ajaxToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server" TargetControlID="MessageTextBox"
    PopupControlID="Panel2" CommitProperty="value" Position="Bottom" CommitScript="e.value;" />

 

Switch to design view of the .aspx User Control and the display will resemble this:

in the code behind of your User Control enter this code:

Imports DotNetNuke
Imports System.Collections.Generic
Namespace DotNetNuke.Modules.AJAXControlToolkit
 
    Partial Class AJAXControlToolkit
        Inherits DotNetNuke.Entities.Modules.PortalModuleBase
 
        Protected Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
            Try
                If DotNetNuke.Framework.AJAX.IsInstalled Then
                    DotNetNuke.Framework.AJAX.RegisterScriptManager()
                End If
            Catch exc As Exception        'Module failed to load
                ProcessModuleLoadException(Me, exc)
            End Try
        End Sub
 
        Protected Sub RadioButtonList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs)
            If Not String.IsNullOrEmpty(RadioButtonList1.SelectedValue) Then
                ' Popup result is the selected task
                PopupControlExtender2.Commit(RadioButtonList1.SelectedValue)
            Else
                ' Cancel the popup
                PopupControlExtender2.Cancel()
            End If
            ' Reset the selected item
            RadioButtonList1.ClearSelection()
        End Sub
 
        Protected Sub btnUser_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUser.Click
            lblSelectedUser.Text = MessageTextBox.Text
        End Sub
    End Class
 
End Namespace

 

Save the User Control and place an instance of it on a page in your DotNetNuke site (see the tutorial Creating a  Super-Simple DotNetNuke module for information on how to configure a DotNetNuke User Control and place an instance of it on a page in your DotNetNuke Site). You can download the complete module from here: AJAXControlToolkit_01.00.00_Install.zip.

A Few Things To Note

This example module does not use the Supports Partial Rendering setting in the configuration for the User Control that would normally wrap the entire control in an Update Panel. Instead it uses this code:

If DotNetNuke.Framework.AJAX.IsInstalled Then
DotNetNuke.Framework.AJAX.RegisterScriptManager()
End If

 

to instruct the DotNetNuke framework to insert the ScriptManager control that allows the AJAX functionality to work. Update Panels are only used to wrap the drop-down list and the Selected label.

The sample code has this dependency set,  AjaxControlToolkit.PopupControlExtender.

If the ASP.NET AJAX Control toolkit assembly is not in the /bin folder of the DotNetNuke site (or available in the Global Assembly Cache (GAC)) the module will not install and it will show an error.

Download the sample code here: AJAXControlToolkit_01.00.00_Install.zip

Comments

Comment Form

Only registered users may post comments.

NewsArchives


Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Andy Tryba (1)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (32)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Bogdan Litescu (1)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (209)
Chris Paterra (55)
Clinton Patterson (41)
Cuong Dang (21)
Daniel Bartholomew (2)
Daniel Mettler (154)
Dave Buckner (2)
David Poindexter (4)
David Rodriguez (3)
Dennis Shiao (1)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (10)
George Alatrash (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (274)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Miguel Gatmaytan (3)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (54)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (40)
Will Strohl (165)
William Severance (5)

Content Layout

Subscribe to DNN Digest

Subscribe to DNN Digest

DNN Digest is our monthly email newsletter. It highlights news and content from around the DNN ecosystem, such as new modules and themes, messages from leadership, blog posts and notable tweets. Keep your finger on the pulse of the ecosystem by subscribing.  


Copyright 2017 by DNN Corp Terms of Use Privacy
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out