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

我试图使用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
        });
    }; 

函数setAutoComplete（）{
var textboxs=document.getElementsByClassName（“AutoCompleteTextBox”）；
对于（变量i=0；i

$（document）.ready（函数（）{setAutoComplete（）；}）；

您的

网格视图

将呈现为

表格

，您的控件将包含在表格的

单元格

中。你可以试试下面的内容

<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>

$（文档）.ready（函数（）{
tblTable=document.getElementById（“”）；
Cell=tblTable.rows[i]。单元格[j]；//i和j是该单元格的位置。
FirstControl=Cell.childNodes[0]；
});

---

将

替换为

网格视图的id

您可以使用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({});

$（“#[name=mytextbox]”）。自动完成（{}）；

问题在于您的

GridView

在每行上创建一个

文本框。
GridView
之外没有“txt\u UID”控件。这就是您的错误消息告诉您的

您的
JavaScript
函数设计为使用一个
TextBox
。我想您希望AutoComplete能够处理
GridView
中的所有
TextBox
控件

我的建议是将
JavaScript
函数更改为使用
TextBox
ID获取一个参数，然后向每个
TextBox
添加一个
CSS类
，最后制作一个包装器
JavaScript
函数，该函数将使用
getElementsByClassName
枚举
TextBox
控件，并调用
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
放入一个接受参数（id）的函数中：

奖励：这里有一种只使用jQuery的方法：

（只需要文本框上的CSS类）

谢谢，我不是一个javascript的人，但是我怎样才能将您的解决方案应用到我发布的javascript代码中呢？我需要用那个密码。。谢谢你，我不知道该把这个放在哪里？？请你澄清一下好吗？谢谢Hanks David，我需要将textBoxId更改为txt\u UID吗？因为这是我文本框的id，谢谢。不，因为我的代码的工作方式是textBoxId是文本框的真实id，包装函数setAutoComplete使用内置JavaScript文档.getElementsByClassName（）方法检索文本框。基本上，我的代码不关心文本框的ID是什么-它使用我添加的新CSS类来获取对GridView中所有文本框的引用（只要你不将CSS类放在任何其他控件或元素上）。记住你没有一个文本框。。。gridview的每一行中都有一个文本框。这是asp.net为您生成的HTML元素，每个元素都有一个唯一的ID。“txt_UID”唯一有意义的地方是在GridView中。有很多方法可以在.net中访问它（使用FindControl方法），但我认为我的方法实际上更简单。没错，我现在正在进行更改并测试它。我会很快让你知道的。thanks@moe：还有一件事我的jQuery中有一个bug——将
$（textBoxId）
更改为
$（“#”+textBoxId）
，它现在可以工作了。
<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>

function setAutoComplete()
{
    var textBoxes = document.getElementsByClassName("AutoCompleteTextBox");
    for (var i = 0; i < textBoxes.length; i++)
    {
        addAutoComplete(textBoxes[i].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(); });

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