ASP.NET中使用JavaScript动态获取Label值的异常问题

现有4条学生记录：John Doe、Jane Smith、Alice Johnson、Bob Anderson。通过ASP.NET的TemplateField绑定数据库学生姓名至Label控件，每行搭配复制图标，点击触发JavaScript函数复制Label值。但无论点击第几行的复制图标，均仅返回第一个学生名John Doe，尝试多种获取方式均未解决，需实现点击对应行图标获取对应Label值的功能。

原代码 #

ASP.NET代码 #

<asp:TemplateField HeaderText="StudentName" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="10%" ItemStyle-Width="10%">
        <ItemTemplate>
                <asp:Label ID="lblStudentName" runat="server" Text='<%# Bind("StudentName") %>' Visible="true"></asp:Label>
                <img src="../Images/copy.png" alt="Printer" onclick="copyLabelValue('lblStudentName')" class="col-2" style="cursor: pointer; width: 30px; height: 30px;" />
        </ItemTemplate>
</asp:TemplateField>

JavaScript代码 #

function copyLabelValue(label) {           
            var value = document.getElementById(label).innerText;
            navigator.clipboard.writeText(value);
}

尝试过的无效方法 #

• document.getElementById(label).innerText 返回"John Doe"
• document.getElementById('<%=lblStudentName.ClientID%>').innerText 返回"John Doe"
• $('#<%=lblStudentName.ClientID%>').html() 返回"John Doe"
• document.getElementById(label).innerHtml 返回undefined
• document.getElementById('<%=lblStudentName.ClientID%>').innerHtml 返回undefined

问题原因 #

1. ASP.NET渲染GridView行时，会给每个服务器端Label生成唯一的ClientID，但原代码中点击事件传递的是固定的lblStudentName，getElementById只会返回页面中第一个匹配该ID的元素（即第一行的Label），导致无论点击哪一行都获取第一行的值。
2. innerHtml是拼写错误，正确写法为innerHTML，这也是部分方法返回undefined的原因。

解决方案 #

方法1：通过DOM相邻关系获取Label（推荐） #

修改点击事件传递当前img元素，通过DOM遍历找到同一行的Label：

修改后的ASP.NET代码

<asp:TemplateField HeaderText="StudentName" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="10%" ItemStyle-Width="10%">
        <ItemTemplate>
                <asp:Label ID="lblStudentName" runat="server" Text='<%# Bind("StudentName") %>' Visible="true"></asp:Label>
                <img src="../Images/copy.png" alt="Printer" onclick="copyLabelValue(this)" class="col-2" style="cursor: pointer; width: 30px; height: 30px;" />
        </ItemTemplate>
</asp:TemplateField>

修改后的JavaScript代码

function copyLabelValue(clickedImg) {
    // 获取当前img的前一个兄弟元素（对应行的Label）
    var label = clickedImg.previousElementSibling;
    var value = label.innerText;
    navigator.clipboard.writeText(value);
}

方法2：传递Label的唯一ClientID #

利用ASP.NET的ClientID属性，给每行的点击事件传递当前Label的唯一ID：

修改后的ASP.NET代码

<asp:TemplateField HeaderText="StudentName" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="10%" ItemStyle-Width="10%">
        <ItemTemplate>
                <asp:Label ID="lblStudentName" runat="server" Text='<%# Bind("StudentName") %>' Visible="true"></asp:Label>
                <img src="../Images/copy.png" alt="Printer" onclick='copyLabelValue("<%# lblStudentName.ClientID %>")' class="col-2" style="cursor: pointer; width: 30px; height: 30px;" />
        </ItemTemplate>
</asp:TemplateField>

修改后的JavaScript代码

function copyLabelValue(labelId) {
    var value = document.getElementById(labelId).innerText;
    navigator.clipboard.writeText(value);
}

方法3：jQuery通过父容器定位（需引入jQuery） #

给Label和img添加父容器，通过父容器定位当前行的Label：

修改后的ASP.NET代码

<asp:TemplateField HeaderText="StudentName" ItemStyle-HorizontalAlign="Center" HeaderStyle-Width="10%" ItemStyle-Width="10%">
        <ItemTemplate>
                <div class="student-name-wrap">
                    <asp:Label ID="lblStudentName" runat="server" Text='<%# Bind("StudentName") %>' Visible="true"></asp:Label>
                    <img src="../Images/copy.png" alt="Printer" onclick="copyLabelValue(this)" class="col-2" style="cursor: pointer; width: 30px; height: 30px;" />
                </div>
        </ItemTemplate>
</asp:TemplateField>

修改后的JavaScript代码

function copyLabelValue(clickedImg) {
    // ASP.NET Label渲染后为span标签，通过父容器找到对应span
    var value = $(clickedImg).closest('.student-name-wrap').find('span').text();
    navigator.clipboard.writeText(value);
}

内容的提问来源于stack exchange，提问作者Chew Hong Yu