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:
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:
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:
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
08_ImageButtonControl.aspx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="08_ImageButtonControl.aspx.cs" Inherits="_08_ImageButtonControl" %> <!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></title> <style type="text/css"> .style1 { font-family: Cambria; font-size: large; } </style> </head> <body> <form id="form1" runat="server"> <div class="style1"> Below is the Image Button Control</div> <asp:ImageButton ID="imgButton" runat="server" ImageUrl="~/Images/ButtonImage.png" onclick="imgButton_Click" /> <br /> <br /> <asp:Label ID="lblDisplay" runat="server" Font-Bold="True" Font-Names="Book Antiqua" Font-Size="X-Large" ForeColor="#3333CC" Text="Label"></asp:Label> </form> </body> </html> |
08_ImageButtonControl.aspx.cs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _08_ImageButtonControl : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void imgButton_Click(object sender, ImageClickEventArgs e) { //Sample 01: String to Send Reply String Response = ""; //Sample 02: Check the Location if (e.X > 0 && e.X < 130) Response = "Red "; else if (e.X >= 130 && e.X < 255) Response = "Green "; else Response = "Blue "; //Sample 03: Set the Label lblDisplay.Text = Response + "was clicked!"; } } |
Categories: ASP 4.0
Tags: ImageButton, ImageClickEventArgs, ImageURL
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.