在gridview的行点击后显示图像

Question

我希望通过 gridview 的行单击显示图像。不是gridview的一部分，所以当有图像时应该在gridview之外。它将根据网格视图中列的值显示不同的图像。我尝试了几种方法，例如在行数据绑定上使用 gridview 以及在选定索引上使用更改。但是我什至无法在单击行时显示图像。

Answer 1

好的，所以我们假设 GridView 有一列带有图像的路径名？

标记可以是这样的：

<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>

数据表：

结果：

我在网格中点击了狗，上面是结果。

编辑：看起来用户想要点击一行而不需要页面上的按钮。

好的，按钮已被移除。

代码现在是这样的：

 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

所以我们现在将点击行事件添加到整个行。

请注意，您必须将其添加到页面指令的第一行：

 EnableEventValidation="false"

以上内容位于标记的第一行。

我们现在再添加两个事件。

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

所以现在可以从行中移除按钮 - 您可以单击行上的任意位置。我想我们可以隐藏第三列——“图片的网址”