ASP.NET/DataList: Client-side postback by clicking list elements

Question

Hi,

I have a DataList control that displays a set of elements. Can anyone point me in the right direction on how I can add some client-side functionality for submitting/doing a postback when the user clicks an element in the list (e.g. anywhere in the that is the root of the list element. I've seen some examples by adding a hidden LinkButton and wiring it up - but I haven't got it to work properly.

cheers,

--larsw

Answer 1

There isn't such a thing as a "client side postback", it's an erronous statement. A postback implies submission to the server (or an external server).

What you're really looking for is adding some AJAX methods to your page. This can be done in a few ways:

• UpdatePanel
• Pure MS AJAX
• Mixture of MS AJAX and jQuery (or other JavaScript library, I suggest jQuery due to it's support within VS 2008)

UpdatePanel Method

This isn't really the best idea if you've got a very heavy page. Have a look at a blog post I wrote if you want to get some more info on what to look out for - http://www.aaron-powell.com/blog.aspx?id=1195.

Simply put UpdatePanels can be a dangerous choice if you don't understand what the limitations are.

MS AJAX and/ or jQuery

This is my recommendation on what you should do. Use jQuery to locate all the elements in the DOM that you want to put the client events on, for example:

$('#<%= DataList1.ClientID %> span').click(function () { alert('You want something here'); });

David Ward has some good posts on using jQuery with ASP.NET/ ASP.NET AJAX - http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/ and http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Note: If you're going to use an AJAX implementation you wont have access to the page's control collection, it will all be static method interaction so be aware that if you want to update multiple sections of the page you'll need to write JavaScript methods to do that.

Answer 2

Hi again,

Thanks for the help - I went for the jQuery method. Do you know if I can invoke a hidden asp:LinkButton from the lambda function (for the selected item) so that a post back takes place?

There was a small typo in your code example (in case anyone else reads this thread): I had to add a # to the jQuery selector; '#<%= DataList1.ClientID %> td'

--larsw