asp:imagebutton link to New url

nawski · May 30th, 2005, 07:37 AM

I have created a datalist and filled it with image buttons populated from an access data base. great works to here and images displaying fine in specified order sequence set at database.

I want to click on the thumbnail(smaller size specified image of the full size photo) and display it in a new page bringing through and displaying the selected image in full size. I think i need to Post from the form field??? does this sound right ??? and how do i specifiy the new pages url?

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html>
<head>
<title>thumbnails from access database</title>
</head>

<script language="VB" Debug="true" runat="server">

Sub Page_Load(src As Object, e As EventArgs)
If Not IsPostBack Then
bindListControl
End If
End Sub

Sub bindListControl()
Dim myConn As OleDbConnection
Dim myOleDbAdapter As OleDbDataAdapter
Dim connStr, sqlStr As String
Dim myDataSet As New Dataset
connStr="Provider=Microsoft.Jet.OLEDB.4.0;Data source=C:\BegASPNETdb\datastores\Images\images.mdb ;"
sqlStr="SELECT ImagePath, display_order_number " _
+ "FROM images_table WHERE visible =true ORDER BY display_order_number"
myConn= New OleDbConnection(connStr)
myConn.Open()
myOleDbAdapter =New OleDbDataAdapter(sqlStr,myConn)
myOleDbAdapter.Fill(myDataSet,"ImagePath")
dataList1.DataSource=myDataSet.Tables("ImagePath")
dataList1.DataBind()
End Sub

</script>

<body bgcolor="white">
<form runat= "server">
<asp:DataList id="dataList1" border=0
RepeatDirection="Horizontal" RepeatColumns="3" runat="server">
<ItemTemplate><table><tr>
<td><asp:Imagebutton height=100 width=75
ImageURL='<%# Container.DataItem("ImagePath") %>'
runat="server" />
</td></
<td>
<%# Container.DataItem("display_order_number") %>
<td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</form></body>
</html>

Can someone out there help guide me please ???:D

N A W S K I

RPG SEARCH · May 30th, 2005, 01:06 PM

What you could do is simply code into the URL something like NewPage.aspx?ImageID=1. Where new page is what ever you call your page and where image id is whatever the unique record number for what that image is.

and in the new page do Request.QueryString("ImageID") you can then retrieve the image url from the database and then bind it to the picture holder.

hope that helps.

David Jenkins
-------------------------------------------------------------
Do you want to make extra money around your commitments?
Credit cards, bills, loans and a mortgage - all getting you down?
Is your pension going to be enough when you retire?
There is a solution visit http://www.1stmillion.co.uk
or call 01772 489521

nawski · May 31st, 2005, 04:46 AM

Im sorry im still confused, I kind of get the jist of where your heading but Im not sure how to do this.

NAWSKI

RPG SEARCH · May 31st, 2005, 08:42 AM

Ok you say you want to click on a small image and it shows a bigger version...

so in the small image you make the a href something like <a href="NewPage.aspx?ImageID='<%# Container.DataItem("ImageID") %>'"> .... this passes the image id number in the url...

in the new page you simply put in Request.Querystring("ImageID") and it pulls it from the url. You then use this to pull the image location from the database and then bind it to the picture.

i think that sounds a little better than the first time around.....

David Jenkins
-------------------------------------------------------------
Do you want to make extra money around your commitments?
Credit cards, bills, loans and a mortgage - all getting you down?
Is your pension going to be enough when you retire?
There is a solution visit http://www.1stmillion.co.uk
or call 01772 489521

nawski · June 3rd, 2005, 11:31 PM

OK call me thick!!! but this doesnt want to work most likely the user not the solution thats not working.

When clicking on the ImageButton it is sending the viewstate to the server and not the selected imagepath data (or is it that both are being sent) but is not launching the new window. seems to simply refresh the same window.

Are you suggesting the "url reference" be as part of the imagepath data located in the database or part of the code for the page??? am i confusing this with the ImageURL ???

Im ok with the querry string being located on the next page and was expecting this anyway but just hadnt got to that bit ((said with a cringe!!!) so long as i know what information is that is being posted)i assume this would simply be the image_path data

Do i need to method=post in the form tag?

The address to the image in the database is currently just "datastores\Images\pic2.jpg" located in the ImagePath column, and referenced in the ImageURL='. . . code on the page script with Visible selected as true and a number to depict a manageable display sequence order for later administration custom sorting purposes. hence the :

I am confused as to how and where to get the page to launch the "new" (not target=_self) window onclick of the ASPX ImageButton selected.

sqlStr="SELECT ImagePath, display_order_number " _
+ "FROM images_table WHERE visible =true ORDER BY display_order_number"

FYI. I am not selecting the image unique id reference from the database to select the image to display

If I understand you correctly you are saying that every image should have the same <a Href="display_image.aspx" reference and "?ImageID=1 for image 1 and "?ImageID=2 for image 2 etc . . .and i think you mean for this to be referenced in a databse field

