Part II: How Did Google Become a Verb?

Building the SearchControl UserControl

The SearchControl contains an HTML table for managing layout, a Label, a TextBox for inputting search criteria, a Button to request the result set, and a DataList. The DataList's ItemTemplate contains a SearchItem control. For each row in the DataTable—returned by GetResults—the DataList will create a SearchItem control, and we will bind a row of data to each SearchItem control.

Figure 3 shows the designer view of the SearchControl. Listing 4 shows the ASP for the control, and Listing 5 shows the code-behind.

(Full Size Image)

Figure 3: The design-time view of the SearchControl.ascx UserControl.

Listing 4: The ASP view of the SearchControl.

<%@ Register TagPrefix="uc1" TagName="SearchItem"
             Src="SearchItem.ascx" %>
<%@ Control Language="vb" AutoEventWireup="false"
    Codebehind="SearchControl.ascx.vb"
    Inherits="softconcepts_vb.SearchControl"
    TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<TABLE id="Table1" height="100%" cellSpacing="0" cellPadding="0"
       width="75%" border="0">
  <TR>
    <TD style="HEIGHT: 38px" colSpan="1" rowSpan="1">
      <asp:Label id="Label1" runat="server">Search for:
      </asp:Label></TD>
  </TR>
  <TR>
    <TD style="HEIGHT: 44px" colSpan="1">
      <asp:TextBox id="TextBoxSearch" runat="server" Width="291px">
      </asp:TextBox>
      <asp:Button id="Button1" runat="server" Text="Search">
      </asp:Button><BR>
      <HR width="100%" SIZE="2">
    </TD>
  </TR>
  <TR>
    <TD vAlign="top" align="left" id="Results" runat="server"
        width="100%">
      <asp:DataList id="DataListResults" runat="server"
                    Width="100%">
        <ItemTemplate>
          <uc1:SearchItem id=SearchItem1 runat="server"
                          Data="<%# Container.DataItem %>">
          </uc1:SearchItem>
        </ItemTemplate>
      </asp:DataList></TD>
  </TR>
</TABLE>

The ASP is pretty straight-forward. The only real catch is that we use block script to bind a row of data to the SearchItem.Data property in the code-behind. (The block script is shown in bold font.) Here is the code-behind for the SearchControl itself.

Listing 5: The code-behind for the SearchControl.ascx UserControl.

Imports System
Imports System.Data
Imports System.Diagnostics
Imports System.Drawing
Imports System.Web
Imports System.Web.UI.WebControls
Imports System.Web.UI.HtmlControls
Imports softconcepts_vb


Public Class SearchControl
    Inherits System.Web.UI.UserControl

[ Web Form Designer Generated Code ]

  Private Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
    'Put user code to initialize the page here
  End Sub

  Private Sub Button1_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles Button1.Click

    FetchResults(SearchText)

  End Sub

  Private ReadOnly Property SearchText() As String
  Get
    Return TextBoxSearch.Text
  End Get
  End Property

  Private Sub FetchResults(ByVal text As String)
    DataListResults.DataSource = Search.GetResults(text)
    DataListResults.DataBind()
  End Sub
    
End Class

As you can see, the code is quite simple. The user enters some text, clicks the button (shown in Figure 3), and the results are fetched and bound to the DataList.

Completing the Search Control Web Page

The last step is to drop the SearchControl.ascx control on a Web page and test it. There is no code required to use the SearchControl at this point. Find the SearchControl in the solution explorer, drag and drop it onto a Web page, and you are ready to go. For my Web site, I have several other controls, images, and a stylesheet that yields a total result (see Figure 4).

(Full Size Image)

Figure 4: The completed search page incorporated into my company's Web site.

Summary

Building a well-constructed Web site is a function of good design, and layering complexity gradually. Building a visually attractive Web site is more subjective and perhaps harder to do. However, making the most of tools at your disposal, like Microsoft's Indexing service, will yield super-charged results.

In this article, I glossed over security and some of the micro steps necessary to build ASP.NET applications. For that information, I will have to ask your indulgence for another day and another article, but in this article you learned how to pass a query to the indexing service, implement some user controls, and a Web page that will help those who browse to your page find what they are looking for.

About the Author

Paul Kimmel is the VB Today columnist for codeguru.com and developer.com and has written several books on object-oriented programming, including the recently released Visual Basic .NET Power Coding from Addison-Wesley and the upcoming Excel VBA 2003: Programmer's Reference from Wiley. He is the chief architect for Software Conceptions and is available to help design and build your next application.

As an aside, many of you may not know that Michigan is in the top ten in IT spending in the US and perhaps the world. The dollar amount is astronomical, way into the billions of dollars. Resultantly, we get great shows like Microsoft's DevDays—during the first week of March 2004 this year—in Detroit. The cost is less than $100, making this show accessible to everyone. (Register early and the cost is $75.) You will have the opportunity to make a lot of great contacts, learn about killer Microsoft technologies, get a paid day or two out of the office, and as a presenter, I will get the opportunity for a lot of you to tell me what I still don't know.

Finally, the Lansing, Michigan area has a great opportunity to form a .NET Users Group. A well-run group offers great learning and networking opportunities and occasionally some free pizza and door prizes. Contact me at pkimmel@softconcepts.com if you are interested in participating.

# # #