[RESOLVED] autocomplete TextBox with data from a SQL SERVER

Hi all, im new at asp. net and im making a web page with 3 dropdownlist filtering DATA, and then i display a Gridview with the data selected. But i also have some TextBoxs and i want them to autocomplete according to the filters i previously selected. Im working all of this with no code behind.

Thank all, and here the code. I Bold The TextBox so you can see it clearly :D.

<%@ Import Namespace="System.Data" %>
<%@ Page Language="VB" Debug="True" %>
<%@ import Namespace="System" %>
<%@ import Namespace="System.Data.OLEDB" %>
<%@ import Namespace="System.Data.OleDb.OleDbException" %>


<form id="form1" runat="server">


<asp:LinkButton ID="LinkButton5" runat="server" Text="Default"
    PostBackUrl="http://localhost:49724/Default.aspx"></asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton4" runat="server" Text="Editar/Actualizar/Eliminar Empleado"
    PostBackUrl="http://localhost:49724/EditEmpleado.aspx"></asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton7" runat="server" Text="Editar/Actualizar/Eliminar Producto"
    PostBackUrl="http://localhost:49724/EditProducto.aspx"></asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton8" runat="server" Text="Editar/Actualizar/Eliminar Categoria"
    PostBackUrl="http://localhost:49724/EditCategoria.aspx"></asp:LinkButton>


<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:TestingConnectionString %>"


    SelectCommand="SELECT [PROJID] FROM [sxb_Proyectos] ORDER BY [PROJID]">


</asp:SqlDataSource>


<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:TestingConnectionString %>"


    SelectCommand="SELECT DISTINCT Ax50_Empleados.rut, Ax50_HorasRegistradas.rut
                    FROM Ax50_Empleados
                    INNER JOIN Ax50_HorasRegistradas
                    ON Ax50_Empleados.rut= Ax50_HorasRegistradas.rut
                    where ([PROJID] = CASE WHEN @PROJID = '-1' THEN [PROJID] ELSE @PROJID END)
                    ORDER BY Ax50_Empleados.rut">


<SelectParameters>


<asp:ControlParameter ControlID="DropDownList1" Name="PROJID" PropertyName="SelectedValue"/>


</SelectParameters>


</asp:SqlDataSource>


<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:TestingConnectionString %>"


    SelectCommand="SELECT DISTINCT sxb_Producto.Producto, Ax50_HorasRegistradas.LINEPROPERTYID
                    FROM sxb_Producto
                    INNER JOIN Ax50_HorasRegistradas
                    ON sxb_Producto.Producto = Ax50_HorasRegistradas.LINEPROPERTYID
                    where (([rut] = CASE WHEN @rut=  '-1' THEN [rut] ELSE @rut END)
                    AND
                    ([PROJID] = CASE WHEN @PROJID = '-1' THEN [PROJID] ELSE @PROJID END))
                    ORDER BY sxb_Producto.Producto">


<SelectParameters>


<asp:ControlParameter ControlID="DropDownList2" Name="rut" PropertyName="SelectedValue"/>
<asp:ControlParameter ControlID="DropDownList1" Name="PROJID" PropertyName="SelectedValue"/>


</SelectParameters>


</asp:SqlDataSource>


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


<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1"  AppendDataBoundItems="true"
DataTextField="PROJID" DataValueField="PROJID">
<asp:ListItem Value="0"><Select an option></asp:ListItem>
<asp:ListItem Value="-1"><Select All></asp:ListItem>
                    

</asp:DropDownList>
</tr>


<tr>
<td>Rut Empleado</td>
<td>
<asp:DropDownList ID="DropDownList2" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource2" AppendDataBoundItems="true" enableviewstate="false"
DataTextField="rut" DataValueField="rut">
<asp:ListItem Value="-1"><Select All></asp:ListItem>


</asp:Dropdownlist>


</td>
</tr>


<tr>
<td>Producto</td>
<td>
<asp:DropDownList ID="DropDownList3" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource3" AppendDataBoundItems="true" enableviewstate="false"
DataValueField="Producto" DataTextField="Producto">
<asp:ListItem Value="-1"><Select All></asp:ListItem>


</asp:DropDownList>
</td>
</tr>
</table>
<br />
<hr />
<table><tr><td>Codigo Proyecto</td><td>Nombre Proyecto</td><td>Cliente</td></tr>
<tr><td>
    

</td>
<td>
    <asp:textbox runat="server" ReadOnly="True"></asp:textbox>
</td>
<td>
    <asp:textbox runat="server"></asp:textbox>
</td>


