Random Image With ASP [Part2]

ASP August 24th, 2008

This post still about random image with ASP.NET, but it’s little different. In this random image, I’ll try to use user control. So far, I know that user control can be use to make custom component in ASP, but I don’t know really , because I’m still newbie in ASP and I got it from Actual Training ASP class with my little modified. Hah nope, I never tried to learn and I’ll share little for you. Hehe.

1. Create new website, with C# language.

Preview1

2. Make new web user control and give it name RandomImage.ascx.

Preview2

Then add image control and label control on it, like this codes bellow

[-]^?View Code ASP

1
2
3

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="RandomImage.ascx.cs" Inherits="RandomImage" %>
<asp:Image ID="ImgRandom" runat="server" width="300px" /><br />
<asp:Label ID="lblRandom" runat="server" />

And give this codes on RandomImage.ascx.cs. Don’t forget to add using System.IO;.

[-]^?View Code ASP

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
//add
using System.IO;
 
public partial class RandomImage : System.Web.UI.UserControl
{
    private string TakeRandomImage()
    {
        Random objRnd = new Random();
        string[] strImages = Directory.GetFiles(MapPath("~/Images"), "*.jpg");
        string strImageDisplay = strImages[objRnd.Next(strImages.Length)];
        return Path.GetFileName(strImageDisplay);
    }
 
 
    protected void Page_Load(object sender, EventArgs e)
    {
        string strImageDisplay = TakeRandomImage();
        ImgRandom.ImageUrl = Path.Combine("~/Images", strImageDisplay);
        lblRandom.Text = strImageDisplay;
    }
}

3. Create new web form to load your user control RandomImage. For example I give it name LoadImage.aspx.

Preview3

Go to design and drag and drop user control RandomImage.ascx on it.

Preview4

And LoadImage.aspx will automated load this the codes bellow.

[-]^?View Code ASP

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LoadImage.aspx.cs" Inherits="LoadImage" %>
 
<%@ Register src="RandomImage.ascx" tagname="RandomImage" tagprefix="uc1" %>
 
<!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>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
 
        <uc1:RandomImage ID="RandomImage1" runat="server" />
 
    </div>
    </form>
</body>
</html>