Javascript code to get ProductID?

Question

I have a webservice that gets a ProductName and I need the Products that are dropped down from the AutoExtender to be links to each product's individual page. Right now the URL gets filled with the ProductName, and not the ID:

Default.aspx?id=Test%20Product

needs to be

Default.aspx?id=519

*Note - this site is for internal use only, so we are not worried about getting hacked right now. We want the site to work.

I have been told that what I want to do is not possible by people on the forum for asp.net so I came here hoping for some help. I think it is the javascript that is getting the ProductName from the webservice, and I need it to get the ProductID. I tried rewriting the For Each loop to include ProductID instead of ProductName, but then the AutoCompleteExtender only shows IDs in the results instead of the ProductNames.

Javascript:

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

Here is the code for my autoCompleteExtender and the webservice:

<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

Edit: Adding the way the search results used to show up before the switch to the AutoCompleteExtender. I have tried to incorporate this into what I have now, but I can't get anything to work right. Please note that this is the OLD code, what is above is all the code I am using NOW.

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

I tried

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

but having the autocomplete extender in a list keeps the results of the query from showing.

Edit: Working code:

    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

gilly3 · Accepted Answer · 2011-09-08T22:36:37.783

1

See this article, or this one.

In short, create your list items using CreateAutoCompleteItem(). Modify the loop in GetProducts to use 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

That sends both the name and the id to the client. That step is crucial. (If there are syntax errors above, forgive me... It's been a long time since I coded much VB - mostly C# these days.)

Then modify your OnClientItemSelected handler to use get_key() instead of get_value() for the url:

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

edited Sep 08 '11 at 22:36

answered Sep 08 '11 at 19:58

gilly3

87,962
25
144
176

I think that get_value is getting the value of the ProductName from the webservice. I took out the javascript and tried this but it still adds the ProductName to the end of the URL and not the ProductID. The only thing I can think of is changing the value inside the For Each loop, but then it won't display the ProductNames in the search engine, it will display IDs. – Jamie Sep 08 '11 at 20:18
@jlg - please post your JavaScript. If the problem you are having is in creating the url, then the code we need to see is the code that actually creates the url. I assume it is in `AutoCompleteClientMethod`. Can you post that? – gilly3 Sep 08 '11 at 20:27
@jlg - You need to use `get_key()` for the url. That is only available if you created your items using `CreateAutoCompleteItem()`. I've updated my answer. – gilly3 Sep 08 '11 at 20:45
value isn't declared so it throws a blue squiggle under it in the (key, value) Should I just declare it as Nothing? – Jamie Sep 08 '11 at 20:57
haha nevermind - it is declared but it says val in your sample code above. I changed it to value – Jamie Sep 08 '11 at 21:00
The autocomplete extender now only shows the IDs when I type in the search box and doesn't redirect. :( – Jamie Sep 08 '11 at 21:05
@jlg - Try reversing the order of arguments to `CreateAutoCompleteItem()`. I think I had them reversed, but I've corrected my answer now. – gilly3 Sep 08 '11 at 22:37
it worked! Thank you so much for helping me! Oh by the way, in front of the word AutoCompleteExtender I had to insert AjaxControlToolkit. – Jamie Sep 09 '11 at 13:26

score 0 · Answer 2 · answered Sep 08 '11 at 20:00

0

You need to wrap the href in single quotes, like this:

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

Now, what are you trying to do with the autocomplete extender? Are you trying to load the results with JavaScript?

answered Sep 08 '11 at 20:00

James Johnson

45,496
8
73
110

The autocomplete extender is listing the products based on what the user types in the textbox above it. It's a search engine, but I need those results to be clickable and go to a page that lists that items details. – Jamie Sep 08 '11 at 20:13
Oh I was thinking that the javascript would be able to get the ProductID from the select statement in the webservice but it doesn't. – Jamie Sep 08 '11 at 20:19

Javascript code to get ProductID?

2 Answers2