Question

我有一个传统的ASP.NET GridView。在其中我有一个具有编辑功能的模板字段。我需要在编辑片上使用jQuery自动完成插件。它可以在GridView的任何地方工作。换句话说，我知道这个插件有效。

这是ASP.NET的东西（是的，我使用的是SqlDataSource）：

＆lt;％＃Eval（“INGREDIENT_CODE”）％＆gt;

这是document.ready（）中的jQuery：

$('[id$=txtEditIngredients]').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });

我可能在这里做错了什么？

Answer 1

我认为最好的方法是为文本框指定一个Class并根据类而不是ID来处理它。

$('.AutoCompleteField').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });

当我尝试使用ID访问gridview中的控件时，我遇到了问题。

HTH

Answer 2

您需要在项目模板中使用：

<%# ((GridViewRow)Container).FindControl("txtEditIngredients").ClientID %>

如果查看渲染页面的来源，您会看到gridview中文本框的控件ID不仅仅是txtEditIngredients，它还有预先附加的信息。

另一种选择是在文本框中添加一个类，并根据类应用自动完成。这样他们就不依赖于id

$('.ICLookup').autocomplete("LookupCodes.aspx?type=IC", { mustMatch: true });

另外，如果使用客户端ID，请确保将特定document.ready（）：放入EditTemplate，以确保仅在编辑控件可见时才调用它。

Answer 3

你可以使用一个类来进行选择，如果你想要的话（正如其他人提到的那样），但对我来说，如果你是为了这个目的而添加一个类，你有一个ID就可以了选择，似乎是浪费。

我创建了一个非常简单的示例，它显示了您的方式（使用[id $ = txtField]作为您的选择器确实可以使用插件。这是.aspx代码：

<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.min.js"></script>
    <link type="text/css" href="jquery.autocomplete.css" rel="stylesheet" />
    <script type="text/javascript">
        $(function() {
            $('[id$=txtTest]').autocomplete(["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "pearl"], {
                mustMatch: true
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:GridView runat="server" ID="grdView" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:TextBox runat="server" ID="txtTest" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    </div>
    </form>
</body>
</html>

这是运行测试所需的代码隐藏更新：

protected void Page_Load(object sender, EventArgs e)
{
    List<string> data = new List<string>();
    data.Add("test");
    data.Add("test2");
    this.grdView.DataSource = data;
    this.grdView.DataBind();
}

如果您创建一个测试webapp并将其作为测试页面并运行它，那么自动完成功能就可以了。

由于这不适用于您的应用，您需要检查以确保您使用的选择器（[id $ = txtEditIngredients]）实际匹配某些内容。要对此进行测试，请将此代码放在document.ready event：

之前

alert($('[id$=txtEditIngredients]').size());

这应该使用GridView中的行数警告一个数字。如果没有，请查看源并在其中一行中找到该文本字段以查看ID，并相应地调整选择器。

编辑：我只是想补充一点，我在jQuery / .Net中一直使用[id $ = controlName]因为.Net控件命名结构而且每次都能正常工作，所以这根本不应该是一个问题。

Answer 4

好吧，既然你说它在更新面板内，那就更有意义了。 updatepanel中的代码不一定会在jquery运行时呈现。像我在其他答案中建议的那样使用.size进行警报将证实这一点。

如果您执行.live（'autocomplete'）调用而不是.autocomplete（），它甚至可以使用updatepanel。 jQuery .live函数会将jQuery事件添加到与选择器匹配的所有控件中，即使它们是在您进行调用后添加的。有关详细信息，请参阅http://api.jquery.com/live/。

在GridView中使用jQuery？

4 个答案: