In this article we will cover adding a custom user control to a DotNetNuke skin and how to set some parameters.
Adding User Control to DotNetNuke Skin
To add the user control to the DotNetNuke skin place the reference to the control at the top of the page
<%@ Register TagPrefix="janet" TagName="menu" Src="~/DesktopModules/janet.Menu/show.ascx" %>
Now at the location on the page where you want the user control to appear add a reference to it, don't forget to ensure that its ID is unique.
<janet:menu id=janetMenu runat="server"></janet:menu>
For further examples take a look at the skin files which are already available on the server at C:\Inetpub\wwwroot\dotnetnuke\Portals\_default\Skins\DNN-Blue. Look for the files ending in .ascx, for example "Vertical Menu - Fixed Width.ascx."
User Control Property Parameters
Adding property parameters to the user control is surprisingly easy. Lets consider adding a class parameter.
To begin add the parameter to the user control in the skin, in our example below CssClass
<janet:SkinLinks id="janetSkinLinks1" runat="server" CssClass="skinLogin"></janet:SkinLinks>
We will use this to set the class of our output, in this case an asp hyperlink.
Now we need a couple more files. The first is the rendering of our user control. For this we shall have a page wih an asp hyperlink, as alredy mentioned.
<%@ Control Language="vb" AutoEventWireup="false" Inherits="janet.SkinLinks.Show" CodeBehind="show.ascx.vb" Explicit="True" %><asp:hyperlink id=hypSkinLinks runat="server"></asp:hyperlink>
The second file is the code behind for this one. Most of the configuration for this file is outside of the scope of this article. I shall concentrate on those elements which are relevant.
Near the start of the file, shortly after the class definition add a definition for the class parameter. In this case we shall call it _CssClass. It is used to store the value of the property, globally available across our backend class code.
Namespacejanet.SkinLinks
Public MustInherit Class Show
Inherits Entities.Modules.PortalModuleBase
#Region "Private Members"
Dim _CssClass As String
#End Region
And add property definition for CssClass, which has the same name as the value used in the user control definition.
Public Property CssClass() As String
Get
Return _CssClass
End Get
Set(ByVal Value As String)
_CssClass = Value
End Set
End Property
Note whilst this articles has been aimed at DotNetNuke the content is also relevant to asp.net pages. In this case consider the ascx file as an aspx page with the associated backend file. The placement of the user control within the DotNeTNuke skin should be considered in relation to the .aspx web page.
NAT August 2005