获取 ProductID 的 Javascript 代码？

Question

我有一个获取 ProductName 的网络服务，我需要从 AutoExtender 下拉的产品链接到每个产品的单独页面。 现在 URL 填充的是 ProductName，而不是 ID：

Default.aspx?id=Test%20Product

需要

Default.aspx?id=519

*注意 - 本网站仅供内部使用，所以我们现在不担心被黑客入侵。我们希望网站正常运行。

有人告诉我，asp.net 论坛上的人无法做到我想做的事情，所以我来到这里希望得到一些帮助。我认为是从 web 服务获取 ProductName 的 javascript，我需要它来获取 ProductID。我尝试重写 For Each 循环以包含 ProductID 而不是 ProductName，但是 AutoCompleteExtender 仅在结果中显示 ID 而不是 ProductNames。

Javascript：

<script type="text/javascript">
function AutoCompleteClientMethod(source, eventArgs) {
    var value = eventArgs.get_value();
    window.location = ("/Product/Default.aspx?id=" + value)
} 
</script>

这是我的 autoCompleteExtender 和网络服务的代码：

<asp:TextBox ID="Search" runat="server" AutoComplete="off"></asp:TextBox>
    <asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="Search" ServicePath="~/ProductSearch.asmx" ServiceMethod="GetProducts" MinimumPrefixLength="1" CompletionSetCount="120" EnableCaching="true" OnClientItemSelected="AutoCompleteClientMethod">
    </asp:AutoCompleteExtender>

' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _
Public Class ProductSearch
Inherits System.Web.Services.WebService


<WebMethod()> _
Public Function GetProducts(ByVal prefixText As String, ByVal count As Integer) As String()
    Dim ProductSql As String = "Select DISTINCT ProductID, ProductName FROM Product WHERE ProductName LIKE '%" & prefixText & "%' ORDER BY ProductName ASC"
    Dim sqlConn As New SqlConnection
    sqlConn.Open()
    Dim myCommand As New SqlCommand(ProductSql, sqlConn)
    Dim myReader As SqlDataReader = myCommand.ExecuteReader()
    Dim myTable As New DataTable
    myTable.TableName = "ProductSearch"
    myTable.Load(myReader)
    sqlConn.Close()
    Dim items As String() = New String(myTable.Rows.Count - 1) {}
    Dim i As Integer = 0
    For Each dr As DataRow In myTable.Rows
        items.SetValue(dr("ProductName").ToString(), i)
        i += 1
    Next
    Return items
End Function
End Class

编辑：在切换到 AutoCompleteExtender 之前添加搜索结果的显示方式。我试图将其合并到我现在拥有的东西中，但我无法让任何事情正常工作。请注意，这是OLD代码，上面是我现在使用的所有代码。

<div class="hiddenResults">
    <ul id="hiddenResults" style="display:none;">
    <asp:ListView ID="lvProducts" runat="server" DataSourceID="dsProducts">
    <ItemTemplate>
        <li><a href="/Product/Default.aspx?id=<%# eval("ProductID") %>"><span class="title"><%# eval("ProductName") %></a></span></li>
    </ItemTemplate>
    </asp:ListView>
    </ul>
</div>

我试过了

 <ul style="list-style:none;"><li><a href='/Product/Default.aspx?id=<%# eval("ProductID") %>'>
<asp:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" TargetControlID="Search" ServicePath="~/ProductSearch.asmx" ServiceMethod="GetProducts" MinimumPrefixLength="1" CompletionSetCount="120" EnableCaching="true" OnClientItemSelected="AutoCompleteClientMethod">
</asp:AutoCompleteExtender></a></li></ul>

但在列表中使用自动完成扩展程序会阻止显示查询结果。

编辑：工作代码：

    For Each dr As DataRow In myTable.Rows
        Dim id As String = dr("ProductID").ToString()
        Dim name As String = dr("ProductName").ToString()
        Dim item As String = AjaxControlToolkit.AutoCompleteExtender.CreateAutoCompleteItem(name, id)
        items.SetValue(item, i)
        i += 1
    Next

Answer 1

请参阅this article 或this one。

简而言之，使用CreateAutoCompleteItem() 创建您的列表项。修改GetProducts中的循环使用CreateAutoCompleteItem()：

For Each dr As DataRow In myTable.Rows
    dim id as String = dr("ProductId").ToString()
    dim name as String = dr("ProductName").ToString()
    dim item as String = AutoCompleteExtender.CreateAutoCompleteItem(name, id)
    items.SetValue(item, i)
    i += 1
Next

这会将名称和 ID 发送给客户端。这一步至关重要。 （如果上面有语法错误，请见谅......我已经很久没有编写过很多 VB 代码了 - 这些天主要是 C#。）

然后修改您的OnClientItemSelected 处理程序以使用get_key() 而不是get_value() 作为url：

function AutoCompleteClientMethod(source, eventArgs) {
    var value = eventArgs.get_key();
    window.location = ("/Product/Default.aspx?id=" + value)
}

Answer 2

您需要将 href 用单引号括起来，如下所示：

<a href='/Product/Default.aspx?id=<%# eval("ProductID") %>'>

现在，您想用自动完成扩展器做什么？您是否尝试使用 JavaScript 加载结果？