单击 gridview 行后显示图像

Question

我想通过单击 gridview 的行来显示图像。不是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>

数据table:

结果：

我在格子里点了狗，上面就是结果

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

好的，按钮已删除。

代码现在是这样的：

 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

现在可以从行中删除按钮 - 您可以单击行中的任意位置。我想我们可以隐藏第 3 列 - 图像的“url”

单击 gridview 行后显示图像

display image after row click of gridview

asp.net

gridview