如何用JavaScript获取ASP.NET DataList的值并显示到ASP Label

问题说明 #

需要通过JavaScript获取ASP.NET DataList控件中的数据，并将其展示在ASP Label控件里。绑定到DataList的是一个表格形式的数据集。

现有代码 #

JavaScript代码 #

function checkHomestayName() 
{
    var homestayName = document.getElementById('<%=checkHomestayNameDataList.ClientID %>');
    var data = homestayName.rows[0].innerText;
    document.getElementById('<%=Label5.ClientID %>').innerText = data;
}

ASP.NET前端代码 #

<asp:DataList ID="checkHomestayNameDataList" runat="server"></asp:DataList>

后台C#代码 #

protected void Page_Load(object sender, EventArgs e){
     DataTable dt = new DataTable();

     dt = home.checkHomestayName();
     checkHomestayNameDataList.DataSource = dt;
     checkHomestayNameDataList.DataBind();
}

解决方案 #

ASP.NET的DataList默认会渲染成HTML表格（<table>），基于这个特性，你可以按以下方式调整代码确保功能正常：

1. 确认渲染结构并修正取值逻辑
   DataList绑定数据后会生成包含<tr>、<td>的表格结构，当前代码仅取第一行的全部文本，若要精准获取某列数据，需指定单元格索引：

   // 示例：获取第一行第一列的值
   var data = homestayName.rows[0].cells[0].innerText;
   

2. 添加空数据判断
   避免DataList无数据时rows[0]引发报错，增加判断逻辑：

   function checkHomestayName() {
       var dataListTable = document.getElementById('<%=checkHomestayNameDataList.ClientID %>');
       var label = document.getElementById('<%=Label5.ClientID %>');
       
       if (dataListTable && dataListTable.rows.length > 0) {
           label.innerText = dataListTable.rows[0].innerText;
       } else {
           label.innerText = "暂无数据";
       }
   }
   

3. 确保函数触发时机
   可以通过按钮点击触发，或者页面加载完成后自动执行：

   <!-- 按钮触发示例 -->
   <asp:Button ID="btnGetData" runat="server" Text="获取数据" OnClientClick="checkHomestayName(); return false;" />
   <asp:Label ID="Label5" runat="server"></asp:Label>
   

   // 页面加载完成自动执行
   window.onload = function() {
       checkHomestayName();
   };
   

4. 自定义ItemTemplate场景处理
   如果DataList使用了自定义ItemTemplate，需根据模板内的元素结构取值，比如模板里有<span class="item-value">，则通过类选择器获取：

   var itemValue = dataListTable.querySelector('.item-value').innerText;
   

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