</tr>
</table>
<hr />


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="PROJID"
    DataSourceID="SqlDataSource4"
    EmptyDataText="There are no data records to display."
    onrowectedindexchanged="GridView1_SelectedIndexChanged">
    <Columns>
        <asp:TemplateField>
        <ItemTemplate>
        <asp:LinkButton ID="Editar" Text="Editar" runat="server" CommandName="Edit"></asp:LinkButton>
        </ItemTemplate>
        <EditItemTemplate>
        <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" AutoPostBack="True" AppendDataBoundItems="true" enableviewstate="false"
            Text="Actualizar"></asp:LinkButton>
        <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" AutoPostBack="True"
            Text="Cancelar"></asp:LinkButton>
        </EditItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="PROJID" HeaderText="PROJID"
            SortExpression="PROJID" />
        <asp:BoundField DataField="rut" HeaderText="rut"
            SortExpression="rut" />
        <asp:BoundField DataField="LINEPROPERTYID" HeaderText="LINEPROPERTYID"
            SortExpression="LINEPROPERTYID" />
        <asp:BoundField DataField="QTY" HeaderText="QTY" SortExpression="QTY" />
        <asp:BoundField DataField="TXT" HeaderText="TXT" SortExpression="TXT" />
        <asp:BoundField DataField="TRANSDATE" HeaderText="TRANSDATE"
            SortExpression="TRANSDATE" DataFormatString="{0:d}" />
        <asp:BoundField DataField="Comentario" HeaderText="Comentario"
            SortExpression="Comentario" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource4" runat="server"
    ConnectionString="<%$ ConnectionStrings:TestingConnectionString %>"
    ProviderName="<%$ ConnectionStrings:TestingConnectionString.ProviderName %>"
    SelectCommand="SELECT [PROJID], [rut], [LINEPROPERTYID], [QTY], [TXT], [TRANSDATE], [TRANSSTATUS], [DIMENSION], [DIMENSION3_], [Comentario]
                   FROM [Ax50_HorasRegistradas]
                   WHERE
                   (([rut] = CASE WHEN @rut=  '-1' THEN [rut] ELSE @rut END)
                   AND
                   ([PROJID] = CASE WHEN @PROJID = '-1' THEN [PROJID] ELSE @PROJID END)
                   AND
                   ([LINEPROPERTYID] = CASE WHEN @Producto = '-1' THEN [LINEPROPERTYID] ELSE @Producto END))"


     UpdateCommand="UPDATE [Ax50_HorasRegistradas] set Comentario = @Comentario WHERE PROJID = @PROJID AND TRANSDATE = @TRANSDATE">


<UpdateParameters>
<asp:Parameter Name="PROJID" />
<asp:Parameter Name="TRANSDATE" />
</UpdateParameters>


<SelectParameters>
<asp:ControlParameter ControlID="DropDownList2" Name="rut" PropertyName="SelectedValue"/>
<asp:ControlParameter ControlID="DropDownList1" Name="PROJID" PropertyName="SelectedValue"/>
<asp:ControlParameter ControlID="DropDownList3" Name="Producto" PropertyName="SelectedValue"/>
</SelectParameters>


</asp:SqlDataSource>
</form>


well it didnt bold the text box because i think is pasted codes, so the lines of the textbox are 107 and 110.

thank so much

Hi,


Check below links,


http://www.aspdotnetcodes.com/AutoComplete_From_Database.aspx

http://www.developerbarn.com/net-code-samples/75-using-ajax-auto-complete-extender-database.html



You can use ajax extensions and  web services:

.aspx page:

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </ajaxToolkit:ToolkitScriptManager>
  <div>
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
            ServiceMethod="GetProducts" ServicePath="WebService.asmx" TargetControlID="txtSearch"> </ajaxToolkit:AutoCompleteExtender>
          </div>


WebService.cs:

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

/// <summary>
/// Summary description for WebService
/// </summary>
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{
    public WebService()
    {
        //Uncomment the following line if using designed components
        //InitializeComponent();
    }
    [WebMethod]
    public string[] GetProducts(string prefixText)
    {
       
            string sql = "Select rut from table Where rut like @prefixText";
            SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["TestingConnectionString"].ToString());
            da.SelectCommand.Parameters.Add("@prefixText", SqlDbType.NVarChar, 50).Value = prefixText + "%";
            DataTable dt = new DataTable();
            da.Fill(dt);
            string[] items = new string[dt.Rows.Count];
            int i = 0;
            foreach (DataRow dr in dt.Rows)
            {
                items.SetValue(dr["rut"].ToString(), i);
                i++;
            }
            return items;

        }


       
    }




 

 

hi, thanks for answering but with ajax it doesnt work, y pasted the code like this. 

<%@ Import Namespace="System.Data" %>
<%@ Page Language="VB" Debug="True" %>
<%@ import Namespace="System" %>
<%@ import Namespace="System.Data.OLEDB" %>
<%@ import Namespace="System.Data.OleDb.OleDbException" %>


<script>


<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"> </ajaxToolkit:ToolkitScriptManager>
  <div>
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
            ServiceMethod="GetProducts" ServicePath="WebService.asmx" TargetControlID="txtSearch"> </ajaxToolkit:AutoCompleteExtender>
          </div>


</script>






<form id="form1" runat="server">


<asp:LinkButton ID="LinkButton5" runat="server" Text="Default"
    PostBackUrl="http://localhost:49724/Default.aspx"></asp:LinkButton>
<br />
<asp:LinkButton ID="LinkButton4" runat="server" Text="Editar/Actualizar/Eliminar Empleado"
    PostBackUrl="http://localhost:49724/EditEmpleado.aspx"></asp:LinkButton>


............


