Web User Controls Using C#.

NET
Download sample project from https://docs.google.com/leaf?id=0B8hoTwnI_pgYZTAxZWYzNzAtNWM1N y00NTM4LTk0OTAtOGYzNjIxMDE0MDBi&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 using using using using using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; System.Xml.Linq; 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 //if the previous item is selected then move it down by one position

9
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> ///<param name="sourceItem"></param> public void AddSourceItem(ListItem sourceItem) {

10
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:
Now add some of the properties of the control as shown below.

11
<%@ 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> <id>7</id> <name>test5</name> </Test>

12
</Tests>

Step 6:
Write the following code in the code behind of your webform.
using using using using using using using using using using using using System; System.Collections; System.Configuration; System.Data; System.Linq; System.Web; System.Web.Security; System.Web.UI; System.Web.UI.HtmlControls; System.Web.UI.WebControls; System.Web.UI.WebControls.WebParts; 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

Move selected item down

13

Remove seleted items

Sign up to vote on this title
UsefulNot useful