Use jQuery Autocomplete with C#

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • mcupito
    Contributor
    • Aug 2013
    • 294

    #1

    Use jQuery Autocomplete with C#

    Hi all. I am NOT good at writing .NET code, however I have a text box I am using for a search box. I found a great tutorial on it for vb.net, but I can't find out how to get that to c# (I tried a converter).

    Code:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Exercise2.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <link href="Scripts/themes/smoothness/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <body>
           <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="True">
            </asp:ScriptManager>
        <form id="form1" runat="server">
        <div>
            
            <br />
            <br />
            &nbsp;<asp:LoginView ID="LoginView1" runat="server">
                <AnonymousTemplate>
                  <strong>  You are not logged in. Please click the login link.</strong>
                </AnonymousTemplate>
                <LoggedInTemplate>
                    <strong> Welcome, </strong><asp:LoginName ID="LoginName1" runat="server" /> </strong>
                </LoggedInTemplate>
            </asp:LoginView>
            <asp:LoginStatus ID="LoginStatus1" runat="server" />
            <br />
            <br />
            <br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <asp:TextBox ID="SearchBox" runat="server" ClientIDMode=Static Width="682px"></asp:TextBox>
            <asp:Button ID="SearchBtn" runat="server" Text="Search Course" />
            <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
            <script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
            <script src="Scripts/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>
            <br />
            <br />
        </div>
        <p>
            &nbsp;</p>
        <p>
            <br />
        </p>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" DataSourceID="SqlDataSource1" 
            EmptyDataText="There are no data records to display.">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" 
                    SortExpression="ID" />
                <asp:CheckBoxField DataField="txtBook" HeaderText="txtBook" 
                    SortExpression="txtBook" />
                <asp:BoundField DataField="numQuiz" HeaderText="numQuiz" 
                    SortExpression="numQuiz" />
                <asp:BoundField DataField="courseDesc" HeaderText="courseDesc" 
                    SortExpression="courseDesc" />
                <asp:CheckBoxField DataField="courseReq" HeaderText="courseReq" 
                    SortExpression="courseReq" />
                <asp:BoundField DataField="courseRating" HeaderText="courseRating" 
                    SortExpression="courseRating" />
                <asp:BoundField DataField="Date" HeaderText="Date" SortExpression="Date" />
                <asp:BoundField DataField="course_Num" HeaderText="course_Num" 
                    SortExpression="course_Num" />
                <asp:CheckBoxField DataField="Attendence" HeaderText="Attendence" 
                    SortExpression="Attendence" />
                <asp:BoundField DataField="Grade" HeaderText="Grade" SortExpression="Grade" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString1 %>" 
            DeleteCommand="DELETE FROM [Review_tbl] WHERE [ID] = @ID" 
            InsertCommand="INSERT INTO [Review_tbl] ([txtBook], [numQuiz], [courseDesc], [courseReq], [courseRating], [Date], [course_Num], [Attendence], [Grade]) VALUES (@txtBook, @numQuiz, @courseDesc, @courseReq, @courseRating, @Date, @course_Num, @Attendence, @Grade)" 
            ProviderName="<%$ ConnectionStrings:ASPNETDBConnectionString1.ProviderName %>" 
            SelectCommand="SELECT [ID], [txtBook], [numQuiz], [courseDesc], [courseReq], [courseRating], [Date], [course_Num], [Attendence], [Grade] FROM [Review_tbl]" 
            UpdateCommand="UPDATE [Review_tbl] SET [txtBook] = @txtBook, [numQuiz] = @numQuiz, [courseDesc] = @courseDesc, [courseReq] = @courseReq, [courseRating] = @courseRating, [Date] = @Date, [course_Num] = @course_Num, [Attendence] = @Attendence, [Grade] = @Grade WHERE [ID] = @ID">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="txtBook" Type="Boolean" />
                <asp:Parameter Name="numQuiz" Type="Int32" />
                <asp:Parameter Name="courseDesc" Type="String" />
                <asp:Parameter Name="courseReq" Type="Boolean" />
                <asp:Parameter Name="courseRating" Type="Double" />
                <asp:Parameter DbType="Date" Name="Date" />
                <asp:Parameter Name="course_Num" Type="String" />
                <asp:Parameter Name="Attendence" Type="Boolean" />
                <asp:Parameter Name="Grade" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="txtBook" Type="Boolean" />
                <asp:Parameter Name="numQuiz" Type="Int32" />
                <asp:Parameter Name="courseDesc" Type="String" />
                <asp:Parameter Name="courseReq" Type="Boolean" />
                <asp:Parameter Name="courseRating" Type="Double" />
                <asp:Parameter DbType="Date" Name="Date" />
                <asp:Parameter Name="course_Num" Type="String" />
                <asp:Parameter Name="Attendence" Type="Boolean" />
                <asp:Parameter Name="Grade" Type="String" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
        </form>
    </body>
    </html>
    Can someone tell me what I'm doing wrong?
    I am clueless. If you need any other information from me, please let me know!
  • Frinavale
    Recognized Expert Expert
    • Oct 2006
    • 9749

    #2
    I haven't used this myself but probably will be using it in the near future.

    Did you see the documentation for the jQuery Autocomplete Widget?



    I just glanced over it and you can apply the widget to elements with a specified css class. You haven't done so on your search text box.

    Also there are two ways you can supply the source to the auto complete widget: an array (JavaScript array) of strings or a function.

    Which do you plan on using?

    -Frinny

    Comment

    • mcupito
      Contributor
      • Aug 2013
      • 294

      #3
      I plan on using a field in the database I am connecting to.

      Does anyone have any suggestions?

      Comment

      Working...