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将呈现为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>>

的ID替换为GridView

Answer 2

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

您的JavaScript功能旨在与TextBox一起使用。我想您希望自动完成功能适用于TextBox中的所有GridView控件。

我的建议是更改JavaScript函数以使用TextBox ID获取参数，然后为每个CSS class添加TextBox，最后创建一个包装器JavaScript使用TextBox枚举getElementsByClassName控件的DOM ready函数，并在<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>上调用该包装函数。

以下是它的样子：

将CSS类添加到TextBoxes：

JavaScript

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

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 }); };放入一个带参数（id）的函数中：

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

最后，您准备好的代码更改为只调用您创建的包装函数：

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

奖励：这是使用jQuery的方法：

（只需要TextBox上的CSS类）

{{1}}

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({});

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

3 个答案: