Web User Control in ASP.NET using VB.NET

We can create a Web User Control this type of control can be use any page of your Website. In this example i have created a random image in Web User Control file.
  • 3631
Download Files:
 

Creating User Control that randomly display image

Open your Visual Studio 2010

  1. Click on Website option on toolbar.
  2. Click on Add New Item... or ctrl + shift + A.
  3. 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

  Random1.gif

Second time refresh the page.

random2.gif

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>

Categories

More Articles

© 2019 DotNetHeaven. All rights reserved.