• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 556
  • Last Modified:

Get ImageURL or ID of a photo when clicked

Hi I want to display lots of pictures on a page and then when the user clicks on one, a function is called which gets the filename (or the id) of that picture so I can then save the filename to the database.  I thought of using ImageButton but it seems you can only get co-ordinates, not the id or the imageURL on the onClick.  I would prefer to do this server side (not JavaScript).
0
Lorna70
Asked:
Lorna70
  • 2
  • 2
  • 2
  • +1
2 Solutions
 
Rajar AhmedConsultantCommented:
could  u post the code , so that we can get a better understanding regarding your issue  .

Between Image button Url can be retrieved using

ImageButtonid.ImageUrl 

Open in new window

0
 
selvolCommented:
Javascript has nothing to do with Databases It  can interact with server side scripts via AJAX that can interact withDatabases

 http://api.jquery.com/jQuery.ajax/

Selvol
http://www.aspdotnet-suresh.com/2011/03/how-to-save-images-into-folder-and.html
POST Some code

Selvol
0
 
Alan WarrenCommented:
Hi Lorna70,

If you display your 'lots of images' in a control such as a datalist, assuming the paths for your images are coming from a database, you can set the DataKeyField property of the datalist to the table key field ID, DataKeyField="ID", then you access the DataKey value from code. The imagebutton is perfect, set the CommandName property of the imagebutton to "Select", then add an ItemCommand Event to your server-side code.
<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  Protected Sub dl1_ItemCommand(source As Object, e As System.Web.UI.WebControls.DataListCommandEventArgs) Handles dl1.ItemCommand
    Dim intID = dl1.DataKeys(0)
    ' do stuff ...

  End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <asp:DataList CssClass="DataListStyle" ID="dl1" runat="server" DataKeyField="ID" DataSourceID="ds1" RepeatColumns="3" CellPadding="10" RepeatDirection="Horizontal" ShowFooter="true">

          <ItemTemplate>
            <asp:ImageButton ID="ImageButton1" runat="server" CommandName="Select" CommandArgument='<%# Eval("ID") %>' ImageUrl='<%# Eval("ImageUrl") %>' Width="200px" />
           </ItemTemplate>
        </asp:DataList>    


      <asp:SqlDataSource ID="ds1" runat="server" 
        ConnectionString="<%$ ConnectionStrings:cn %>" 
        SelectCommand="SELECT [ID], '~/pics/' + [ImageUrl] as ImageUrl FROM [dbo].[tblPics]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Open in new window

Alan
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Lorna70Author Commented:
Thanks guys.

My problem is I won't know the ID as it will differ for each button.  I thought I could set the ID to the image filename and capture that on an onClick event but I don't know how.

I have:

<asp:ImageButton ID="wowa2z-1" ImageUrl="../wowpics/wowa2z-1.jpg" runat="server"
                Width="200px" onclick="wowa2z-1_Click" />

However, it says wowa2z-1 is not a valid identifier!

I need to know how to store the image name so it can be retrieved on an onClick event, e.g:

    protected void button1_Click(object sender, ImageClickEventArgs e)
    {
       
    }

I'm open to other approached though.
Also, the image names aren't coming from a database, I'm just hard-coding them in as I know what all the images will be :-).
0
 
Rajar AhmedConsultantCommented:
You can use Commandname attribute
<asp:ImageButton ID="ImageButton1" runat="server" OnClick="ImageButton1_Click" CommandName="wowa2z-1" />

   protected void button1_Click(object sender, ImageClickEventArgs e)
    {
        string imageUrl = ImageButton1.CommandName;
        Response.Write(imageUrl);
    }

Open in new window

0
 
Alan WarrenCommented:
Hi Lorna70,
ID cannot contain hyphens, else you will encounter: Error      1      'wowa2z-1' is not a valid identifier. You can use underscores in place of hyphens, or just use the generic ID 'ImageButton1', 'ImageButton2' etc... ID is irrelevant for this task, but it's good practice to follow some convention when assigning IDs.

I changed ImgageUrl to use the tilda (rootpath) instead of the "../" parent path; rootpath will work from anywhere in the project; and the image did not display on my machine when using the parent path, for some unknown reason.

I accessed the imageurl property of the ImageButton via the sender object exposed by the click event.

Then created a small table called tblPics, has one primary key column 'ID' of type int and another named 'ImageUrl' of type varchar(50).


<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
  Protected Sub ImageButton1_Command(sender As Object, e As System.Web.UI.WebControls.CommandEventArgs) Handles ImageButton1.Command
    If e.CommandName = "Select" Then

      Dim strSqlError As String = ""
      Dim strImageUrl As String = sender.imageurl.ToString
      Dim strSql As String = ""

      System.Diagnostics.Debug.WriteLine(strImageUrl)
      Response.Write("Found: " & strImageUrl)

      ' Begin insert into the db stuff here
      ' Concatenate sql insert string
      strSql = "insert into [dbo].[tblPics] ([ImageUrl]) Values('" & strImageUrl & "')"

      ' Create Instance of Connection and Command Object
      Using myConnection As New System.Data.SqlClient.SqlConnection(ConfigurationManager.ConnectionStrings("cn").ConnectionString)
        Using myCommand As New System.Data.SqlClient.SqlCommand(strSql, myConnection)

          ' Mark the Command as a SPROC
          myCommand.CommandType = System.Data.CommandType.Text

          Try
            ' Open the connection
            myConnection.Open()
            myCommand.ExecuteScalar()


          Catch SQLexc As System.Data.SqlClient.SqlException
            strSqlError = "Insert Failed. Error Details are: " & SQLexc.ToString()

          Finally
            myConnection.Close()
          End Try

        End Using
      End Using


    End If

  End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <!-- 
        ID cannot contain hyphens, else you will encounter: Error	1	'wowa2z-1' is not a valid identifier.
        Changed ImgageUrl to use the tilda (rootpath) instead of the "../" parent path; 
        rootpath will work from anywhere in the project. 
      -->
      <asp:ImageButton ID="ImageButton1" runat="server" CommandName="Select" ImageUrl="~/wowpics/wowa2z-1.jpg" Width="200px" />
    </div>
    </form>
</body>
</html>

Open in new window

Alan
0
 
Lorna70Author Commented:
Thank you meeran03 - that's exactly what I'm looking for - I knew there would be a simple way lol!  Thanks also Alan - I didn't know about the hyphens so I'll change my program to name images with an underscore from now on :-)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now