c# - ASP.NET 中的自动完成 jquery，来自代码隐藏

Question

虽然这个论坛里有很多jquery自动完成代码。但是我还没有找到任何适合我的 SharePoint/ASP.NET 网页案例的内容。我关注了jquery autocomplete link 。这很有帮助。但请看一下

我的代码:

<asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>  
<script type="text/javascript">
    $(document).ready(function () {
        $("asp:TextBox#TextBox3").autocomplete({
            source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
        });
    });

</script>
 </asp:Content>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<table>
      <tr><td>
        <asp:Label ID="Label4" runat="server" Text="Qode"></asp:Label></td><td>
           <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

        </td></tr>
</table>

问题

1. Can I use the code ` $("asp:TextBox#TextBox3")?`
2. If the source comes from code behind instead of hard copy strings, how to do it?

让我们在后面的代码中说:

        string[] source = new string[5];
        source[0] = "c++";
        source[1] = "java";
        source[2] = "php";
        source[3] = "coldfusion";
        source[4] = "javascript";

那么如何将数组传递给jquery代码呢？ 非常感谢。

Answer 1

关于你的第一个问题，如果你使用的是 ASP.net 版本 4 或更高版本，你可以将文本框的 ClientIDMode 设置为“静态”，它将强制服务器将 ClientID 呈现为与服务器 ID。然后你就可以在你的 jQuery 代码中正常引用它了。

例如。

<asp:TextBox ID="TextBox3" runat="server" ClientIdMode="static"> `

$("#TextBox3")  // select your text box with standard jQuery id selector

如果您使用的是旧版本的 ASP.net，则可以将服务器端代码插入到 .aspx 中以访问生成的动态 clientID。您也可以将其添加到 jQuery 选择器中，但会有一点不同。

$("#<%= Textbox3.ClientID %>")

这应该向浏览器呈现正确的客户端 ID 并由 jQuery 处理。

关于你的第二个问题，我个人会将数组序列化为 JSON 并将其发送给 jQuery。 Json.Net ( http://json.codeplex.com/ ) 是一个很好的库，它提供了如何使用该库的示例。