Home > Articles

Custom Controls

  • Print
  • + Share This
This chapter is from the book

This chapter is from the book

3.5. Creating a Data-bound Control

You want to create a custom control that supports data-binding.

Technique

This example shows you how to create a simple and original data-bound custom server control—a data-bound bulleted list. The CustomBulletedList class is as follows:

Imports System
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.ComponentModel
Imports System.Collections
Imports System.Text

Public Class CustomBulletedList
 Inherits System.Web.UI.WebControls.WebControl

 Private _html As New StringBuilder()
 Private _dataSource As IEnumerable

 Public Property DataSource() As IEnumerable
  Get
   Return _dataSource
  End Get
  Set(ByVal value As IEnumerable)
   _dataSource = value
  End Set
 End Property

 Private Sub CreateBulletedList()
  Dim dataSource As IEnumerable = Nothing

  Try
   dataSource = Me._dataSource
  Catch
  End Try

  If Not (dataSource Is Nothing) Then
   _html.Append("<ul>")
   Dim dataObject As Object
   For Each dataObject In dataSource
    _html.Append("<li>")
    _html.Append(dataObject)
    _html.Append("</li>")
   Next dataObject
   _html.Append("</ul>")
  End If
 End Sub


 Public Overrides Sub DataBind()
  MyBase.OnDataBinding(EventArgs.Empty)

  CreateBulletedList()
 End Sub


 Protected Overrides Sub Render(ByVal output As HtmlTextWriter)
  output.Write(_html)
 End Sub
End Class

To use this control, you need to do the following:

<%@ Page Language="VB" %>
<%@ Register TagPrefix="AspNetCookbook" Namespace="AspNetCookbook" 
Assembly="AspNetCookbook" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
<html>
<head>
<title>Data Bound Controls</title>
</head>
<body>
<script language="vb" runat="server">
Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
 listControl.DataSource = New String() {"Test 1", "Test 2", "Test 3"}
 listControl.DataBind()
End Sub
</script>

<AspNetCookbook:CustomBulletedList id="listControl" runat="server"/>

</body>
</html>

Comments

This control allows you to data-bind any data source that is derived from IEnumerable to it—the content will be listed in bulleted format. Overriding the DataBind method is the critical point in this control. When this method is called, it is trying to bind to the data source and call the CreateBulletedList method.

CreateBulletedList loops through all of the data objects in the data source and saves them to be outputted as bulleted lines.

By overriding the Render method, you can control the rendering of the control, and render it exactly as you see fit. You should always opt for this approach when performance is an issue (and when isn't it?), because it is much faster than overriding the CreateChildControls method.

One last point you should take note of is that you should always use a StringBuilder instead of a regular string as the HTML output source. Using regular string objects will seriously degrade the performance of your custom control.

See Also

Section 3.6, "Creating a Templated Control"

  • + Share This
  • 🔖 Save To Your Account