Custom Controls with User Controls in ASP.Net: Part 1

Introduction

I hope you must be aware about the User Controls. Ok. Don't worry I am trying to explain it in my own words. User control enables us to build a new control from existing controls. By taking advantage of User controls, we can easily extend the ASP.NET Framework with our own custom controls. Imagine that we need to display the same address form in multiple pages in a web application. The address form consists of several TextBox and Validation controls for entering address information. If we want to avoid declaring all the TextBox and Validation controls in multiple pages, we can wrap these controls inside a Web User control. Anytime, that we discover, that we need to display the same user interface elements in multiple pages, we should consider wrapping the elements inside a User Control. By taking advantage of User controls, we make your website easier to maintain and extend.

Now let's start building a simple User control that will randomly display one image from a folder of images named images also. Here is the User Control code.

RandomImages.ascx File Code

<%@ Control Language="VB" ClassName="RandomImage"%>

<%@ Import Namespace="System.IO" %>

<script runat="server">

    Private Sub Page_Load()
        Dim imageToDisplay As String = GetRandomImage()
        imgRandom.ImageUrl = Path.Combine("~/Images", imageToDisplay)
        lblRandom.Text = imageToDisplay
    End Sub

    Private Function GetRandomImage() As String
        Dim rnd As New Random()
        Dim images() As String = Directory.GetFiles(MapPath("~/Images"), "*.JPG")
        Dim imageToDisplay As String = images(rnd.Next(images.Length))
        Return Path.GetFileName(imageToDisplay)
    End Function
</script>

<asp:Image
    id="imgRandom"
    Width="300px"
    Runat="server" />
<br />
<asp:Label
    id="lblRandom"
    Runat="server" />


Above file closely resembles a standard ASP.NET page. Like a standard ASP.NET page, the User Control contains a Page_Load() event handler, ASP.NET Image and Label controls. User controls are closely related to ASP.NET pages. Both the UserControl class and the Page class derive from the base TemplateControl class. Because they derive from the same base class, they share many of the same methods, properties, and events. The important difference between an ASP.NET page and a User control is that a User control is something we can declare in an ASP.NET page. When we build a User control, we are building a custom control. Notice that above file ends with the .ascx extension. We cannot request this file directly from a web browser. To use the RandomImage User Control, we must declare the control in an ASP.NET page as given below.

<%@ Register TagPrefix="user" TagName="RandomImage" Src="~/RandomImages.ascx" %>

The page given below contains the RandomImage User Control. When we open the page, a random image is displayed.

Default.aspx File Code

<%@ Page Language="VB" CodeFile="Default.aspx.vb" Inherits="_Default"%>

<%@ Register TagPrefix="user" TagName="RandomImage" Src="~/RandomImages.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<
body>
    <form id="form1" runat="server">
    <div>

    <user:RandomImage
        ID="RandomImage1"
        Runat="server" />

    </div>
    </form>
</body>
</
html>


In above example, in <%@ Register %> directive we have used following three attributes:

• TagPrefix: Indicates the namespace that we want to associate with the User Control for the current page. We can use any string that we want.
• TagName: Indicates the name that we want to associate with the User Control for the current page. We can use any string that we want.
• Src: Indicates the virtual path to the User control (the path for the .ascx file)

RandomImage User Control is declared in the body of the page as follows:

<user:RandomImage
        ID="RandomImage1"
        Runat="server" />

User1.gif

Note: Continue in next part.

HAVE A GREAT CODING!


Similar Articles