不修改GroupPick.ascx，如何将控件标题改为List teacher for？

下面提供三种无需修改GroupPick.ascx文件的实现方式，按推荐优先级排序：

方法一：后端代码修改（推荐） #

由于控件内的lblHeader是服务器端控件（带runat="server"），可以在StudentClasses.aspx的后台代码中定位到该控件并修改文本：

VB.NET 代码示例 #

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    Dim headerLabel As Label = grpPicker.FindControl("lblHeader")
    If headerLabel IsNot Nothing Then
        headerLabel.Text = "List teacher for:  "
    End If
End Sub

C# 代码示例（若项目用C#） #

protected void Page_Load(object sender, EventArgs e)
{
    Label headerLabel = grpPicker.FindControl("lblHeader") as Label;
    if (headerLabel != null)
    {
        headerLabel.Text = "List teacher for:  ";
    }
}

此方式直接修改服务器端控件的文本属性，不会影响控件的其他逻辑，是最可靠的方案。

方法二：前端JavaScript修改 #

在StudentClasses.aspx页面中添加一段脚本，页面加载完成后替换目标元素的文本：

jQuery 版本 #

<script type="text/javascript">
    $(document).ready(function() {
        // 通过ID后缀匹配找到控件（ASP.NET会自动添加ID前缀）
        const headerSpan = $('span[id$="lblHeader"]');
        if (headerSpan.length) {
            headerSpan.text('List teacher for: \u00A0'); // \u00A0对应&nbsp;实体
        }
    });
</script>

原生JavaScript 版本 #

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function() {
        const headerSpans = document.querySelectorAll('span[id$="lblHeader"]');
        if (headerSpans.length) {
            headerSpans[0].textContent = 'List teacher for: \u00A0';
        }
    });
</script>

该方案适合无法修改后端代码的场景，直接操作前端DOM替换文本。

方法三：CSS视觉替换（仅UI层面） #

若仅需视觉上修改文本，不改动实际DOM内容，可使用CSS伪元素覆盖原文本：

<style type="text/css">
    span[id$="lblHeader"] {
        visibility: hidden;
        position: relative;
    }
    span[id$="lblHeader"]::after {
        content: "List teacher for: \00a0";
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>

注意：此方法仅改变视觉显示，DOM中的原始文本仍未修改，若有依赖文本内容的逻辑可能失效，仅作为备选方案。

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