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!