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 – ImageButton Control – Lab #012

ASP ImageButton Control

The Image Control in ASP.Net will not process Click Event and in that case, one can use ImageMap or ImageButton Control. These two controls can also give the click location in terms of X and Y coordinate values and the server can act based on this.

ASP ImageButton control derives from the Image Control and hence it has all the property and behaviour of the Image. The Click event handler will receive the ImageClickEventArgs, and we can query the x and y coordinate of the mouse click from it. This is helpful for the server to know which part of the image user clicked. In this Lab, we will explore ASP.Net’s ImageButton Control.

1: Prepare the Web Form with ImageButton

In this step, we will place ImageButton Control on the form and assign an image to it. First you should prepare an image or to follow the lab easily, copy the image below and save it as ButtonImage.png.

The steps for this lab are below:

Step 1 - Prepare the Form with ImageButton Control
Step 1 – Prepare the Form with ImageButton Control

1) Place the free text as you like and here, we have shown some descriptive text.
2) Place an ImageButton control and assign the property from the above screenshot (source view). Note, you have to create an Images folder and place the Button Image in it. We already saw how to organize the image in a specific folder, and you refer the link: Image Control Lab. After assigning the ImageUrl property, the control will display the image.
3) Place a Label control on the Web Form and name it as lblDisplay. Other properties are shown in the steps chart above.

2: ImageButton Control Click Handler

In the click event handler, we want to tell which color button user clicks. Follow the below steps:

Step 2 - ImageButton Click Handler
Step 2 – ImageButton Click Handler

1) Open the image ButtonImage.png in the paintbrush. Place the cursor’s crosshair towards the left edge of the circle as shown.
2) Mark the X coordinate value. In the screenshot it is 10.
3) Do the same for the right edge of the red circle.
4) Mark the X Coordinate value. Repeat the same procedure for other wheels. We can use these coordinate values in the click event handler to tell the click location.
5) The click event handler of the ImageButton receives an argument called ImageClickEventArgs.
6) We get the X location of the button click from the ImageClickEventArgs. Note, the click was done by the user on the html Browser and since ImageButton perform Postback; we are enquiring the event argument to give the X location of mouse click. When it is in the range 0 – 130, we decide the user clicked the red button on the ImageButton control.
7) The same way, we check the user clicked the green button or not. Using these hit tests, we decide the button color and form a string to send a reply to the browser.
8) We use the Label control’s Text property to report which color wheel in the image is clicked by the user.

3: Running the Example

Below steps show testing the sample created in this Lab:

Step 3 - Run the ImageButton Example
Step 3 – Run the ImageButton Example

1) Launch the Website from within visual studio
2) Place cursor in the blue circle and notice Icon when cursor is inside the ImageButton control. Click the Blue Wheel.
3) Our web form performs a Postback packing the coordinate location of the Click. The web server reports back with a reply and you can see the Label control reporting which button is clicked.

Code Reference



Categories: ASP 4.0

Tags: , ,

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

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