在asp.net中自动完成jquery,来自代码背后的源代码

时间:2012-03-29 19:54:47

标签: c# jquery asp.net jquery-ui sharepoint

虽然这个论坛中有很多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代码? 非常感谢。

1 个答案:

答案 0 :(得分:3)

关于您的第一个问题,如果您使用的是ASP.net版本4或更高版本,则可以将文本框的ClientIDMode设置为“static”,它将强制服务器将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/),其中有一些如何使用该库的例子。