and it give me an error "Etiqueta de servidor 'ajaxToolkit:ToolkitScriptManager' desconocida."

it doesnt recognize the ajaxtoolkit

Did you download and configure the ajax control toolkit with your Visual studio?

if not, you can download from here:

 http://www.asp.net/ajaxlibrary/act.ashx

http://ajaxcontroltoolkit.codeplex.com/releases/view/43475

 

 

 

 

ok i did all the steps of ajax and nothing happens,now i have this.


<%@ Import Namespace="System.Data" %>
<%@ Page Language="VB" Debug="True" %>


<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ import Namespace="System" %>
<%@ import Namespace="System.Data.OLEDB" %>
<%@ import Namespace="System.Data.OleDb.OleDbException" %>
<%@ Import Namespace="AjaxControlToolkit" %>


 <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
  <div>
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
            ServiceMethod="GetProducts" ServicePath="WebService.asmx" TargetControlID="txtSearch"> </ajaxToolkit:AutoCompleteExtender>
  </div>




<form id="form1" runat="server">


<asp:LinkButton ID="LinkButton5" runat="server" Text="Default"
    PostBackUrl="http://localhost:49724/Default.aspx"></asp:LinkButton>
<br />
.
.
.
.
.
.


thanks very much for your help :D

Did you add the webservice.cs (with the GetProducts method) file in the app_code folder ?

if you did already, please mark out the line and start debugging and see if that is calling or not.....

i have the webservice in the same folder as the aspx web page, but what is that of getProducts method? it is something that i have to add as a line, its a file?


thank you for your time.

Please see my first reply.....you can see the GetProducts method there....

public string[] GetProducts(string prefixText)
    {......}


 

hi, and thanks for answering.

i have this for the moment in the aspx file.

<%@ Import Namespace="System.Data" %>
<%@ Page Language="VB" Debug="True" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<%@ import Namespace="System" %>
<%@ import Namespace="System.Data.OLEDB" %>
<%@ import Namespace="System.Data.OleDb.OleDbException" %>
<%@ Import Namespace="AjaxControlToolkit" %>


<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
  <div>
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
            ServiceMethod="GetProducts" ServicePath="WebService.asmx" TargetControlID="txtSearch"> </ajaxToolkit:AutoCompleteExtender>
  </div>


<form id="form1" runat="server">


<asp:LinkButton ID="LinkButton5" runat="server" Text="Default"
    PostBackUrl="http://localhost:49724/Default.aspx"></asp:LinkButton>
<br />


and this in the .cs file

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

/// <summary>  
/// Summary description for WebService  
/// </summary>  
[ScriptService]
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class WebService : System.Web.Services.WebService
{
    public WebService(prefixText)
    {
        //Uncomment the following line if using designed components  
        //InitializeComponent();  
    }
    [WebMethod]
    public string[] GetProducts(string prefixText)
    {

        string sql = "Select rut from table Where rut like @prefixText";
        SqlDataAdapter da = new SqlDataAdapter(sql, ConfigurationManager.ConnectionStrings["TestingConnectionString"].ToString());
        da.SelectCommand.Parameters.Add("@prefixText", SqlDbType.NVarChar, 50).Value = prefixText + "%";
        DataTable dt = new DataTable();
        da.Fill(dt);
        string[] items = new string[dt.Rows.Count];
        int i = 0;
        foreach (DataRow dr in dt.Rows)
        {
            items.SetValue(dr["rut"].ToString(), i);
            i++;
        }
        return items;

    }



}


and it gives me this error when i debug

Mensaje de error del analizador: Etiqueta de servidor 'ajaxToolkit:ToolkitScriptManager' desconocida.

Error de código fuente: 

Línea 7:  <%@ Import Namespace="AjaxControlToolkit" %>
Línea 8:  
Línea 9:  <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>   
Línea 10:   <div>    
Línea 11:     <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox> 

thanks for your answer


hi there, i still have this error and i did all of the ajax tools stuff

Línea 9:
Línea 10:
Línea 11: <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
Línea 12:   <div>
Línea 13:     <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>

this is my code. 


<%@ Import Namespace="AjaxControlToolkit" %>



<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  <div>    
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>    
    <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"     
            ServiceMethod="GetProducts" ServicePath="WebService.cs" TargetControlID="txtSearch"> </ajaxToolkit:AutoCompleteExtender>    
  </div> 
</ajaxToolkit:ToolkitScriptManager> 
<form id="form1" runat="server">



i change the code to this and i can see the page now, but the text doesnt show anything.

<%@ Import Namespace="AjaxControlToolkit" %>


<form id="form1" runat="server">


<ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
  <div>
    <asp:TextBox ID="txtSearch" runat="server"></asp:TextBox>
    <AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1"
            ServiceMethod="GetProducts" ServicePath="WebService.cs" TargetControlID="txtSearch"> </AutoCompleteExtender>
  </div>
</ToolkitScriptManager>



Hello,

please read my first post carefully and see there the servicepath="Webservice.asmx"....put the code inside the webservice.cs file! 

great thanks so much!

thoughts on "[RESOLVED] autocomplete TextBox with data from a SQL SERVER"

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>