Creating a Custom Web Server Control – Alphabet Selector Web Server Control

The instructions below talk you though building your own Alphabet Selector Web Control. There is also a link at the bottom to download the control if you prefer.

1) In Visual Studio, create a new ASP.Net Server Control project (File – New – Project – Language of Choice – Web – ASP.Net Server Control). Name your project ‘ServerControl1′. Please note, this is also know as a Web Control Library, depending on which version of Visual Studio you are using. If you cant find it, check each tab, I found mine under Windows!

2) Your new project will consist of a single class file which inherits from WebControl. It contains a single default property ‘text’ which we do not need, and an override of the RenderContents method where you place your code if you want to output to the screen. Since we will be creating a LinkButton control for each letter in the alphabet and adding this to the page controls, we will not need to override the RenderContents method. Instead we will be overriding the OnInit method within which we will create our alphabet.

3) Update the class file as follows:

Imports System
Imports System.Collections.Generic
Imports System.ComponentModel
Imports System.Text
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Public Class ServerControl1
    Inherits WebControl

End Class

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public class ServerControl1 : WebControl
{

}

4) The first thing we are going to declare is a public event. On selecting a letter from the Alphabet, an ItemSelected event will be raised. Raising this event allows the page using our control to know what letter has been selected by handling the event. In your class definition, add the following:

Public Class ServerControl1
    Inherits WebControl

    Public Event ItemSelected As System.EventHandler

End Class

public class ServerControl1 : WebControl
{
    public event EventHandler ItemSelected;

}

5) After handling the event declared above, for the page to be able to get to the data about what letter has been selected, we need to make a public property available which holds this information. Add the following property to your code:

Public ReadOnly Property SelectedItem() As String
    Get
        Dim _s As String = CStr(Me.ViewState("selected"))
        If _s Is Nothing Then
            Return String.Empty
        Else
            Return _s
        End If
    End Get
End Property

public string SelectedItem
{
    get
    {
        string _s = (string)(this.ViewState["selected"]);
        if (_s == null)
            return string.Empty;
        else
            return _s;
    }
}

6) Add the code to create the alphabet in the overrideable OnInit function. Look out for how we define the handler method for the LinkButton click events, i.e.

...
AddHandler _lbAll.Click, AddressOf LinkButton_Click
...

...
_lb.Click += new EventHandler(LinkButton_Click);
...

in

...
Protected Overrides Sub OnInit(ByVal e As System.EventArgs)
    ' Add the A to Z hyperlinks as individual LinkButtons.
    For i As Integer = 65 To 90 ' Ascii representations.
        Dim _lb As LinkButton = CreateLinkButton(Chr(i), Chr(i), Chr(i))
        If Not IsNothing(_lb) Then
            AddHandler _lb.Click, AddressOf LinkButton_Click
            Me.Controls.Add(_lb)
            Me.Controls.Add(New LiteralControl(" "))
        End If
    Next
    ' Optional - add an 'All' button.
    Dim _lbAll As LinkButton = CreateLinkButton("All", "All", "All")
    AddHandler _lbAll.Click, AddressOf LinkButton_Click
    _lbAll.CausesValidation = False
    Me.Controls.Add(_lbAll)
    MyBase.OnInit(e)
End Sub

Private Function CreateLinkButton(ByVal text As String, ByVal cArg As String, ByVal id As String) As LinkButton
    Dim _lb As New LinkButton
    _lb.Text = text
    _lb.CommandArgument = cArg
    _lb.ID = id
    Return _lb
End Function
...

...
protected override void OnInit(EventArgs e)
{
    for (int i = 65; i <= 90; i++)
    {
        LinkButton _lb = CreateLinkButton(Convert.ToChar(i).ToString(), Convert.ToChar(i).ToString(), Convert.ToChar(i).ToString());
        _lb.Click += new EventHandler(LinkButton_Click);
        this.Controls.Add(_lb);
        this.Controls.Add(new LiteralControl(" "));
    }
    // Optional - add an 'All' button.
    LinkButton _lbAll = CreateLinkButton("All", "All", "All");
    _lbAll.Click += new EventHandler(LinkButton_Click);
    _lbAll.CausesValidation = false;
    this.Controls.Add(_lbAll);
    base.OnInit(e);
}

private LinkButton CreateLinkButton(string text, string cArg, string id)
{
    LinkButton _lb = new LinkButton();
    _lb.Text = text;
    _lb.CommandArgument = cArg;
    _lb.ID = id;
    return _lb;
}
...

7 ) Finally, add the click handler function which will store the selected letter and raise the ItemSelected event to be handled by the page using the control.

...
Private Sub LinkButton_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)
    If Not IsNothing(Me.SelectedItem) AndAlso Trim(Me.SelectedItem.ToString) <> "" Then
        Dim _lb As LinkButton = CType(Me.FindControl(Me.SelectedItem), LinkButton)
        _lb.Enabled = True
    End If
    Me.ViewState("selected") = CType(sender, LinkButton).CommandArgument
    ' Disable the selected button (to stop it being clicked multiple times and raising the event more than once at a time.)
    CType(sender, LinkButton).Enabled = False
    ' Throw the ItemSelected event.
    RaiseEvent ItemSelected(Me, New EventArgs())
End Sub
...

...
private void LinkButton_Click(Object sender, System.EventArgs e)
{
    if (this.SelectedItem != null && this.SelectedItem.ToString() != "")
    {
        LinkButton _lb = (LinkButton)this.FindControl(this.SelectedItem);
       _lb.Enabled = true;
    }
    this.ViewState["selected"] = ((LinkButton)sender).CommandArgument;
    // Disable the selected button (to stop it being clicked multiple times and raising the event more than once at a time.)
    ((LinkButton)sender).Enabled = false;
    // Throw the ItemSelected event.
    ItemSelected(this, new EventArgs());
}
...

See this page for information on how to add your shiny new control to a web page.

To download an Alphabet Selector Web Control with example projects for both VB.Net and C#, click here

Related posts:

1. Alphabet Selector Web Server Control
2. Default .Net Membership Provider – Override Password Generator via Implementing a Custom Membership Provider
3. Component to Connect to Active Directory with Sharepoint WSS