CODEWITHSUNDEEP
c#asp.net
Ahmad Hassan
Ahmad Hassan

Reputation: 13

ASP.NET - Clicking on an image should redirect to a specific page with image url

I am basically making a website for my university project which is basically a photography&wallpapers site I have saved images in folder(named as ImageStorage) and I am retrieving images through Image link from database I have used datalist in my page(image-viewer.aspx) to show my all images as imagebutton. What I basically want is that when user clicks on an image it redirects to another page(image-detail.aspx)and also sends the url or id of that image so that I can use it to display that image on (image-detail.aspx) page

Here is my image_viewer.aspx code:

<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" CellPadding="15" CellSpacing="10" DataSourceID="SqlDataSource1" GridLines="Both" OnSelectedIndexChanged="DataList1_SelectedIndexChanged" RepeatColumns="3" RepeatDirection="Horizontal" style="margin-left: 0px" >
<ItemTemplate>
<br />
<asp:ImageButton ID="Image1"  style="width:335px ;height:210px" runat="server" ImageUrl='<%# Eval("ImagePath") %>' CommandName="imgClick"/>
</ItemTemplate>
</asp:DataList>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:photo_stock_viewConnectionString %>" SelectCommand="SELECT * FROM [ImageInfo1]"></asp:SqlDataSource>
<br />
</div>
</form>

HTML code in image_detail.aspx to show image:

<img class="img-fluid mt-4" src="ImageStorage/image-detail.jpg"/>

Upvotes: 1

Views: 1342

Answers (1)

Tony Dong
Tony Dong

Reputation: 3313

You need code behind to handle the image click event

protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
    if (e.CommandName == "imgClick")
    {
       ImageButton btn = e.CommandSource as ImageButton;
       //Do what you need to do here
       string imgUrl = btn.ImageUrl;
       Response.Redirect(imgUrl,true);
}

If you need set more info like imageID, you also can use CommandArgument as parameter, set in html and get it from code behind Here is the URL how to know which image button I click in datalist

Upvotes: 1

Related Questions