CODEWITHSUNDEEP
asp.netimageonclickextractdatalist
user84786
user84786

Reputation: 631

Asp.Net Image in datalist onclick event? is it possible?

Ok I have been working on this gallery for some time and I keep getting little tidbits. It is now time to finish it off. I have a datalist which binds to an array of *.aspx image urls that contain a thumbnail id that is sent through the url. I now need to implement an onclick event, that when a user clicks on a photo, it brings them to the actual picture.

example url:
(thumbnail) = ~/UserPages/Photo/GetThumbnail.aspx?id=7
(actualpic) = ~/UserPages/Photo/GetPhoto.aspx?id=7

What I need: How do i get it so that each photo has an onclick event? I tried adding onclick to the imag src but it didn't work. It is difficult because it is not an actual image control, they exist inside a datalist. I also need to know how to extract the thumbnail url when getting clicked so that I can grab the id and redirect to the actual picture. Help please!

<asp:DataList ID="dlImages" runat="server" 
    RepeatColumns="5" 
    RepeatDirection="Horizontal" 
    RepeatLayout="Flow">

    <ItemTemplate>
        <img src="<%# ResolveUrl((string)Container.DataItem) %>" />
    </ItemTemplate>

</asp:DataList>

Code Behind:

dlImages.DataSource = ImageUrls;
dlImages.DataBind();

Upvotes: 0

Views: 6169

Answers (2)

SirDemon
SirDemon

Reputation: 1758

Try:

<ItemTemplate>
    <img src="<%# ResolveUrl((string)Container.DataItem) %>" onclick="doSomething(this)" />
</ItemTemplate>

After that you can simply implement a doSomething function that parses the id out of "this.src" and do whatever you want with it.

Upvotes: 0

John Rasch
John Rasch

Reputation: 63445

Can you wrap it in an a tag?

<ItemTemplate>
    <a href="<%# ResolveUrl(String.Format("~/UserPages/Photo/GetPhoto.aspx?id={0}", Container.DataItem)) %>"><img src="<%# ResolveUrl(String.Format("~/UserPages/Photo/GetThumbnail.aspx?id={0}", Container.DataItem)) %>" /></a>
</ItemTemplate>

This assumes your DataItem contains only the ID.

Upvotes: 1

Related Questions