如何通过AJAX更新ASP:Placeholder控件中的文本内容？

我明白你遇到的问题了——asp:PlaceHolder这个服务器控件有个容易踩的坑：它在页面渲染完成后不会生成自己的HTML标签，只是把它内部的内容直接输出到页面上。这就导致你用$('#<%=tbl_pdcr_main.ClientID%>')根本找不到对应的DOM元素，自然没法通过replaceWith更新内容。

下面给你两种可行的解决方案：

方案1：把PlaceHolder换成asp:Panel #

asp:Panel控件会被渲染成一个<div>标签，这样页面上就有了明确的DOM元素可以被JS选中。修改你的ASP.NET代码：

<div class="modal-body">
    <!-- 替换PlaceHolder为Panel，可选设置ClientIDMode让ID固定 -->
    <asp:Panel runat="server" ID="pnl_pdcr_main" ClientIDMode="Static"></asp:Panel>
</div>

然后更新你的JavaScript代码，用html()方法替换Panel内部的内容（而不是replaceWith，后者会替换整个Panel标签）：

$.ajax({
    url: '/Staff/PDX.aspx/GetPDCRRecords',
    method: 'post',
    contentType: 'application/json',
    data: '{r_id:' + yil + '}',
    dataType: 'json',
    success: function (data) {
        // 其他标签的更新逻辑保持不变
        $('#<%=lbl_pdcx_y_gec.ClientID%>').text(data.d.YGec);
        $('#<%=lbl_pdcx_y_msiz.ClientID%>').text(data.d.YMaz);
        $('#<%=lbl_pdcx_y_rap.ClientID%>').text(data.d.YRap);
        $('#<%=lbl_pdcx_y_terk.ClientID%>').text(data.d.YTerk);
        $('#<%=lbl_pdcx_y_diger.ClientID%>').text(data.d.YDiger);
        
        // 更新Panel的内容
        $('#pnl_pdcr_main').html(data.d.PDCRLog);
    },
    error: function (error) {
        alert(error);
    }
});

如果没有设置ClientIDMode="Static"，记得用服务器端生成的ClientID：$('#<%=pnl_pdcr_main.ClientID%>').html(data.d.PDCRLog);

方案2：保留PlaceHolder，内部添加一个客户端容器 #

如果你一定要保留asp:PlaceHolder，可以在它内部嵌套一个普通的<div>作为内容容器，这样JS就能选中这个div来更新内容：

<div class="modal-body">
    <asp:PlaceHolder runat="server" ID="tbl_pdcr_main">
        <!-- 添加一个固定ID的div作为内容容器 -->
        <div id="pdcr_content_container"></div>
    </asp:PlaceHolder>
</div>

对应的JavaScript代码修改：

// 直接更新内部div的内容
$('#pdcr_content_container').html(data.d.PDCRLog);

为什么原来的代码不生效？ #

再强调一下：asp:PlaceHolder的作用只是在服务器端作为内容的容器，它本身不会被渲染成任何HTML元素。所以页面上根本不存在ID为tbl_pdcr_main的DOM节点，你的jQuery选择器找不到目标，replaceWith自然也就没有效果。

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