Follow these directions to create an AJAX search engine in Visual Studio.

1. From Toolbox, expand Standard, and drag a TextArea onto the page.
2. From Toolbox, expand AJAX Extensions, and drag Script Manager below the TextArea
3. From Toolbox, expand AJAX Extensions, and drag Update Panel below the Script Manager
4. In Source, type ContentTemplate inside of the UpdatePanel (see markup example below).
5. From Toolbox, expand AJAX Extension, and drag UpdateProgress below the Update Panel.
6. In UpdateProgress, add AssociatedUpdatePanelID="UpdatePanel1"
7. In Source, type ProgressTemplate inside of the UpdateProgress (see markup example below).
8. In Source, type img src and Loading inside of the ProgressTemplate (see markup example below).
9. In the Toolbox, expand Data, and drag a DataList inside the ContentTemplate tags.
10. In Design View, expand the DataList tasks panel. In the Choose Data Source drop-down select New Data Source.
11. Highlight SQL Database and click OK.
12. Choose your ConnectionString from the drop-down. This assumes you have already created a SQL Server connection string in Visual Studio.  Click Next.
13. Bullet id and column1 (replace column1 with the actual name of your column)
14. Click the WHERE... button, and make the following selections.
    1. Column: Select column1
    2. Operator: LIKE
    3. Source: Control
    4. ControlID: TextBox1
    5. Add
    6. Click OK.
15. Click the WHERE... button, and make the following selections.
    1. Column: Select column2
    2. Operator: LIKE
    3. Source: Control
    4. ControlID: TextBox1
    5. Add
    6. Click OK.
16. Click Next.
17. Click Finish.

We should now have the following markup. This is the AJAX template we can use for our site. The Web browser will only load any Data object placed inside this AJAX template.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
     <ContentTemplate>
       <asp:DataList ID="DataList1" runat="server" DataKeyField="id" DataSoruceID="SqlDataSource1">
         <ItemTemplate>
           <asp:Label ID="Column1Label" runat="server" Text='<%# Eval("Column1") %>' />
         </ItemTemplate>
       </asp:DataList>
     </ContentTemplate>
   </asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
  <ProgressTemplate>
    <img src="images/ajax-loader.gif" />Loading...
  </ProgressTemplate>
</asp:UpdateProgress>

By default, Visual Studio makes this into an AND statement. Replace AND with OR.

SelectCommand="select [id], [column1], [column2] from [table_name] where (([column1] like '%' + @column1 + '%') OR ([column2] like '%' + @column2 + '%'))

Press Ctrl F5 to view the page in your default Web browser. Type some text into the input form, press the button, and the text will appear on page.

We need to make the results that display into a hyperlink that redirect to another page. Wrap an a tag around the label:

<a href="newpage.aspx?id=<%# Eval("id") %>" style="text-decoration:none">
  <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
</div>

We added the Update Progress object. This displays Loading if the page is taking a while to load. Follow these directions to force the page to take some time to load for testing purposes.

1. Double-click the button object.
2. In Code Behind, add the following code to the Button1_Click event.

    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        System.Threading.Thread.Sleep(3000)
    End Sub

Follow these directions to style the output.

1. Expand the DataList options and select Auto Format.
2. Select Slate > Apply > OK
3. Expand the DataList options and select Property Builder. Make the following adjustments:
   • Format > DataList > Font name: Arial
   • Format > Items > Normal Items > Back color: #F1FFFF
   • Format > Items > Alternating Items > Back color: white
   • Borders > Border color: #dddddd
   • Borders > Border width: 2px

Follow these steps to create a URL that ends in with ID number, such as www.example.com/content.aspx?id=1. We also need to program the content.aspx page to display data on the page where the ID number is 1.

1. In the Toolbox, in the Data objects, drag a DataList into Design View.
2. Open the DataList tasks panel. In the Choose Data Source drop-down select New Data Source.
3. Highlight SQL Database and click OK.
4. Choose your ConnectionString from the drop-down. This assumes you have already created a SQL Server connection string in Visual Studio.  Click Next.
5. Bullet the columns you want to display.
6. Click the WHERE... button, and make the following selections.
   1. Column: Select id
   2. Operator: =
   3. Source: QueryString
   4. QueryString filed: id
   5. Add
   6. Click OK.
7. Click Next.
8. Click Test Query. In Value, type some text and click OK to test the search engine.
9. Click Finish.