[u]am a little confused about this </u>if this is the link to the address for the New page and the imageURL address how does it read the imagePath???

Does the ImageURL='<%# Container.DataItem("ImagePath") %>'
runat="server" /> still remain? if so should be the data located in the imagepath field of the database be?:
"<a Href="display_image.aspx"?ImageID=1 /a>"
and should i have a field ImageID with uniqueKey selected for each field? still unsure how this will get the ImagePath and display the image?

I think I would need to resource the ImagePath reference "datastores\Images\pic2.jpg" when selecting the ImageID query with ImageID=2.

SEE am confused !!! please help in plain inglish.

thanks

Tony

planoie · June 4th, 2005, 08:36 AM

Tony,

I think the problem is that you are using an ImageButton. This control is simply a button shown as an image. Instead you want a regular hyperlink. Instead of text, you should the thumbnail. The hyperlink contains the url of the full size image and you can specify the hyperlink target as "_new" to launch it into a new window.

-Peter

nawski · June 4th, 2005, 09:28 PM

yeah thought of doing that in straight html but then I would not capture the selected imageId of the thumbnail to bring through to the new form.

If i set as a thumbnail then it will mean hardcoding for each item within the gallery and a seperate followup page for each large image to be displayed-totally possible but not editable through an admin backend site. also means creating a lot of followup pages.

I am trying to run via a database and have the selection carried over to the new generic page and then display the selected thumbnail image in full size created serverside prior to displaying the page.

Im thinking i should use an oncommand="display_image" where the sub for the display_image is . . .??? response.redirect("display_image.aspx") but not sure if this will work or the best way to go about it

Had also thought of the ASP:Thumbnails as an option but havent relaly explored this yet. any comments?

any other help out there appreciated

planoie · June 7th, 2005, 11:33 AM

You have stated that your thumbnails are showing up correctly so it stands to reason that your image paths in the database are correct, so you can create a direct link to them in the grid that shows them as thumbnails:

<asp:hyperlink runat="server" navigateurl='<%# Container.DataItem("ImagePath") %>'><img src='<%# Container.DataItem("ImagePath") %>' height=100 width=75 /></asp:hyperlink>

-Peter

nawski · June 13th, 2005, 06:11 AM

Thanks Peter I greatly appreciate your assistance
This works fine to pop up the image in a blank window.

How do I display The selected image in the New page . . . ???

like this?

<%@ Page Language="VB" Debug="true" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.OleDb" %>
<html>
<head>
<title>thumbnails from access database</title>
</head>

<script language="VB" Debug="true" runat="server">

Sub Page_Load(src As Object, e As EventArgs)
If Not IsPostBack Then
bindListControl
End If

If IsPostBack Then
Response.redirect("image_display.aspx")
End If

End Sub

Sub display_image(src As Object, e As EventArgs)
If Not IsPostBack Then
bindListControl
End If
End Sub

Sub bindListControl()
Dim myConn As OleDbConnection
Dim myOleDbAdapter As OleDbDataAdapter
Dim connStr, sqlStr As String
Dim myDataSet As New Dataset
connStr="Provider=Microsoft.Jet.OLEDB.4.0;Data source=C:\BegASPNETdb\datastores\Images\images.mdb ;"
sqlStr="SELECT ImagePath, display_order_number " _
+ "FROM images_table WHERE visible =true ORDER BY display_order_number"
myConn= New OleDbConnection(connStr)
myConn.Open()
myOleDbAdapter =New OleDbDataAdapter(sqlStr,myConn)
myOleDbAdapter.Fill(myDataSet,"ImagePath")
dataList1.DataSource=myDataSet.Tables("ImagePath")
dataList1.DataBind()
End Sub

</script>

<body bgcolor="white">
<form runat="server">
<asp:DataList id="dataList1" border=0
RepeatDirection="Horizontal" RepeatColumns="3" runat="server">
<ItemTemplate><table><tr>
<td>
<asp:hyperlink ID="ImageID" runat="server" navigateurl='image_display.aspx'><img src='<%# Container.DataItem("ImagePath") %>' height=100 width=75 /></asp:hyperlink>

<td>
<%# Container.DataItem("display_order_number") %>
<td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>

and then what would the code be for the new page Image_display.aspx to show the selected image in the correct place ?

planoie · June 13th, 2005, 08:25 AM

1) You don't need this:
If IsPostBack Then
Response.redirect("image_display.aspx")
End If

2) You want to add the image URL into the querystring of the display page:

<asp:hyperlink ID="ImageID" runat="server" navigateurl='image_display.aspx?image=<%# Container.DataItem("ImagePath") %>'><img src='<%# Container.DataItem("ImagePath") %>' height=100 width=75 /></asp:hyperlink>

I'd also recommend that you encode the image path so you don't potentially break the querystring format:

<%# Server.UrlEncode(Container.DataItem("ImagePath")) %>

This will ensure that invalid querystring characters are escaped in the hyperlink.

Your image_display.aspx page needs only pull the value from the querystring and assign the value to an image control.

-Peter