点击按钮弹窗显示GridView中隐藏的BoundField字段并添加复制按钮

这个需求完全可行，下面是具体实现步骤：

步骤1：修改GridView配置，存储隐藏字段值 #

因为Visible="false"的BoundField不会被渲染到前端页面，所以需要把Title和Notes存入GridView的DataKeyNames，确保前端能获取到这两个值：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" 
    SortExpression="Final_Draft" Width="80%" DataKeyNames="Title,Notes">
    <Columns>
        <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" Visible="false" />
        <asp:BoundField DataField="Final_Draft" HeaderText="Final_Draft" SortExpression="Final_Draft" />
        <asp:BoundField DataField="Notes" HeaderText="Notes" SortExpression="Notes" Visible="false"/>
        <asp:TemplateField>
            <ItemTemplate>
                <%-- 给按钮绑定客户端点击事件，传递当前行的Title和Notes --%>
                <asp:Button ID="Btn_PopUp" runat="server" Text="PopUp" 
                    OnClientClick='showPopup("<%# Eval("Title") %>", "<%# Eval("Notes") %>"); return false;' />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

步骤2：添加前端弹窗与复制功能 #

在页面的<body>末尾添加HTML容器和JavaScript代码，实现弹窗显示与复制功能：

<!-- 弹窗容器 -->
<div id="popupContainer" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:24px; background:#fff; border-radius:6px; box-shadow:0 0 12px rgba(0,0,0,0.2); z-index:9999;">
    <h3 style="margin-top:0;" id="popupTitle"></h3>
    <p style="margin:12px 0;" id="popupNotes"></p>
    <div style="display:flex; gap:8px; justify-content:flex-end;">
        <button onclick="copyContent()" style="padding:6px 12px; cursor:pointer;">复制内容</button>
        <button onclick="closePopup()" style="padding:6px 12px; cursor:pointer;">关闭</button>
    </div>
</div>
<!-- 遮罩层 -->
<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:9998;"></div>

<script>
    // 显示弹窗
    function showPopup(title, notes) {
        document.getElementById('popupTitle').textContent = title;
        document.getElementById('popupNotes').textContent = notes;
        document.getElementById('popupContainer').style.display = 'block';
        document.getElementById('overlay').style.display = 'block';
    }

    // 关闭弹窗
    function closePopup() {
        document.getElementById('popupContainer').style.display = 'none';
        document.getElementById('overlay').style.display = 'none';
    }

    // 复制弹窗内容到剪贴板
    function copyContent() {
        const title = document.getElementById('popupTitle').textContent;
        const notes = document.getElementById('popupNotes').textContent;
        const fullContent = `标题：${title}\n备注：${notes}`;
        
        navigator.clipboard.writeText(fullContent).then(() => {
            alert('内容已复制到剪贴板');
        }).catch(err => {
            alert('复制失败：' + err.message);
        });
    }
</script>

特殊情况处理 #

如果Title或Notes包含引号、换行等特殊字符，需要在绑定的时候做转义处理，避免JS语法错误：

OnClientClick='showPopup("<%# HttpUtility.JavaScriptStringEncode(Eval("Title").ToString()) %>", "<%# HttpUtility.JavaScriptStringEncode(Eval("Notes").ToString()) %>"); return false;'

后台需引用System.Web命名空间才能使用HttpUtility类。

内容的提问来源于stack exchange，提问作者peermohamed s