Web User Controls

Using C#.NET
Download sample project from
https://docs.google.com/leaf?
id=0B8hoTwnI_pgYZTAxZWYzNzAtNWM1Ny00NTM4LTk0OTAtOGYzNjIxMDE0MD
Bi&hl=en&authkey=CPP025MC
 2

Step 1:
How to add the user control to the solution?
 3

Step 2:
Add the following List Picker control in the ListPicker.ascx.
Here you can add all the controls you want to add so as to
make a new user control

<%@ Control Language="C#" AutoEventWireup="true"

CodeFile="ListPicker.ascx.cs" Inherits="ListPicker" %>
<table>
<tr>
<td>
<asp:ListBox ID="lbMain" runat="server"
SelectionMode="Multiple" Width="120px"></asp:ListBox>
</td>
<td>
<table>
<tr>
<td align="center">
<asp:Button ID="btnAdd" runat="server" Text="Add"
OnClick="btnAdd_Click" Width="55px" />
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btnRemove" runat="server"
Text="Remove" OnClick="btnRemove_Click"
 4

Width="55px" />
</td>
</tr>
</table>
</td>
<td>
<asp:ListBox ID="lbOrder" runat="server"
SelectionMode="Multiple" Width="120px">
</asp:ListBox>
</td>
<td>
<table>
<tr>
<td>
<asp:Button ID="btnUp" runat="server" Text="↑"
OnClick="btnUp_Click" />
</td>
</tr>
<tr>
<td>
<asp:Button ID="btnDown" runat="server" Text="↓"
OnClick="btnDown_Click" />
</td>
</tr>
</table>
</td>
</tr>
</table>

Step3:
Add the following code in the code behind ListPicker.ascx.cs
You can add the properties for the cotrol here.
List picker has the properties like SelectedItems,
DataTextField, DataValueField, AllowDuplicates etc..

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Collections.Generic;

public partial class ListPicker : System.Web.UI.UserControl

