Creating User Control that randomly display image
Open your Visual Studio 2010
- Click on Website option on toolbar.
- Click on Add New Item... or ctrl + shift + A.
- Select Web User Control
Web User Control has .ascx extension.
In this example we User Control page contain Page_Load() event handler and also ASP.NET Image and Label Control.
Image control use to display image and Label Control use to display name of image.
User controls are closely related to ASP.NET pages. Both the User Control 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.
Use the below code to create a User Control
First import the namespace in Web User Control File
<%@ Import Namespace="System.IO" %>
WebUserControl.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl2.ascx.cs" Inherits="WebUserControl2" %>
<asp:Image ID="idimage" runat="server" Width="300px" />
<br />
<asp:Label ID="idlabel" runat="server"></asp:Label>
WebUserControl.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class WebUserControl2 : System.Web.UI.UserControl
{
protected void page_load(object sender, EventArgs e)
{
string ImageToDisplay = PickRandomImage();
idimage.ImageUrl = Path.Combine("~/image", ImageToDisplay);
idlabel.Text = ImageToDisplay;
}
private string PickRandomImage()
{
Random rnd = new Random();
string[] image = Directory.GetFiles(MapPath("~/image"), "*.jpg");
string imageDisplay = image[rnd.Next(image.Length)];
return Path.GetFileName(imageDisplay);
}
}
Now add this file to Default.aspx page
Before you can use a Web User Control in a page, you must register it.
<%@ Register %> directive that contains the following three attributes:
1. TagPrefix-Indicates the namespace that you want to associate with the User control for the current page.
2. TagName-Indicates the name that you want to associate with the User control for the current page.
3. Src-Indicates the virtual path to the User control (the path to the .ascx file).
Default.aspx
<%@ Page Language="C#" %>
<%@ Register TagPrefix="UserControl" Src="~/WebUserControl.ascx" TagName="RandomImage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server" style="background-image:~/image/commercial.jpg">
<div>
<UserControl:RandomImage ID="idrandomimage" runat="server" />
</div>
</form>
</body>
</html>
To see the difference refresh the page
First time refresh the page
Second time refresh the page.
You can include <%@ Register%> directive either .aspx file or Web.config file.
Registering User Controls in the Web Configuration File.
Web.config
<configuration>
<system.web>
<pages>
<controls>
<add tagPrefix="UserControl"
src="~/WebUserControl.ascx"
tagName="RandomImage"/>
</controls>
</pages>
</system.web>
</configuration>