ASP NET Label使用Javascript获取动态值

oknwwptz  于 2023-05-23  发布在  .NET
关注(0)|答案(1)|浏览(192)

我有一个样本记录4名学生的名字:
1.无名氏
1.简·史密斯
1.爱丽丝·Json
1.鲍勃·安德森
我有下面的HTML代码,从DB和存储记录列表:

<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);
}

但是该值一直向我返回第一个名字“John Doe”,即使我触发了第三个/第四个副本图像。尝试了一些其他的方法,但仍然无法得到我想要的,这能够返回我的第三个值,如果我按下第三个副本图像,反之亦然。
方法:
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

db2dz4w8

db2dz4w81#

好吧,你不显示这是一个中继器,网格视图,甚至是一个详细信息视图。
然而,这可能并不重要。
当然,问题是你没有标签或图像或其他东西的一个示例。因此,每一行都“重复”了很多次,事实上标签和图像按钮也重复了很多次。
结果,实际上“生成”了每一行控件,并给它们指定了一个特定的行ID。一个很好的方法来看看这是如何工作的是击中f12(浏览器调试工具),选择“元素”,然后点击“指针”,现在点击页面中的一个元素-你会看到,每行控件被赋予一个特定的名称(通常由控件前缀,如gridview,然后控件名称,然后行号!!).
有几种方法可以做到这一点。一种简单的方法是传递行值,这可能是最简单的方法。
所以,说这个标记:

<div style="float:left">
            <asp:GridView ID="GridView1" runat="server" ShowHeaderWhenEmpty="true"
                AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table table-hover" 
                Width="55em">
                <Columns>
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
                    <asp:BoundField DataField="LastName" HeaderText="LastName" />
                    <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
                    <asp:BoundField DataField="City" HeaderText="City" />
                    <asp:BoundField DataField="Province" HeaderText="Province" />
                    <asp:BoundField DataField="Description" HeaderText="Description" />
                    <asp:TemplateField>
                        <ItemTemplate>

                            <img src="../Content/copy.png" 
                                onclick="copyLabelValue('<%# Eval("HotelName") %>')"
                                style="width:48px;height:48px" 
                                />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </div>

        <div style="float:left;margin-left:40px">
            <h4>Paste test area</h4>
            <asp:TextBox ID="TextBox1" runat="server" 
                TextMode="MultiLine" Height="117px" Width="304px"></asp:TextBox>
        </div>

        <script>
            function copyLabelValue(cText) {
                navigator.clipboard.writeText(cText);

            }
        </script>

在上面,我只是将“表达式”传递给js代码。
要加载的代码如下:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        LoadGrid
    End If
End Sub

Sub LoadGrid()

    GridView1.DataSource =
        MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GridView1.DataBind()

End Sub

结果是这样的:

然而,假设我们想要抓取网格行上的控件。
所以,说这个标记:

<asp:TemplateField>
                        <ItemTemplate>
                            <asp:Label ID="lblHotelName" runat="server" 
                                Text='<%# Eval("HotelName") %>' style="display:none"></asp:Label>

                            <img src="../Content/copy.png" id="myimagebtn" runat="server"
                                onclick="copyLabelValue2(this.id,'myimagebtn')"
                                style="width:48px;height:48px" 
                                />
                        </ItemTemplate>
                    </asp:TemplateField>

然后是这个

function copyLabelValue2(btn, cText) {
                var tlbl = btn.replace(cText, 'lblHotelName')
                var HotelText = document.getElementById(tlbl).innerText
                navigator.clipboard.writeText(HotelText);
            }

还有别的办法我认为通常只使用服务器端表达式传递值就可以很好地工作。但是,如果值带有单引号(或双引号),则代码可能会失败。
因此,最好传递当前控件的"id"(确保有runat ="server",这样服务器端的自动控件会为repeater/gridview/listview(实际上是任何数据重复控件)的每一行重新命名)。
另一个可能的诡计?我通常只是为有问题的控件创建一个自定义属性。这允许传递多个值!!!
像这样说:

<asp:TemplateField>
                        <ItemTemplate>
                            <img src="../Content/copy.png" id="myimagebtn" runat="server"
                                onclick="copyLabelValue3(this)"
                                style="width:48px;height:48px" 
                                myHotel='<%# Eval("HotelName") %>'
                                />
                        </ItemTemplate>
                    </asp:TemplateField>

然后这个代码:

function copyLabelValue3(btn) {
                var HotelText = btn.getAttribute("myHotel")
                alert(HotelText)
                navigator.clipboard.writeText(HotelText);
            }

但是,请注意,我可以说通过酒店和城市,只需添加另一个“弥补”atrriboote
例如:

<img src="../Content/copy.png" id="myimagebtn" runat="server"
        onclick="copyLabelValue3(this)"
        style="width:48px;height:48px" 
        myHotel='<%# Eval("HotelName") %>'
        myCity='<%# Eval("City") %>'
        />

然而,由于这意味着数据被重复(发送)到浏览器2次,因此对于大页面,这将开始向网页添加额外的有效负载。然而,对于一些额外的值,添加“made up”属性效果很好。

相关问题