ASP.NET中如何引用ItemTemplate内的TextBox控件

这个问题很典型——Repeater里的控件是动态生成的，直接用<%= txtCurrBlk.ClientID %>肯定行不通，原因有两个：

1. 服务器端无法直接获取ItemTemplate内控件的引用（它属于Repeater的子控件，不在页面的直接控件集合里），编译时会报错；
2. 即使能获取，Repeater每生成一条Item，对应的TextBox都会有唯一的ClientID（比如Repeater1_ctl00_txtCurrBlk、Repeater1_ctl01_txtCurrBlk），固定的选择器根本无法匹配所有实例。

下面给你三种可行的解决方案，按推荐程度排序：

方案一：使用CSS类选择器（最推荐） #

给TextBox添加一个自定义CSS类，通过类选择器绑定事件，同时用$(this)获取当前触发事件的控件，完美适配所有Repeater生成的实例。

第一步：修改Repeater的ASPX代码 #

<asp:Repeater ID="YourRepeaterID" runat="server">
    <ItemTemplate>
        <!-- 添加CssClass属性 -->
        <asp:TextBox ID="txtCurrBlk" CssClass="curr-blk-input" runat="server"></asp:TextBox>
    </ItemTemplate>
</asp:Repeater>

第二步：修改jQuery代码 #

$(function () {
    var msgbox = $("#status");
    // 通过CSS类绑定keyup事件
    $('.curr-blk-input').on('keyup', function () {
        alert("Input was updated!");
        // 获取当前输入框的值（如果需要传给后端）
        var inputValue = $(this).val();
        
        $.ajax({
            type: "POST",
            url: "MonthlyCopyReadings.aspx/readingTextChanged",
            // 若要传参，用JSON.stringify包装（注意后端方法要对应参数名）
            data: JSON.stringify({ inputVal: inputValue }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(msg) {
                msgbox.html(msg.d);
            }
        });
    });
});

方案二：在ItemDataBound事件中绑定客户端事件 #

如果需要更精准地控制每个Item的控件，可以在服务器端的ItemDataBound事件中，给每个TextBox绑定自定义的客户端事件，并传入其唯一的ClientID。

第一步：后端代码（C#示例） #

protected void YourRepeaterID_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    // 确保是数据项（不是页眉/页脚）
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        TextBox txtCurrBlk = (TextBox)e.Item.FindControl("txtCurrBlk");
        // 绑定onkeyup事件，传入当前控件的ClientID
        txtCurrBlk.Attributes.Add("onkeyup", $"handleInputKeyUp('{txtCurrBlk.ClientID}')");
    }
}

第二步：前端JS函数 #

function handleInputKeyUp(clientId) {
    var targetInput = $('#' + clientId);
    var msgbox = $("#status");
    alert("Input was updated!");
    var inputValue = targetInput.val();
    
    $.ajax({
        type: "POST",
        url: "MonthlyCopyReadings.aspx/readingTextChanged",
        data: JSON.stringify({ inputVal: inputValue }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            msgbox.html(msg.d);
        }
    });
}

方案三：使用ClientIDMode="Static"（不推荐） #

如果你使用的是.NET 4.0及以上版本，可以设置ClientIDMode="Static"让TextBox的ID保持为你设置的txtCurrBlk，但注意：这会导致HTML中出现重复ID，违反W3C规范，可能引发其他前端问题，仅在特殊场景下使用。

<asp:Repeater ID="YourRepeaterID" runat="server">
    <ItemTemplate>
        <asp:TextBox ID="txtCurrBlk" ClientIDMode="Static" runat="server"></asp:TextBox>
    </ItemTemplate>
</asp:Repeater>

对应的jQuery代码可以直接用$('#txtCurrBlk')，但需要用each()遍历或者绑定事件时处理多个实例：

$(function () {
    var msgbox = $("#status");
    $('#txtCurrBlk').on('keyup', function () {
        // 逻辑同方案一
    });
});

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