Go to page:
Prev 1 2 3 4 Next
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
(continued)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.
Go to page:
Prev 1 2 3 4 Next
All
IE 7
Firefox 2.0
