ASP 4.0 – Image Control – Lab #011

Table of Contents

ASP 4.0 Image Control

The Image Control in Asp.Net will render an image in the web browser. WebControl is base for this Image Control, and Image Control is the base class for ImageMap and ImageButton Controls. ImageUrl property tells the control from where it should download image pixels. ImageAlign property helps to align the image along with other html web elements on the page. In this Lab, we will experiment the Image Control.

1: Assign a Picture to Asp.Net Image Control

The steps for using the Asp.Net Image Control are shown below:

Step 1 - Assign Image to an ASP.Net Image Control - Design Time — Step 1 – Assign Image to an ASP.Net Image Control – Design Time

Add Image Control

1) Create a New Web Form called 07_ImageControl.aspx
2) In the source view, add a heading tag as shown here.
3) You can verify how it looks by switching to the design view.
4) Drag the Image Control from the Toolbox.
5) Drop it on the form below the heading. As there is no picture, the control will look like an icon.
6) In the solution explorer, highlight the Website and pick the New Folder option.

Organize Image in Images Folder

7) Name the folder Name as Images. This is an optional step but useful when a website contains plenty of resources. It is a promising idea to create a folder and keep the image resource in there.
8) Right Click the Image Folder and Pick Add Existing Items…
9) Navigate to the folder where you have the image. In this lab, we have an image at c:\temp folder.
10) If the image is not shown, do not forget to set file type as *. *
11) Pick the Image of your choice.
12) Click on the Add Button.
13) The solution explorer shows the newly added image under the folder Images.

Assign ImageUrl Property

14) Select the Image Control from the Web Form and invoke properties.
15) The ImageUrl is the property which will tell from where the control loads the image data. Click on the ellipsis button on the row.
16) You will be seeing a Select Image dialog. Click on the folder Images. Note, we added this folder in step 7.
17) The right side pane shows the content of the folder, and you can find the image which we added in step 12.
18) Click the OK button. This will set the ImageUrl property.
19) Now the Design View shows the Image control loaded with the picture.

2: Load picture onto Image Control at Runtime

In the previous Major Step, we assigned the ImageUrl property at design time. Now, we will try how to load image and runtime. We also study how ImageAlign property of the Image Control works. The Sub-Steps are below:

Step 2 - Asp.Net Loading Image at Runtime — Step 2 – Asp.Net Loading Image at Runtime

1) Make use of the Source Tab and add two paragraphs to the web page. This is to check the ImageAlign property.
2) Set the ImageAlign property of the Image Control to right. The design view shows the image towards the right of the text content.
3) This time set the ImageAlign property to left and observe the image appears towards the left of the text content.
4) Create two more sample images and keep it on a specific folder.
5) Load the images to the Image folder as we did in the previous major step. The folder now contains three images.
6) Add two button controls to the Web Form and handle click for both the buttons.
7) At runtime, we can access the ImageUrl property and assign the image. Note, we used the Images folder and specified a specific image which it contains.
8) AlternateText property can be assigned with a helper text which will be displayed when the image load fails. Note: Image2 in our example has a space and file name is image 2.png (Refer picture at marker 4).

3: Run the Lab Example

Below picture shows running the Example:

Step 3 - Run and Test AlternateText Property — Step 3 – Run and Test AlternateText Property

1) Run the Web Form as we did in our previous examples. You can see the image which we assigned at design time is shown in the Image Control and the Image is right aligned.
2) Click the Image1 button. This will submit the form content and the web server runs the click event procedure for the button.
3) Notice the webserver changes the image in the control and web browser renders the web form again with the changed image content.
4) Now click the Image 2 button.
5) You can see the Image load fails and an alternate text is displayed in the placeholder for the image.
6) Check the image name in the Images folder and it reads Image 2.png. This is the correction; we must make in the code.
7) Change Image2.png as Image 2.png to include a space.
8) Now when you click the button Image 2, you can see the correct image loads into the control and now the Image control does not display any alternate text.

Code Reference

07_ImageControl.aspx

<%@ Page Language="C#" AutoEventWireup="true" 
  CodeFile="07_ImageControl.aspx.cs" Inherits="_07_ImageControl" %>

<!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 id="Head1" runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            font-size: xx-large;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <%--Sample 01: Add H1 Tag--%>
    <h1> Image Control Example </h1>
    
    </div>
    <asp:Image ID="Image1" runat="server" ImageAlign="Left" 
        ImageUrl="~/Images/TestImage.png" />
    
    <%--Sample 02: Add Two Paragraph--%>
    <p class="style1"> This is a paragraph to check how the Image Align 
      property works.</p>
    <p class="style1"> This is a Second Pargraph to check how the Image 
      Align property works.</p>
    <asp:Button ID="btnImage1" runat="server" onclick="btnImage1_Click" 
        Text="Image 1" />
    <asp:Button ID="btnImage2" runat="server" onclick="btnImage2_Click" 
        Text="Image 2" />
    </form>
</body>
</html>

<%@ Page Language="C#" AutoEventWireup="true"

CodeFile="07_ImageControl.aspx.cs" Inherits="_07_ImageControl" %>

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

.style1

{

font-size: xx-large;

}

</style>

</head>

<body>

<div>

<%--Sample 01: Add H1 Tag--%>

<h1> Image Control Example </h1>

</div>

<asp:Image ID="Image1" runat="server" ImageAlign="Left"

ImageUrl="~/Images/TestImage.png" />

<%--Sample 02: Add Two Paragraph--%>

<p class="style1"> This is a paragraph to check how the Image Align

property works.</p>

<p class="style1"> This is a Second Pargraph to check how the Image

Align property works.</p>

<asp:Button ID="btnImage1" runat="server" onclick="btnImage1_Click"

Text="Image 1" />

<asp:Button ID="btnImage2" runat="server" onclick="btnImage2_Click"

Text="Image 2" />

</form>

</body>

</html>

07_ImageControl.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _07_ImageControl : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnImage1_Click(object sender, EventArgs e)
    {
        //Sample 03: Load Image
        Image1.ImageUrl = "Images/Image1.png";
        Image1.AlternateText = "This is Image 1";
    }
    protected void btnImage2_Click(object sender, EventArgs e)
    {
        //Sample 04: Load Image
        Image1.ImageUrl = "Images/Image 2.png";
        Image1.AlternateText = "This is Image 2";
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _07_ImageControl : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnImage1_Click(object sender, EventArgs e)

{

//Sample 03: Load Image

Image1.ImageUrl = "Images/Image1.png";

Image1.AlternateText = "This is Image 1";

}

protected void btnImage2_Click(object sender, EventArgs e)

{

//Sample 04: Load Image

Image1.ImageUrl = "Images/Image 2.png";

Image1.AlternateText = "This is Image 2";

}

Categories: ASP 4.0

Tags: AlternateText, Image Control, ImageAlign, ImageURL

Do you like this Example? Please comment about it for others!! Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Programming Examples

Are you a Programmer or Application Developer or a DBA? Take a cup of coffee, sit back and spend few minutes here :)

ASP 4.0 – Image Control – Lab #011

ASP 4.0 Image Control