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.
Introduction
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
Default.aspx
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. An
anchor tag is used to navigate to the
Child1.aspx alongwith the
UserName field of the same table i.e.,
tblUploadImage.
Default.aspx.cs
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 and
Default.aspx.cs. Only changes i have made in the
Default.aspx page
Here I have used an
Image Button Control in the GridView. In its
OnClientClick event i have called a javascript function.
Javascript used for the OnClientClick Event of the ImageButton
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.
Zoom.aspx
In this page, I have simply taken an Image control to display the image.
Zoom.aspx.cs
Here, only the
ImageUrl property of the
Image1 control is initialized with the value of the Querystring variable '
pth'.
Output
On clicking the image one is navigated to another page,i.e., Zoom.aspx.
Conclusion
Hope you all will enjoy reading this.
Reference
http://www.java2s.com/Code/ASP/Asp-Control/LinkJavascriptfunctiontoOnClientClickevent.htm