Using Reuseable Elements with User Controls in VB

Navigator : Home > Tutorials > Controls Tutorials > ...

Using Reuseable Elements with User Controls in VB

This tutorial will allow you to move data from one list box to another, as well as remove them again - either one by one, or altogether. Also, you can choose to allow duplicates or not, as well as output the chosen selection. VB version. We need a Web User Control, which will have two list boxes, and four buttons: Add All, Add One, Delete One (from Selection List), and also Delete One (from Source List).

<%@ Control Language="VB" AutoEventWireup="true" CodeFile="ListPicker.ascx.vb" Inherits="ListPicker" %>
<table>

<tr>

Available<br /> <asp:ListBox ID="SourceList" runat="server" Height="200px" Width="200px"></asp:ListBox></td>

<asp:Button ID="AddAll" runat="server" OnClick="AddAll_Click" Text=">>" />
<asp:Button ID="AddOne" runat="server" OnClick="AddOne_Click" Text=" > " />
<asp:Button ID="Remove" runat="server" OnClick="Remove_Click" Text=" X " /><br />
<br />
<br />
<asp:Button ID="RemoveSource" runat="server" OnClick="RemoveSource_Click" Text="< X" /></td>

Selected<br />
<asp:ListBox ID="TargetList" runat="server" Height="200px" Width="200px"></asp:ListBox></td>

</tr>

</table>

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Now we add code to the controls:

Inherits System.Web.UI.UserControl
Protected Sub AddAll_Click(ByVal sender As Object, ByVal e As EventArgs)

TargetList.SelectedIndex = -1
For Each li As ListItem In SourceList.Items

AddItem(li)

Next li

End Sub
Protected Sub AddOne_Click(ByVal sender As Object, ByVal e As EventArgs)

If SourceList.SelectedIndex >= 0 Then

AddItem(SourceList.SelectedItem)

End If

End Sub
Protected Sub Remove_Click(ByVal sender As Object, ByVal e As EventArgs)

If TargetList.SelectedIndex >= 0 Then
TargetList.Items.RemoveAt(TargetList.SelectedIndex)
TargetList.SelectedIndex = -1
End If

End Sub
Protected Sub AddItem(ByVal li As ListItem)

TargetList.SelectedIndex = -1
If Me.AllowDuplicates = True Then

TargetList.Items.Add(li)

Else

If TargetList.Items.FindByText(li.Text) Is Nothing Then

TargetList.Items.Add(li)

End If

End Sub
Public ReadOnly Property SelectedItems() As ListItemCollection

Get

Return TargetList.Items

End Get

End Property
Public Property AllowDuplicates() As Boolean

Get

Return CType(ViewState("allowDuplicates"), Boolean)

End Get
Set(ByVal value As Boolean)

ViewState("allowDuplicates") = value

End Set

End Property
Public Sub AddSourceItem(ByVal sourceItem As String)

SourceList.Items.Add(sourceItem)

End Sub
Public Sub ClearAll()

SourceList.Items.Clear() TargetList.Items.Clear()

End Sub
Protected Sub RemoveSource_Click(ByVal sender As Object, ByVal e As EventArgs)

If SourceList.SelectedIndex >= 0 Then

SourceList.Items.RemoveAt(SourceList.SelectedIndex)
SourceList.SelectedIndex = -1

End If

End Sub

Add the ListPicker Control onto an ASPX page and add a text box and button to allow user to add to the source list, a button to allow population of source list with list of files in the directory, a button to clear both list boxes, an Allow Duplicates check box, and a button & label to output the current selection:

<uc1:ListPicker id="ListPicker1" Runat="server" AllowDuplicates="true" />
<asp:TextBox ID="NewItem" runat="server">
<asp:Button ID="AddItem" runat="server" OnClick="AddItem_Click" Text="Add Item" /><br />
<asp:Button ID="LoadFiles" runat="server" OnClick="LoadFiles_Click" Text="File List" /> <asp:Button

ID="ClearSelection" runat="server" OnClick="ClearSelection_Click" Text="Clear All" /><br />

<asp:CheckBox ID="AllowDuplicates" runat="server" AutoPostBack="True" Checked="True"

OnCheckedChanged="AllowDuplicates_CheckedChanged" Text="Allow Duplicates" /><br />

<asp:Button ID="ShowSelection" runat="server" OnClick="ShowSelection_Click" Text="Show Selection" />
<asp:Label ID="Selection" runat="server"></asp:Label>

</div>
</form>

ASPX code for these buttons should look something like this:

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

End Sub
Protected Sub AllowDuplicates_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)

ListPicker1.AllowDuplicates = AllowDuplicates.Checked

End Sub
Protected Sub AddItem_Click(ByVal sender As Object, ByVal e As EventArgs)

ListPicker1.AddSourceItem(Server.HtmlEncode(NewItem.Text))

End Sub
Protected Sub LoadFiles_Click(ByVal sender As Object, ByVal e As EventArgs)

Dim path As String = Server.MapPath(Request.ApplicationPath)
Dim files() As String = System.IO.Directory.GetFiles(path)
For Each filename As String In files

ListPicker1.AddSourceItem(filename)

Next filename

End Sub
Protected Sub ShowSelection_Click(ByVal sender As Object, ByVal e As EventArgs)

Dim selectedItemsString As String = ""
For Each lItem As ListItem In ListPicker1.SelectedItems

selectedItemsString &= "<br>" & lItem.Text

Next lItem
Selection.Text = selectedItemsString

End Sub
Protected Sub ClearSelection_Click(ByVal sender As Object, ByVal e As EventArgs)

ListPicker1.ClearAll()
Selection.Text = ""

End Sub

Looking for the C#.NET 2005 Version? Click Here!

Looking for more ASP.NET Tutorials? Click Here!

Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!

100% SPAM FREE! We will never sell or rent your email address!