Part II: How Did Google Become a Verb?

Creating a SearchItem and SearchControl UserControl

UserControls are a great way to piece together solutions. For our example, we'll want to list all of the items returned by the selection criteria, and we may want to support re-use by re-using a search control in more than one application. To this end, I created a SearchItem and a SearchControl UserControl. The SearchItem is a Web UserControl that contains one row from our results DataTable, and the SearchControl provides a means of inputting search criteria and viewing all of the results.

Building the SearchItem UserControl

The SearchItem control is a UserControl that contains an HTML table for managing layout, a bullet, two labels, and a hyperlink. The basic idea is that for each row in the DataTable (returned by Search.GetResults) we show the rank, the characterization—a summary of the results—and a link to that information on the Web site.

The visual implementation of SearchItem is shown in Figure 2. The HTML behind the UserControl is shown in Listing 2, and the code-behind in VB.NET is provided in Listing 3.

(Full Size Image)

Figure 2: The SearchItem UserControl is an HTML table with a few simple controls organized as shown in the designer in the figure.

Listing 2: The ASP supporting the UserControl shown in Figure 1.

<%@ Control Language="vb" AutoEventWireup="false"
    Codebehind="SearchItem.ascx.vb"
    Inherits="softconcepts_vb.SearchItem"
    TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<TABLE id="Table1" cellSpacing="0" cellPadding="0" width="100%"
       border="0" align="left"
  runat="server" class="SearchContent" style="TABLE-LAYOUT: fixed;
                 OVERFLOW: hidden; CLIP: rect(auto 75% auto auto)">
  <TR>
    <TD width="10" vAlign="top" align="center"><li></li>
    </TD>
    <TD>
      <asp:Label id="LabelRank" runat="server"></asp:Label>
      <asp:HyperLink id="HyperLinkPath" runat="server">
      </asp:HyperLink>
    </TD>
  </TR>
  <tr>
    <TD></TD>
    <td><asp:Label id="LabelCharacterization" runat="server"
                   Width="75%"></asp:Label></td>
  </tr>
</TABLE>

Listing 3: The code-behind for the SearchItem UserControl.

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

Public Class SearchItem
    Inherits System.Web.UI.UserControl

  Protected FData As DataRowView = Nothing

[ Web Form Designer Generated Code ]

    Private Sub Page_Load(ByVal sender As System.Object, _
            ByVal e As System.EventArgs) Handles MyBase.Load
      BindData()
    End Sub

    Private Sub Binddata()

      If (data Is Nothing) Then Return
      LabelRank.Text = Rank
      LabelCharacterization.Text = Characterization
      HyperLinkPath.NavigateUrl = Path
      HyperLinkPath.Text = Path

    End Sub
      
    Private ReadOnly Property Path() As String
    Get
      If (Not (data Is Nothing) And Not (data("VPATH") _
                                         Is Nothing)) Then
        Return data("VPATH").ToString()
      Else
        Return String.Empty
      End If
    End Get
    End Property

    Private ReadOnly Property Characterization() As String
    Get
      If (Not (Data Is Nothing) And Not (Data("CHARACTERIZATION") _
                                         Is Nothing)) Then
        Return Data("CHARACTERIZATION").ToString()
      Else
        Return String.Empty
      End If
    End Get
    End Property

    Private ReadOnly Property Rank() As String
    Get
      Return GetFormattedRank()
    End Get
    End Property

    Private Function GetFormattedRank() As String
      Try
        Dim rank As Integer = Convert.ToInt32(Data("RANK"))
        Return String.Format("({0}%)", rank / 10)
      Catch
        Return "0%"
      End Try
    End Function

    Public Property Data() As DataRowView
    Get
      Return FData
    End Get
    Set(ByVal Value As DataRowView)
      FData = Value
      Binddata()
    End Set
    End Property

End Class

The code-behind for the SearchItem UserControl exposes a DataRowView property, Data, and includes some friendly properties for easily retrieving data from the DataTable. When we build the SearchControl, we will need to bind the DataList to our DataTable and for each SearchItem control created, we will need to initialize it with a DataRowView object.