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 dont 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%>.
</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