{
#region Variables
 5

/// <summary>
/// SelectedItems
/// </summary>
public ListItemCollection SelectedItems
{
get { return lbOrder.Items; }
}

/// <summary>
/// AllowDuplicates
/// </summary>
public Boolean AllowDuplicates
{
get
{
return (Boolean)ViewState["allowDuplicates"];
}
set
{
ViewState["allowDuplicates"] = value;
}
}

/// <summary>
/// DataTextField
/// </summary>
public string DataTextField
{
get
{
object o = ViewState["DataTextField"];
return ((o == null) ? string.Empty : (string)o);
}
set
{
ViewState["DataTextField"] = value;
lbMain.DataTextField = value;
}
}

/// <summary>
/// DataValueField
/// </summary>
public string DataValueField
{
get
{
object o = ViewState["DataValueField"];
return ((o == null) ? string.Empty : (string)o);
}
set
{
ViewState["DataValueField"] = value;
lbMain.DataValueField = value;
}
}
 6

/// <summary>
/// DataSource
/// </summary>
public object DataSource
{
set { lbMain.DataSource = value; }
}

/// <summary>
/// Width
/// </summary>
public int Width
{
set { lbMain.Width = value; }
}

#endregion Variables

#region Events

#region Page_Load
/// <summary>
/// Page_Load
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void Page_Load(object sender, EventArgs e)
{
lbMain.PreRender += lbMain_PreRender;
}
#endregion Page_Load

#region btnAdd_Click
/// <summary>
/// btnAdd_Click
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnAdd_Click(object sender, EventArgs e)
{
try
{
//if the main or source listbox contains any items
if (lbMain.Items.Count > 0)
{
foreach (ListItem listItem in lbMain.Items)
{
//if the item selected
if (listItem.Selected)
{
if (!this.AllowDuplicates)
{
if (!lbOrder.Items.Contains(listItem))
{
//add the selected item into the order list
(users preference of ordering)
 7

lbOrder.Items.Add(listItem);
}
}
else
{
lbOrder.Items.Add(listItem);
}
}
}
}
}
catch (Exception ex)
{

}
}
#endregion btnAdd_Click

#region btnRemove_Click
/// <summary>
/// btnRemove_Click
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnRemove_Click(object sender, EventArgs e)
{
try
{
//list of objects to remove from the user's preference list
List<object> toRemove = new List<object>();
if (lbOrder.Items.Count > 0)
{
//read each selected item and add add it to the remove list
foreach (ListItem listItem in lbOrder.Items)
{
if (listItem.Selected)
{
toRemove.Add(listItem);
}
}
//remove all the items selected
foreach (ListItem listItem in toRemove)
{
lbOrder.Items.Remove(listItem);
}
}
}
catch (Exception ex)
{

}
}
#endregion btnRemove_Click

#region btnUp_Click
/// <summary>
 8

/// btnUp_Click, used for moving the selected items upwards by one
postion from the listbox
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnUp_Click(object sender, EventArgs e)
{
try
{
for (int i = 0; i < lbOrder.Items.Count; i++)
{
if (lbOrder.Items[i].Selected)
{
//neglect the first item in the list as it cant be
moved further up
//if the next item is selected then move it up by one
position
if (i > 0 && !lbOrder.Items[i - 1].Selected)
{
ListItem bottom = lbOrder.Items[i];
lbOrder.Items.Remove(bottom);
lbOrder.Items.Insert(i - 1, bottom);
//make this item selected, so that again user can
move it's position without
//selecting it
lbOrder.Items[i - 1].Selected = true;
}
}
}
}
catch (Exception ex)
{

}
}
#endregion btnUp_Click

#region btnDown_Click
/// <summary>
/// btnDown_Click, used for moving the selected items downwards by one
postion from the listbox
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnDown_Click(object sender, EventArgs e)
{
try
{
int startindex = lbOrder.Items.Count - 1;
for (int i = startindex; i > -1; i--)
{
if (lbOrder.Items[i].Selected)
{
//neglect the last item in the list as it cant be moved
further down
 9

//if the previous item is selected then move it down by

one position
if (i < startindex && !lbOrder.Items[i + 1].Selected)
{
ListItem bottom = lbOrder.Items[i];
lbOrder.Items.Remove(bottom);
lbOrder.Items.Insert(i + 1, bottom);
//make this item selected, so that again user can
move it's position without
//selecting it
lbOrder.Items[i + 1].Selected = true;
}
}
}
}
catch (Exception ex)
{

}
}
#endregion btnDown_Click

#region lbMain_PreRender
/// <summary>
/// lbMain_PreRender
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
private void lbMain_PreRender(object sender, System.EventArgs e)
{
foreach (ListItem item in lbMain.Items)
{
item.Attributes.Add("title", item.Text);
}
}
#endregion lbMain_PreRender

#endregion Events

#region Helper Methods

#region AddSourceItem
/// <summary>
/// AddSourceItem
/// </summary>
/// <param name="sourceItem"></param>
public void AddSourceItem(String sourceItem)
{
lbMain.Items.Add(sourceItem);
}
#endregion AddSourceItem

#region AddSourceItem
/// <summary>
/// AddSourceItem
/// </summary>
 10

///<param name="sourceItem"></param>
public void AddSourceItem(ListItem sourceItem)
{
lbMain.Items.Add(sourceItem);
}
#endregion AddSourceItem

#region ClearAll
/// <summary>
/// ClearAll
/// </summary>
public void ClearAll()
{
lbMain.Items.Clear();
lbOrder.Items.Clear();
}
#endregion ClearAll

#region DataBind
/// <summary>
/// DataBind
/// </summary>
public void DataBind()
{
lbMain.DataBind();
}
#endregion DataBind

#endregion Helper Methods

}

Step 4:
How to use the created user control in the web forms?
Create a new web form and
Go to design view and drag and drop the user control from
solution explorer to design page

Step 5:
 11

Now add some of the properties of the control as shown below.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs"

Inherits="Default2" %>

<%@ Register Src="ListPicker.ascx" TagName="ListPicker" TagPrefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<uc1:ListPicker ID="ListPicker1" runat="server"
AllowDuplicates="false" DataTextField="name"
DataValueField="id" />
</div>
</form>
</body>
</html>

Step 6:
Use the following data to show in the listbox

<?xml version="1.0" encoding="utf-8" ?>

<Tests>
<Test>
<id>1</id>
<name>Sunil</name>
</Test>
<Test>
<id>2</id>
<name>test</name>
</Test>
<Test>
<id>3</id>
<name>test1</name>
</Test>
<Test>
<id>4</id>
<name>test2</name>
</Test>
<Test>
<id>5</id>
<name>test3</name>
</Test>
<Test>
<id>6</id>
<name>test4</name>
</Test>
<Test>
 12

<id>7</id>
<name>test5</name>
</Test>
</Tests>

Step 6:
Write the following code in the code behind of your webform.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Default2 : System.Web.UI.Page

{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataSet ds = new DataSet();
ds.ReadXml(Request.PhysicalApplicationPath + "XMLFile.xml");
ListPicker1.DataSource = ds;
ListPicker1.DataBind();
}

}
}

Results:

Add Items

Move selected item up

 13

Move selected item down

Remove seleted items