选择一行GridView时如何显示隐藏列数据？

Question

我有一个网格视图，其中隐藏了第四列，它有一个面板。

之前我使用 AJAX HoverMenuExtender 将鼠标悬停在特定行上时显示了隐藏面板

<asp:TemplateField>
                                <ItemTemplate>
                                    <asp:HoverMenuExtender ID="HoverMenuExtender" runat="server" PopupControlID="PopupMenu"
                                        TargetControlID="grdMainData" PopupPosition="Center" OffsetY="30" OffsetX="10"
                                        PopDelay="50" HoverCssClass="popupHover">
                                    </asp:HoverMenuExtender>
                                    <asp:Panel runat="server" ID="PopupMenu" CssClass="popupMenu">
    <asp:Label ID="lblVDetails" runat="server" Text='<%#Eval("vDetails")%>'/>
                              </asp:Panel>
                             </ItemTemplate>
                            </asp:TemplateField>

它工作得很好......

但现在我想在 gridview 中放置一个按钮，并在单击按钮时显示弹出窗口

意味着当我单击 row1 按钮时，我应该在弹出窗口中获得 row1 的面板，我不希望任何页面刷新

是否可以使用任何 JavaScript 或 jQuery 或 AJAX 扩展器

有没有可能？

这是我的 GridView：

<asp:GridView ID="grdMainData" runat="server" CellPadding="3" BackColor="White" BorderColor="#CCCCCC"
                        BorderStyle="None" BorderWidth="1px" Width="900" OnRowCreated="GridView1_RowCreated"
                        AutoGenerateColumns="False" OnRowDataBound="grdMainData_RowDataBound">
                        <Columns>
                            <asp:BoundField HeaderText="Curriculum" DataField="Curriculum" />
                            <asp:BoundField HeaderText="Title" DataField="Title" />
                            <%--<asp:BoundField HeaderText="Code" DataField="Code" />--%>
                            <asp:TemplateField>
                            <ItemTemplate>
                            <asp:Button type="button" ID="btnCode" class="button-code" runat="server" Text='<%#Eval("Code") %>'/>
                            </ItemTemplate>
                            </asp:TemplateField>
                            <asp:BoundField HeaderText="Stage" DataField="Stage" />
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <asp:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="btnCode" PopupControlID="PopupMenu" DropShadow="true" CancelControlID="lnkClose">
                                    </asp:ModalPopupExtender>

                                    <asp:Panel runat="server" ID="PopupMenu" CssClass="popupMenu">
    <asp:Label ID="lblVDetails" runat="server" Text='<%#Eval("vDetails").ToString().Replace("\u2022","<br/> \u2022")%>'/>
    <asp:LinkButton ID="lnkClose" runat="server">Close</asp:LinkButton>
                              </asp:Panel>
                             </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
</asp:GridView>

Answer 1

因为您已经在使用 AJAX 扩展器。我建议继续使用它。

AJAX 控件工具包的 ModalPopUpExtender 非常适合您的需要。
您可以查看它的演示和文档here。

更新：
使用这个标记

<asp:ModalPopupExtender 
     ID="ModalPopupExtender" 
     runat="server"
     TargetControlID="btnCode"
     PopupControlID="PopupMenu">
</asp:ModalPopupExtender>