Click here to Skip to main content
Click here to Skip to main content

Using DHTML Behaviors in ASP.NET

, 9 Oct 2004
Rate this:
Please Sign up or sign in to vote.
Use of DHTML behaviors in Repeater control of ASP.NET.

Sample image

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!!!

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

gokuldas
Software Developer (Senior)
United Kingdom United Kingdom
I am Solution Architect with 20+ years of IT experience in the field of real time,embedded,client/server and web based applications and Business Intelligence . I am currently working as Senior Consultant for Infor.

Comments and Discussions

 
GeneralDrag and Drop PinmemberEzhilarasiMSc5-Jun-08 21:58 
QuestionDrag & Drop the data between two tables PinmemberRavindra.P.C22-Nov-07 0:11 
GeneralLimited application - not cross-browser PinmemberAndre K12-Jun-06 22:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.141216.1 | Last Updated 9 Oct 2004
Article Copyright 2004 by gokuldas
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid