Here an image is displayed in each row of a GridView. And the most interesting point is these images are clickable. If one clicks on an image, he/she gets navigated to another page.
In this article, i have tried to show an image in each of the row of the GridView control. And on clicking on these images one is navigated to another page.
I have shown here 2 examples using:
1. Image field
2. Image Button
1. Image Field used within a GridView
If you click on any of the image, you will be navigated to a different page. Here on clicking at the third image, i am being navigated to Child1.aspx. The following snap shows that it can take querystring also. Here 'a' is a query string variable which is storing the value 'Mary'.
The content of the Table used in my example
The following snap shows that every row has a field name 'UserName'. Particulary this 'UserName' is sent through a querystring in the above snap.
Let me explain in short. I have clicked on the im8.jpeg and am navigated to Child1.aspx alongwith the 'UserName' which is here "Mary".
Contents of the tblUploadImage
Here i have used simple html Image tag and an anchor tag . src
property of the html Image
tag is used to bind to the Path
field of the tblUploadImage.
tag is used to navigate to the Child1.aspx
alongwith the UserName
field of the same table i.e., tblUploadImage.
I have created a Class1.cs
inside the App_Code folder
. So that all the select queries will be executed from this class file.
The contents of the Class1
is the method getDataTable().
This method is accepting the query from the Default.aspx
page, executing it and returning an object of DataTable
from where it has been called.
2. Clickable Image Button in Gridview
In this example, i have used same Table tblUploadImage
, class file Class1.cs
. Only changes i have made in the Default.aspx
Here I have used an Image Button
Control in the GridView. In its OnClientClick
I have sent the path of the image in this function RunClientCode(e)
. Here 'e
' is carrying the value of Path
. Using substr( )
method i have extracted only the filename and the immediate folder in which it is present. And then i tried to pass this as a querystring to Zoom.aspx.
In this page, I have simply taken an Image control to display the image.
Here, only the ImageUrl
property of the Image1
control is initialized with the value of the Querystring variable 'pth
On clicking the image one is navigated to another page,i.e., Zoom.aspx.
Hope you all will enjoy reading this.