The Web Application

Create a new Visual C# ASP.NET Web Site named DataListUserCtrl.

The Business Object

1.      Add a business object that will store the data used by the list control.  Right click on the project in Solution Explorer, select Add and then select class with the name, Contacts.cs.  Enter the following business object class definition.

Listing 1 - The Business Object

[Serializable]
public class Contact
{
  private string name = string.Empty;
  private string phone = string.Empty;
  private string callback = "Now";
  public string Name
  {
    get
    {
      return name;
    }
    set
    {
      name = value;
    }
  }
  public string Phone
  {
    get
    {
      return phone;
    }
    set
    {
      phone = value;
    }
  }
  public string Callback
  {
    get
    {
      return callback;
    }
    set
    {
      callback = value;
    }
  }
}

Note: Marking a class as [Serializable] allows it to be serialized to ViewState.

The Web User Control

1.      Add a Web User Control that will encapsulate code which edits and displays the business object.  Right click on the project and select Add.  Then Add the Web User Control with the name ContactUC.ascx. 

2.      Place a button (id=btnDelete), two TextBox controls (id=tbName, and id=tbPhone) and a DropDown (id=ddlCallback) on the ContactUC Form.  Change the ddlCallback property AutoPostBack="True" and the items collection to Now, Today, Tomorrow and Next Week.  Change the btnDelete CommandName property to Delete.  Finally, arrange the form to look like Image 1. 

3.      While editing the form in design mode, double click on the delete button and the ddlCallback dropdown to create event handlers.  Enter the following code for the event handlers:

Listing 2 - Event Handlers

private void btnDelete_Click(object sender,System.EventArgs e)
{
  RaiseBubbleEvent(sender, e);
}
 
private voidddlCallback_SelectedIndexChanged(object sender, System.EventArgs e)
{
  Controls.Add(new LiteralControl("Youselected " + ddlCallback.SelectedValue));
}

The btnDelete_Click event handler is optional.  However, if it is included then its event must be bubbled to the parent page.  The ddlCallback_SelectedIndexChanged demonstrates how the Web User control handles autopostback events.

4.      Add a UserControlData property that will allow the DataList to pass a business object into the User Control whenever its Bind() method is called.  This will be covered later when we discuss how to add the DataList to the ASPX page.

Listing 3 - UserControlData Property

Private Contact contact;
public Object UserControlData
{
  set
  {
    contact = (Contact)value;
  }
  get
  {
    return contact;
  }
}

5.      Override the User Control's Bind method that sets the form's variable from the business object by doing the following.

Listing 4 - Overriding DataBind

public override void DataBind()
{
  base.DataBind();
  tbName.Text = contact.Name;
  tbPhone.Text = contact.Phone;
 ddlCallback.Items.FindByValue(contact.Callback).Selected = true;
}

Note: The base.DataBind forces the UserControlData property to be initialized.

6.      Add a method that allows the UserControl to save state back to the business object, as seen in listing 5.

Listing 5 - Saving State

public void SaveState(Contact contact)
{
  contact.Name = tbName.Text;
  contact.Phone = tbPhone.Text;
  contact.Callback = ddlCallback.SelectedValue;
}

The WebForm and DataList Control

1.      Right-click on the project in Solution Explorer, select Add New Item, and then select the Web Form named ContactsDataListPg.aspx.

2.      Place a DataList (id = dlContacts) and a button (id = btnAdd) on the WebForm.  Right click on the DataList and select Edit Template and then select Item Templates.  Drag the Web User Control, ContactUC (id = ContactUC1), into the ItemTemplate.  Switch to the HTML view and add the UserControlData property set to "<%# Container.DataItem %>".  For example:

Listing 6 - Adding ContactUC to the WebForm

<uc1:ContactUC id=ContactUC1 runat="server"UserControlData="<%# Container.DataItem %>">

3.      Switch to the design view and add the ItemCommand event handler to dlContacts and then double click on the btnAdd.  Enter the following code for the event handlers.

Listing 7 - Event Handlers

private void btnAdd_Click(object sender,System.EventArgs e)
{
  Contacts.Add(new Contact());
  dlContacts.DataSource = Contacts;
  dlContacts.DataBind();
}
 
private void dlContacts_ItemCommand(object source,
 System.Web.UI.WebControls.DataListCommandEventArgs e)
{
  if (e.CommandName == "Delete")
  {
    Contacts.RemoveAt(e.Item.ItemIndex);
    dlContacts.DataSource = Contacts;
    dlContacts.DataBind();
  }
}

Note: ItemCommand is called when any button in the DataList is pressed.  The delete button is handled in the User Control but also bubbled so that it can be handled here, where the Contact object can be deleted from the Contacts collection.

4.      Add a property called Contacts which persists a collection of Contact objects in ViewState.  Enter the following code:

Listing 8 - Persisting a List of Business Objects

private IList Contacts
{
  get
  {
    return(ArrayList)ViewState["Contacts"];
  }
  set
  {
    ViewState["Contacts"] = value;
  }
}

5.      Add code in the Page_Load to either initialize or save the User Control state.

Listing 9 - Loading State into Business Objects and Web User Controls

if (!Page.IsPostBack)
{
  Contacts = new ArrayList();
  dlContacts.DataSource = Contacts;
  dlContacts.DataBind();
}
 
else
{
  foreach (DataListItem item indlContacts.Items)
  {
    ContactUC uc =(ContactUC)item.FindControl("ContactUC1");
   uc.SaveState((Contact)Contacts[item.ItemIndex]);
  }
}

Run the Web Application

Build and run the Web Application.  Press the Add button to add names to the DataList.  Select "call" from the dropdown to see how the user control is able to handle select events.  The final output will be as shown in the figure given below.  Press the delete button to delete a row from the DataList.

Figure 1

Download Sample

[Download Sample]

Conclusion

Now that you are able to encapsulate a business object, event handlers and complex code inside of a Web User control, the DataList code becomes much simpler.  The DataList code can focus on maintaining the collection of business objects.  If you had any difficulty following these instructions then please download and run the example project.  The download also contains a Repeater example.