Sometimes you will want to do something very specific on a Web page using a combination of popular technologies. However the interaction of client and server-side languages such as JQuery and ASP.NET can become confusing, especially when the server side language starts adding client-side functionality such as through an UpdatePanel control.
In this article I’m going to review a very specialized case. Here are the key points that I want the code to handle:
- I have an ASP.NET DataList that is showing rows of information.
- One column of repeating information in the DataList contains a separate Date and Time component
- The footer of the DataList is being used to add new rows of information, including a Date and a Time field
- The editable time field should display a JQuery DatePicker widget
- When a date is selected on the JQuery DatePicker widget, the current time should be set to a separate text field that is beside the Date field
- The DataList is running inside an UpdatePanel control to only refresh the DataList when Server communications happens
- The DataList has an edit button which the user can press to make a row editable. This involves a refresh of the DataList so that JQuery has to know to re-attach the DatePicker control to the newly editable date field
This is a lot of functionality to cover in one article and I hope it is clear for you to understand how I want the JQuery to interact with the ASP.NET. To further explain things I will give some example code of both the JQuery and the markup tags of the DataList, and I will explain how to address the requirements step-by-step.
Before I start into in-depth explanations in this article, I’d like to mention that if you are interested in reading more about ASP.NET, please check out my series of articles covering ASP.NET development. I also have written a very interesting series of articles about using JQuery to add functionality to your pages that is worth taking a look at.
Justin Cooney 