如何使用 Javascript 在 GridView 中查找文本框

Question

我正在尝试使用 javascript 在 GridView 中访问和查找文本框，但出现错误：“当前上下文中不存在名称 txt_UID”。当我的文本框位于 GridView 之外时，一切正常。这是我在 gridview 中的文本框，我的 gridview 称为 GridView1：

 <asp:TemplateField ItemStyle-Width="150px" HeaderText="User Assigned">
    <ItemTemplate>  
     <asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
        CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
       </ItemTemplate>
         <ItemStyle Width="150px" />
         </asp:TemplateField>

这是我的 JavaScript：

  <script type ="text/javascript">
        function setAutoComplete() {
            var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
            for (var i = 0; i < textBoxes.length; i++) {
                addAutoComplete(textBoxes[i].id);
            }
        }
</script>

<script type="text/javascript">
    function addAutoComplete(textBoxId) {
        $("#" + textBoxId).autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
                    data: "{ 'prefix': '" + request.term + "'}",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.split('-')[0],
                                val: item.split('-')[1]
                            }
                        }))
                    },
                    error: function (response) {
                        alert(response.responseText);
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    }
                });
            },
            select: function (e, i) {
                $("#<%=hfUserId.ClientID %>").val(i.item.val);
            },
            minLength: 1
        });
    }; 

<script type ="text/javascript">
     $(document).ready(function () { setAutoComplete(); });
    </script>

Answer 1

问题是您的GridView 在每一行创建一个TextBox。在GridView 之外没有“txt_UID”控件。这就是您的错误消息告诉您的内容。

您的JavaScript 函数旨在与一个TextBox 一起使用。我想您希望 AutoComplete 可以处理 GridView 中的所有 TextBox 控件。

我的建议是更改JavaScript 函数以获取具有TextBox ID 的参数，然后将CSS class 添加到每个TextBox，最后制作一个包装器JavaScript 函数，该函数将枚举TextBox 使用getElementsByClassName 控制，并在DOM ready 上调用该包装函数。

这是它的样子：

将 CSS 类添加到文本框：

<asp:TemplateField ItemStyle-Width="150px" HeaderText="User Name">
    <ItemTemplate>  
        <asp:TextBox ID="txt_UID" runat="server" Text='<%# Eval("UID")%>'
            CssClass="AutoCompleteTextBox" Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>
    </ItemTemplate>
    <ItemStyle Width="150px" />
</asp:TemplateField>

新的JavaScript函数：

function setAutoComplete()
{
    var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
    for (var i = 0; i < textBoxes.length; i++)
    {
        addAutoComplete(textBoxes[i].id);
    }
}

接下来，将你的另一个 JavaScript 变成一个带有参数（id）的函数：

function addAutoComplete(textBoxId) {
    $("#" + textBoxId).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/Service.asmx/GetUserNames") %>',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfUserId.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
};

最后，您的就绪代码更改为仅调用您创建的包装函数：

$(document).ready(function () { setAutoComplete(); });

奖励：这是一种仅使用 jQuery 的方法：

（只需要 TextBoxes 上的 CSS 类）

$(document).ready(function () {
    $.each($(".AutoCompleteTextBox"), function (i, textBox) {
        textBox.autocomplete( /* your code */);
    })
});

Answer 2

您的Gridview 将呈现为Table，您的控件将包含在表的cell 中。您可以尝试关注。

<script type=”text/javascript”>
$(document).ready(function(){
tblTable=document.getElementById(‘<<Client ID of the GridView>>’);
Cell=tblTable.rows[i].cells[j];//i and j are locations of that cell.
FirstControl = Cell.childNodes[0];
});
</script>

将<<Client ID of the GridView>> 替换为您的GridView 的ID

Answer 3

您可以使用 name 属性和网格 id 来查找它：

<asp:TextBox ID="txt_UID" name="mytextbox" runat="server" Text='<%# Eval("UID")%>'
        Width="130px" BackColor="LightGoldenrodYellow"></asp:TextBox>

javascript部分：

$("#<%=MyGrid.ClientID %>[name=mytextbox]").autocomplete({});