xLevel.org.uk

Converting HTML & JavaScript to an ASP.Net control

In the last post we created a image gallery control using HTML and JavaScript using the jQuery library. In this post we are going to take this control and turn it into an ASP.Net control that can be used in an ASP.Net website or web application.

There are number of steps we are going to have to go through to wrap the HTML / JavaScript construct we created in the last post and render it out from an ASP.Net control.

The control needs to allow the web site designer to be able to modify various settings, such as the period between image changes and the fade out time. It needs to allow definition of the different images within the array and, lastly, render the modified the HTML and JavaScript.

Creating the basic ASP.Net control

We start by creating the FadingImageControl. This is a simple C# class which inherits from System.Web.UI.Control. To this we are going to add three properties;

• Interval – This is the interval between image changes.
• FadePeriod – This is the time that images will take to fade in or out.
• CssClass – This is CSS class is added to the surrounding <div>. This allows the designer to CSS rules to modify the look and feel of the control.

namespace xLevel.Web.UI.WebControls
{
 [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
 public sealed class FadingImageGallery : Control
 {
  private string m_CssClass = string.Empty;
  private int m_Interval = 10000;
  private int m_FadePeriod = 2000;

  public int Interval
  {
   get { return m_Interval; }
   set { m_Interval = value; }
  }

  public int FadePeriod
  {
   get { return m_FadePeriod; }
   set { m_FadePeriod = value; }
  }

  public string CssClass
  {
   get { return m_CssClass; }
   set { m_CssClass = value; }
  }
 }
}

Defining the image array

With other ASP.Net controls where you define the contents of an array, this is done by creating sub controls within the main control, some thing like this;

<xlvl:FadingImageGallery ID="fig" runat="server">
 <xlvl:Image ImagePath="~/img/Duck-thumb.jpg" Title="Duck swimming in a pond.">
 <xlvl:Image ImagePath="~/img/Dinghy-thumb.jpg" Title="Dinghy sailing on a lake.">
 <xlvl:Image ImagePath="~/img/Gorse-thumb.jpg" Title="Gorse flowers.">
</xlvl:FadingImageGallery>

To do this we need to first create the Image class. This class holds the image path and title values for the JSON style class array that defines the images to be displayed by the control. To allow for this we add two properties, ImagePath and Title and a constructor that allows these to properties to be defined, public Image(string title, string imagePath).

Next, we add a new property to the FadingImageGallery to hold the image definitions. To do this, we create a generic List that we expose this through a getter only property called Images.

To allow only Image classes to be created inside the FadingImageGallery tag and to convert them into entries in the Images collection, we need to add a ParseChildren attribute to the class.

[ParseChildren(true, "Images")]

This tells ASP.Net to convert the all tags within the FadingImageGallery tags into Image classes and add them to the array exposed in the Images property.

Modifying and rendering the controls JavaScript

Lastly we need to enable the control to render the HTML and JavaScript that makes up the client side part of the control.

To do this, we need to override the CreateChildControls method. First we check if there any images in the Images property, if not, then there is no point creating the control.

If there are entries in the Images list, then we create a Panel control, which renders as a div and an Image control, which renders as a img tag. The Panel control is added to the local Controls collection, and the Image control is added to the Panel.

Next, we modify the JavaScript. The JavaScript functions are contained internally to the control as a string variable into which we then insert the Image control’s ClientID, the Interval and FadePeriod properties and the generated JSON style image array.

This string variable is then added to a InnerText property of a script tag that is then added to the Controls collection of the page’s Header section.

Using the FadingImageGallery control

To use the FadingImageGallery control in a web page we only need to do two things.

First, we need to register the xLevel.Web.UI.WebControls assembly in the page. This is done by adding the Register page directive to the top of the page.

<%@ Register TagPrefix="xlvl" Namespace="xLevel.Web.UI.WebControls"
Assembly="xLevel.Web.UI.WebControls" />

Next, we need to add a script tag to the page header to make sure the jQuery JavaScript library is accessible.

<script type="text/javascript" language="javascript"
src="js/jquery-1.2.6.js"></script>

Now the page is ready for us to add the FadingImageGallery tag.

<xlvl:FadingImageGallery ID="fig" runat="server" >
  ... 
</xlvl:FadingImageGallery>

Lastly, we need to add an Image tag for each entry that will be switched between.

<xlvl:Image ImagePath="~/img/Duck-thumb.jpg"
Title="Duck swimming in a pond." />

Available examples

You can download an example ASP.Net website that uses the FadingImageGallery control.