ASP.NET (VB): GridView with ImageButton > Populate text box with comments - asp.net

Question

It has been so long since I have coded a page in VB. For the life of me I just cannot remember how to do this.
I have a GridView on an ASP page. Each row has a comment ImageButton. I already have the gridview and text box wrapped in a UpdatePanel. The gridview shows all of the correct information. I just need to add some code to populate the text box with the comment when a user clicks on that row's ImageButton.
The comments are stored in SQL 2005 DB if that makes a difference. Should I shove the comments inside a hidden field of the gridview or is there a function that will allow me to query the db for that specific comment.
End goal would be to not refresh the page if possible.
Your help is greatly appreciated to help me get over this writer's block!

Answer 1

OK, you could do this either way, with a HiddenField or by looking up in the DB.
HiddenField
In the ItemTemplate that contains the ImageButton, add CommandName and CommandArgument attributes to the ImageButton, and a HiddenField that is bound to the comment field from the database:
<asp:TemplateField HeaderText="Comment">
<ItemTemplate>
<asp:ImageButton ID="btnComment" runat="server" ImageUrl="images/comment.gif" CommandName="SelectComment" CommandArgument='<%# Container.DataItemIndex %>' />
<asp:HiddenField runat="server" id="CommentHiddenField" Value='<%# Eval("Comment") %>' />
</ItemTemplate>
</asp:TemplateField>
In the code-behind, add a method for handling the RowCommand event for the GridView:
Private Sub Gridview2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles Gridview2.RowCommand
Dim rowIndex As Integer
Dim commentHiddenField As HiddenField
If e.CommandName = "SelectComment" Then
rowIndex = Integer.Parse(e.CommandArgument.ToString)
commentHiddenField = DirectCast(Gridview1.Rows(rowIndex).Cells(5).FindControl("CommentHiddenField"), HiddenField)
txtComments.Text = commentHiddenField.Value
End If
End Sub
DB Lookup
Add the attributes to the ImageButton:
<asp:TemplateField HeaderText="Comment">
<ItemTemplate>
<asp:ImageButton ID="btnComment" runat="server" ImageUrl="images/comment.gif" CommandName="SelectComment" CommandArgument='<%# Container.DataItemIndex %>' />
</ItemTemplate>
</asp:TemplateField>
In the code-behind, add a method for handling the RowCommand event for the GridView:
Private Sub Gridview2_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles Gridview2.RowCommand
Dim rowIndex As Integer
Dim key As String
rowIndex = Integer.Parse(e.CommandArgument.ToString)
key = Gridview1.DataKeys(rowIndex).Value.ToString
txtComments.Text = GetCommentFromDB(key)
End Sub

Answer 2

Here is the markup...
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<tr class="dvrow" align="center">
<td style="text-align:left;" colspan="2">History<br />
<div id="div1" style="width:600px;">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
GridLines="None" DataKeyNames="RepIssueHistoryID"
DataSourceID="sqlIssueHistory" Width="600px" AllowSorting="True"
AllowPaging="True" CssClass="grid" RowStyle-Height="15px">
<PagerStyle CssClass="footer" />
<Columns>
<asp:TemplateField HeaderText="Mail">
<ItemTemplate>
<asp:CheckBox ID="chkMailComment" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="RepIssueStatus" SortExpression="RepIssueStatus"
HeaderText="Status" ItemStyle-Width="120px" >
<ItemStyle Width="120px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="RepIssuePriority" SortExpression="RepIssuePriority"
HeaderText="Priority" ItemStyle-Width="100px" >
<ItemStyle Width="100px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="User" SortExpression="User" HeaderText="Rep"
ItemStyle-Width="180px" >
<ItemStyle Width="180px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="DateUpdate" SortExpression="DateUpdate"
HeaderText="Date" ItemStyle-Width="200px" >
<ItemStyle Width="200px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Comment">
<ItemTemplate>
<asp:ImageButton ID="btnComment" runat="server" ImageUrl="images/comment.gif" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Attachment">
<ItemTemplate>
<asp:ImageButton ID="btnAttachment" runat="server" ImageUrl="images/folder.gif" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No history currently exists.<br />
</EmptyDataTemplate>
<RowStyle Height="15px"></RowStyle>
<EmptyDataRowStyle CssClass="empty" />
</asp:GridView>
</div>
</td>
</tr>
<tr class="dvrow" align="center">
<td style="text-align:left;" colspan="2">Rep Comment<br />
<asp:TextBox ID="txtComments" runat="server" TextMode="MultiLine"
Width="600px" Height="180px" ReadOnly="true" />
</td>
</tr>
</ContentTemplate>
</asp:UpdatePanel>
So the basic idea would be for someone to click on btnComment on whichever row and that comment would then show up in txtComment. Hope that explains it better.