Custom Web Control

[Mondeo]

I want to create my first custom control using VS 2005. I want to inherit from literal so that the control outputs html, and simply have two integer input values, NumberOfPages and CurrentPage.

 

How do I do it (realise its probably simple but its my first one!)

 

Thanks

[MrPaul]

Custom control demo

 

As with so many things there are a few different ways to do this. However, the following is probably the easiest.

 

One thing to note is that you don't really want to inherit from LiteralControl - literal webcontrols are just are "literal" HTML elements, such as <a>, <img> and so on. All visual controls output some form of HTML, whether they are derived from LiteralControl or not, but literals typically only output one element, rather than web controls which typically output multiple HTML elements and scripts which make up the whole control.

 

Okay, on to creating your own control.

 

Add a Web User Control to your project. A HTML code window will open which behaves just like an aspx page - you can switch between Design mode to add elements using the designer and Source mode to edit the HTML. Also like an aspx page, a code file will be generated which can be used to add any event handling code you need, as well as custom properties and methods.

 

Web controls, like web pages, are just classes and as such you can add properties and methods to them like any other class. So your codebehind might look something like this:

 

Partial Class UI_Components_Demo
   Inherits System.Web.UI.UserControl

   'Fields
   Private m_pagenum As Integer
   Private m_pagetot As Integer

   'Properties
   Public Property CurrentPage() As Integer
       Get
           Return m_pagenum
       End Get
       Set(ByVal value As Integer)
           m_pagenum = value
       End Set
   End Property
   Public Property NumberOfPages() As Integer
       Get
           Return m_pagetot
       End Get
       Set(ByVal value As Integer)
           m_pagetot = value
       End Set
   End Property

End Class

 

And to display these properties on your control you can do it via the codebehind and manipulating the control elements that way, or you can do it in the HTML of the control:

 

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Demo.ascx.vb" Inherits="UI_Components_Demo" %>

<div>
   <span>You are viewing page <%=Me.CurrentPage%> of <%=Me.NumberOfPages%>.</span>
</div>

 

Then, you can use your control on a web page, by declaring it at the top of the page. In this example the control is called Demo:

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TestPage.aspx.vb" Inherits="TestPage" %>
<%@ Register Src="Demo.ascx" TagName="Demo" TagPrefix="mycontrols" %>

<mycontrols:Demo ID="test" runat="server" CurrentPage="10" NumberOfPages="20" />

 

Hopefully you get the idea. Good luck ;)