Question

I am having trouble using JQuery with ASP.net. I have a HTML img, an asp:Button and an asp:FileUpload.

<img src="images/12345.png" data-id="12345" />
<asp:FileUpload ID="fup" runat="server" />
<asp:Button ID="btn" runat="server" />

I am trying to pass back the picture id from the HTML img. Any idea of how I could push the data element into a CommandArgument or something?

I can’t have the HTML image runat=”server”, because I am setting it dynamically client-side.

Plugins

I tried using plugins, nothing is really working out the way I had planned:

This one takes multiple files, I need it to be limited to one. Don’t need for it to support dragging or anything fancy. http://valums.com/ajax-upload/

Uploadify uses Flash, trying to shy away from that. http://www.uploadify.com/

This one uses some ugly iframes and stuff, not looking too nice. Also, the spelling mistakes on the site are a little off-putting. http://www.phpletter.com/Demo/AjaxFileUpload-Demo/

If anyone has either a way to do what I’m asking or a slick way to upload new images (with additional parameters supported), it would be greatly appreciated.

Solution
Thanks for the answers, I ended up combining the two and using an asp:HiddenField running at the server:

Markup:

<img id="img" src="images/12345.png" data-id="12345" />
<asp:HiddenField id="hfData" runat="server" />
<asp:FileUpload ID="fup" runat="server" />
<asp:Button ID="btn" runat="server" />

JQuery:

$("#<%= hfData.ClientID %>").val($("#img").data("id"));

Codebehind:

string pictureID = hfData.Value;

Answer 1

If i understand you correctly, you can use <input type="hidden" name="data-id" value="12345" /> to get that data-id you are looking for.