使用JavaScript向ASP.NET Label写入日期时间不生效如何解决

问题根因 #

你使用的是ASP.NET Web Forms的服务器端Label控件，默认配置下，带runat="server"属性的控件会根据所处的容器层级（比如母版页、用户控件、数据绑定容器）自动生成不同于服务器端ID的客户端ID，你在浏览器中查看渲染后的页面源码会发现该Label的实际ID不是display1，因此document.getElementById('display1')无法匹配到对应元素，赋值操作自然失效。

解决方案 #

你可以任选以下任意一种方案实现需求：

方案1：固定客户端ID（最简单通用） #

给Label控件添加ClientIDMode="Static"属性，强制控件客户端渲染的ID和服务器端ID保持一致，不需要修改原有JS代码。
修改后的ASPX代码如下：

<tr>
  <td colspan="4" style="height: 26px">
      <asp:Label ID="display1" runat="server" ClientIDMode="Static"></asp:Label>
  </td>
</tr>

方案2：服务端输出实际客户端ID #

如果你不方便修改ClientIDMode属性，可以直接在JS中通过ASP.NET内嵌表达式获取控件的实际客户端ID，修改JS代码如下：

window.onload = function() {
    var today = new Date();
    var day = today.getDay();
    var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var datetime = date + ' ' + time;
    // 此处通过内嵌表达式输出控件实际客户端ID
    document.getElementById('<%= display1.ClientID %>').innerHTML = datetime + '<br> Day: ' + daylist[day];
};

特殊场景适配 #

如果你的Label控件放在UpdatePanel局部刷新容器中，window.onload只会在页面首次全量加载时触发，局部刷新后会失效，需要改用局部刷新事件绑定执行逻辑：

// 页面首次加载+UpdatePanel局部刷新后都会执行
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {
    var today = new Date();
    var day = today.getDay();
    var daylist = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    var date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var datetime = date + ' ' + time;
    document.getElementById('<%= display1.ClientID %>').innerHTML = datetime + '<br> Day: ' + daylist[day];
});

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