如何使用JavaScript获取DataList编辑项模板中的文本框ID？

我太懂这种控件嵌套后找不到ID的头疼了！当文本框放在DataList的EditItemTemplate里时，ASP.NET会因为命名容器的规则自动修改它的ClientID，直接用<%= txtAddress.ClientID %>根本拿不到正确的ID——因为这个表达式是页面级解析的，而编辑项里的控件是在DataList绑定后才生成的。给你几个靠谱的解决方案：

方案1：设置ClientIDMode为Static（简单但有局限） #

如果你的DataList一次只会有一个编辑项（大多数场景都是这样），可以直接给文本框设置ClientIDMode="Static"，强制ASP.NET不修改它的ID：

<EditItemTemplate>
    <asp:TextBox ID="txtAddress" runat="server" ClientIDMode="Static"></asp:TextBox>
</EditItemTemplate>

然后JS里直接用固定ID获取：

google.maps.event.addDomListener(window, 'load', function () {
    var places = new google.maps.places.Autocomplete(document.getElementById("txtAddress"));
    google.maps.event.addListener(places, 'place_changed', function () {
        var place = places.getPlace();
        // 这里写你处理地点变化的逻辑
    });
});

⚠️ 注意：如果DataList允许同时编辑多个项，这个方法会导致ID重复，引发问题，所以只适合单条编辑的场景。

方案2：在ItemDataBound事件中动态注册脚本（最精准） #

通过DataList的ItemDataBound事件，我们可以在编辑项绑定的时候，精准获取到文本框的真实ClientID，然后动态生成自动补全的脚本：

后台代码（C#示例） #

protected void YourDataList_ItemDataBound(object sender, DataListItemEventArgs e)
{
    // 只处理编辑项
    if (e.Item.ItemType == ListItemType.EditItem)
    {
        TextBox txtAddress = e.Item.FindControl("txtAddress") as TextBox;
        if (txtAddress != null)
        {
            // 拼接包含正确ClientID的脚本
            string autoCompleteScript = $@"
                google.maps.event.addDomListener(window, 'load', function () {{
                    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('{txtAddress.ClientID}'));
                    google.maps.event.addListener(autocomplete, 'place_changed', function () {{
                        var selectedPlace = autocomplete.getPlace();
                        // 这里添加你需要的逻辑，比如把地址拆分到其他控件
                    }});
                }});";
            
            // 注册脚本到页面，确保每个编辑项的脚本唯一
            ClientScript.RegisterStartupScript(this.GetType(), $"AutoComplete_{txtAddress.ClientID}", autoCompleteScript, true);
        }
    }
}

别忘了在DataList的标签里绑定这个事件：

<asp:DataList ID="YourDataList" runat="server" OnItemDataBound="YourDataList_ItemDataBound">
    <!-- 其他模板 -->
    <EditItemTemplate>
        <asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
    </EditItemTemplate>
</asp:DataList>

方案3：用CSS类选择器定位（适合用jQuery的项目） #

如果你的项目已经引入了jQuery，或者不想跟后台代码打交道，可以给文本框加一个唯一的CSS类，然后通过类选择器获取元素：

<EditItemTemplate>
    <asp:TextBox ID="txtAddress" runat="server" CssClass="address-autocomplete-input"></asp:TextBox>
</EditItemTemplate>

然后JS里用类选择器定位：

google.maps.event.addDomListener(window, 'load', function () {
    // 获取编辑项里的地址输入框
    var addressInput = document.querySelector('.address-autocomplete-input');
    if (addressInput) {
        var places = new google.maps.places.Autocomplete(addressInput);
        google.maps.event.addListener(places, 'place_changed', function () {
            var place = places.getPlace();
            // 你的处理逻辑
        });
    }
});

这个方法不用关心ClientID的变化，只要CSS类名唯一就可以，非常灵活。

最后别忘了！ #

确保你已经正确加载了Google Maps Places API，而且要在你的自定义脚本之前加载：

<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&libraries=places"></script>

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