在ASP.net Listview中获取多个控件id的值并将其传递给JavaScript

Getting values of Multiple Control ID's in ASP.net Listview and passing it to JavaScript

本文关键字:JavaScript id Listview net ASP 获取 控件      更新时间:2023-09-26

我在ASP.net页面的listview控件中有几个标签,我需要在JavaScript中访问这些标签的值,以便在div中显示来自自定义页面的每个标签/记录的数据(鼠标经过效果)。我可以通过将第一个lblID的值分配给JavaScript中的一个变量来访问它,但我需要知道如何访问其余的(让我们假设在这个示例的listview中有10条记录)。

每个标签将有一个不同的值,例如1,5,24,需要在JavaScript中传递给ASP.net文件以获取鼠标悬停的文本。页面sys_get_rankings.aspx?id=1显示鼠标经过的HTML

获取一个标签的值(ctl00_cpMain_ListView1_ctrl0_lblID)不是我的问题,但获得其余的,因为标签的数量每次都会改变。JavaScript的目的是当用户将鼠标悬停在一个名为'button'的元素上时创建鼠标悬停效果。

下面是代码片段;

JavaScript代码
<script type="text/javascript">
$(document).ready(function(){
    $('.button').CreateBubblePopup({
        position: 'top',
        align: 'center',
        innerHtml: '<img src="images/loading.gif" style="border:0px; vertical-align:middle; margin-right:10px; display:inline;" />loading!',
        innerHtmlStyle: { color:'#FFFFFF', 'text-align':'center' },
        themeName: 'all-black',
        themePath: 'images/jquerybubblepopup-theme'
      });
    $('.button').mouseover(function(){
            var button = $(this);
            var x =  document.getElementById('ctl00_cpMain_ListView1_ctrl0_lblID').innerText;
            $.get('sys_get_rankings.aspx?Id=' + x, function(data) {
                button.SetBubblePopupInnerHtml(data, false); 
                };
            }); 
    }); 
});
</script>

HTML/ASP.net Code

<asp:ListView ID="lstUsers" runat="server" DataSourceID="sqldsUsers">
...
<span style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight:
bold; color: #2661d1;" class="button"><%# Eval("Player_Name") %></span>
<asp:Label ID="lblID" runat="server" Text="" Visible="true" ><span style="color: #FFF">      
<%#Eval("TheUserID")%></span></asp:Label>
...
</asp:ListView>

我希望这是有意义的,如果有人能给我一些启示,我将不胜感激!

这是我如何处理这个问题的总体思路。

首先,在你的标签控件上放一个CssClass值(比如"Label"),这样你就可以得到它,而不用担心ASP创建的id值是什么。净。

其次,在鼠标悬停按钮的javascript中,您可以使用button.next('.label')之类的东西来获取对该标签的引用。这里假设。button span就在标签旁边。

然后你可以得到innerText或任何你需要的

为什么不直接为span添加自定义属性,比如userid:

<span userid="<%#Eval("TheUserID")%>" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; color: #2661d1;" class="button">

,那么在JS代码中,你可以这样做:

var x = $(this).attr('userid');

因此,您没有将自己绑定到DOM结构(有一天您可能决定不显示ID,因此您将没有标签,但解决方案仍然有效)。