Building a simple User control that randomly displays one image : Basics « Custom Controls « ASP.NET Tutorial






  1. ASP.NET Tutorial
  2. Custom Controls
  3. Basics
Both the UserControl class and the Page class derive from the base TemplateControl class. 

Custom control is stored in the file with .ascx extension. 
You cannot request this file directly from a web browser. 


Before using a web User control, you must register it. 
<%@ Register %> directive contains the three attributes:

TagPrefix:    namespace. You can use any string that you want.

TagName:      name that you want to associate with the User control. 
              
Src:          virtual path to the User control (the path to the .ascx file).



File: Control.ascx

<%@ Control Language="C#" ClassName="RandomImage" %>
<%@ Import Namespace="System.IO" %>

<script runat="server">

    void Page_Load()
    {
        string imageToDisplay = GetRandomImage();
        imgRandom.ImageUrl = Path.Combine("~/Images", imageToDisplay);
        lblRandom.Text = imageToDisplay;
    }

    private string GetRandomImage()
    {
        Random rnd = new Random();
        string[] images = Directory.GetFiles(MapPath("~/Images"), "*.jpg");
        string imageToDisplay = images[rnd.Next(images.Length)];
        return Path.GetFileName(imageToDisplay);
    }

</script>

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


File: ShowRandomImage.aspx

<%@ Page Language="C#" %>
<%@ Register TagPrefix="user" TagName="RandomImage" Src="~/Control.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Show RandomImage</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

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

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








14.2.Basics
14.2.1.User control with property
14.2.2.ASP controls in user control
14.2.3.A Web user control file template
14.2.4.Adding controls to the Web user control
14.2.5.Creating control events in a user control (C#)
14.2.6.Creating control events in a user control (VB)
14.2.7.Exposing user control properties (C#)
14.2.8.Exposing user control properties (VB)
14.2.9.Populating user control properties from the host Web page (C#)
14.2.10.Populating user control properties from the host Web page (VB)
14.2.11.Component level variable
14.2.12.Action from user-defined control
14.2.13.Pass parameter from user-defined controls to host page
14.2.14.Calculator component based on page component (VB.net)
14.2.15.Day minder page component
14.2.16.Use custom control in Assembly
14.2.17.Building a simple User control that randomly displays one image
14.2.18.Registering User Controls in the Web Configuration File
14.2.19.Building Fully Rendered Controls