在 ASP.Net 中将可点击的图像添加到 GridView答案

【问题标题】：Add a clickable image to a GridView in ASP.Net在 ASP.Net 中将可点击的图像添加到 GridView
【发布时间】：2012-05-08 08:21:34
【问题描述】：

我正在尝试在 GridView 的每一行末尾添加一个删除图像。我希望用户能够单击图像以删除该行。

所以我使用 HyperLinkField 创建了指向另一个页面的链接，该页面将删除记录：

<asp:HyperLinkField DataNavigateUrlFields="ID" 
                        DataNavigateUrlFormatString="RemoveLine.aspx?ID={0}"                             
                        Target="_blank"   />

HyperLinkField 不包含 Image 标签，所以我创建了一个 TemplateField，里面有一个 Image。

<asp:TemplateField>
    <ItemTemplate>
        <asp:Image ID="imageRemove" runat="server" ImageUrl="~/Images/smallcross.gif"  />                                
    </ItemTemplate>                        
</asp:TemplateField>

但是 HyperLinkField 和 Image 出现在不同的列中，并且图像没有点击事件。

有什么方法可以将两者结合起来？

我正在使用 ASP.Net 4.0。

提前致谢

【问题讨论】：

标签： asp.net image gridview hyperlink

【解决方案1】：

图片按钮怎么样？

<ItemTemplate>
        <asp:ImageButton ID="ImageButton1" runat="server" 
            ImageUrl="~/Images/smallcross.gif" onclick="ImageButton1_Click" />
</ItemTemplate>

【讨论】：

【解决方案2】：

通常需要确定要删除的记录，可以使用CommadArgument属性来确定记录的Id：

<asp:TemplateField HeaderStyle-Width="40">
    <ItemTemplate>
        <asp:ImageButton ID="ButtonDelete" runat="server"  
            ImageUrl="~/Imags/delete.png" OnClick="ButtonDelete_Click" ToolTip="Delete"
            CommandArgument='<%#Bind("UserId")%>'/>
    </ItemTemplate>
</asp:TemplateField>

protected void ButtonDelete_Click(object sender, EventArgs e)
{
    ImageButton button = sender as ImageButton;
    DeleteUserById(Convert.ToInt32(button.CommandArgument));
}

【讨论】：

【解决方案3】：

您可以使用原始锚标记包装您的图像，您会得到相同的结果。

<asp:TemplateField>

<ItemTemplate>

<a href="RemoveLine.aspx?ID={0}">      
<asp:Image ID="imageRemove" runat="server" ImageUrl="~/Images/smallcross.gif" />                                              
</a>
</ItemTemplate>

</asp:TemplateField>

【讨论】：

多谢回复，身份证怎么传进去？

【解决方案4】：

<asp:TemplateField>
 <ItemTemplate>
    <asp:ImageButton ID="btnDelete" runat="server"  
        ImageUrl="~/Imags/delete.png" OnClick="btnDelete_Click"
 ToolTip="Delete row" CommandName="Eliminar" CommandArgument='<%#Eval("UserId")%>'/>
 </ItemTemplate>

您可以使用 CommandArgument 传递所选行的 ID 值并执行愿望结果

// fires when the ImageButton gets clicked
protected void GridView1_ItemCommand(object sender, DataGridCommandEventArgs e)
{
  if(e.Commandname ="Eliminar"){
  this.Eliminar(Convert.ToInt32(e.CommandArgument));

}

}

// function to delete the record
 private void Eliminar(int code)
 { 
    //custom code to delete the records
 }

【讨论】：