display image after row click of gridview - asp.net

Question

I want to have an image displayed from a row click of gridview. not part of gridview, so should be outside of gridview when have image. It will show different images based to a value from a column in the gridview. I have tried a couple of ways, such as using gridview on row data bound plus on selected index changed. But I just could not even have the image displayed upon row click.

Answer 1

Ok, so we assume that the GridView has a column with the path name to the image?
The markup can say be this:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div style="float:left">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" ClientIDMode="Static">
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="ImageName" HeaderText="Image Name" />
<asp:BoundField DataField="Image" HeaderText="Image Name" />
</Columns>
</asp:GridView>
</div>
<div style="float:left;margin-left:40px">
<asp:Image ID="Image1" runat="server" Height="302px" Width="448px" />
</div>
<br />
</div>
</form>
data table:
Results:
I clicked on dog in the grid, and above was the result.
Edit: it would seem that the user wants a row click and NOT necessary a button on the page.
Ok, button has been removed.
Code is now this:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If IsPostBack = False Then
LoadGrid()
End If
End Sub
Sub LoadGrid()
Using cmdSQL As New SqlCommand("SELECT ID, ImageName, Image from tblImage",
New SqlConnection(My.Settings.TEST4))
cmdSQL.Connection.Open()
GridView1.DataSource = cmdSQL.ExecuteReader
GridView1.DataBind()
End Using
End Sub
Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes("onclick") = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" & e.Row.RowIndex)
e.Row.ToolTip = "Click to select this row."
End If
End Sub
Protected Sub GridView1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GridView1.SelectedIndexChanged
Image1.ImageUrl = GridView1.SelectedRow.Cells(2).Text
End Sub
so we now add a click row event to the WHOLE row.
Note that you MUST add this to the first line in the page directive:
EnableEventValidation="false"
The above goes in the VERY first line of the markup.
We now add two more events.
Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes("onclick") = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" & e.Row.RowIndex)
e.Row.ToolTip = "Click to select this row."
End If
End Sub
Protected Sub GridView1_SelectedIndexChanged(sender As Object, e As EventArgs) Handles GridView1.SelectedIndexChanged
Image1.ImageUrl = GridView1.SelectedRow.Cells(2).Text
End Sub
So now the button can be REMOVED from the row - you can click anywhere on the row. And I suppose we could hide the 3rd column - the "url of the image"