Using DHTML Behaviors in ASP.NET

• Download demo project - 17.3 Kb
• Download source - 17.3 Kb

Introduction

Recently, I came across an article by Dave Massey, Fun with Tables using DHTML behaviors, on MSDN. The article was quite interesting and had provided dynamic effects such as drag and drop columns of table, sorting of data on any column using DHTML behaviors.

I felt why not apply these behaviors in applications being developed using ASP.NET? As you are aware, ASP.NET Repeater control is quite flexible and gives full control to developer to decide how to paint data. This article shows how easy it is to use DHTML behaviors in ASP.NET using Repeater. Those who are new to DHTML behaviors, I recommend them to read it on MSDN under DHTML dude. I have used the behaviors shown in sample code section of Fun with Tables article in my sample application. Because, the purpose of this article is to demonstrate how to use DHTML behaviors in ASP.NET.

Background

In my sample application, I am showing employee list from NorthWind database and binding it to Repeater control. The HTML code snippet of default.aspx is as shown below. I have only shown code which is related to DHTML behavior. For detailed code, please download using the link at the top of the section.

Using the code

<asp:repeater id="employeeList" Runat="server">
  <HeaderTemplate>
<table id="MyTable" 
  style="behavior:url(dragdrop.htc) url(tablehl.htc) url(sort.htc);">

<thead bgcolor="#000000" style="FONT-SIZE: 12px; COLOR: white">
  <tr>
    <td width=200>Employee ID</td>
    <td width=200>First Name</td>
    <td width=200>Last Name</td>
  </tr></thead>

<tbody>
</HeaderTemplate>
<ItemTemplate>
  <tr bgcolor="#ccffff" style="FONT-SIZE: 12px; COLOR: red">
    <td><%# DataBinder.Eval(Container.DataItem,"EmployeeID") %></td>
    <td><%# DataBinder.Eval(Container.DataItem,"FirstName") %></td>
    <td><%# DataBinder.Eval(Container.DataItem,"LastName") %></td>
  </tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate> </asp:repeater>

If you look at the above HTML code, it contains a simple Repeater control and I have declared a table with three columns showing Employee ID, First Name and Last Name. The declarations about Table tag are in HeaderTemplate. Table tag declaration is important as its style attribute contains declarations of DHTML behaviors to be used. Please note that DHTML behaviors have a file extension of .htc (HTML Component) and behaviors are implemented using a set of JavaScript functions. This is a plain text file which can be opened in any text editor such as Notepad. Please note that these files should be in the same web folder where the .aspx file is residing. Since I am using three behaviors in this example, we have declared three behaviors in style attribute. They are declared using the following syntax.

// style="behaviour:url(sort.htc);"

// If you want to use more than behaviours then you can include

// them by separating with space character

// style ="behaviour:url(sort.htc) url(hilite.htc) url(dragdrop.htc);"

That's it! You can now do drag and drop the columns or sort the data as per particular column by clicking on header column of the table. To do drag and drop, click the mouse on any header column and drag it and drop it on another column header, and the columns get altered automatically. Also, you can highlight any particular row of data by moving mouse over that row, or select it by clicking mouse over that row.

The code behind of the default.aspx is simple as it contains code to retrieve data from employee table in page_load event handler, and another method is BindData method which binds the data to DataSource property of Repeater control and invoke its DataBind method.

Points of Interest

Please note that I am returning the employee data as HTML string and storing it in a hidden Label control and then using this XML string to bind it to the Repeater. The idea of using XML is to provide loose coupling between GUI and business layer, and as you know, XML is de facto standard for data exchange. Also, the Label control used is to store the data retrieved from database, and use it to bind to Repeater to avoid frequent trips to database on subsequent post backs.

Please download the demo project to see the action of the DHTML behaviors. If you face any difficulties, please contact me on my email gokuldasc@yahoo.com. Good Luck!!!