ASP.NET image src question

Question

I set the value of a image control via the following jquery code:

$('.image').click(function () {
    var imgPath = $(this).attr('src');
    var imgName = imgPath.substring(0, imgPath.length - 4);
    var imgAlt = $(this).attr('alt');

    $('#<%= detailedImage.ClientID %>').
        attr('src', imgName + '-large.jpg').
        attr('alt', imgAlt);

The picture shows up perfectly in the browser. However I cannot access it's src attribute:

string imgName = detailedImage.Src;

imgName is always an empty string. Any suggestions?

If you can add a jsfiddle.net so that i can solve it for you...or can you put the html that you are applying the jquery on. — Samir Adel
– Samir Adel, Commented Sep 27, 2011 at 13:21
You may be out of luck. Since you're modifying the value on the client-side, the server-side has no way of knowing that the value has been modified. I imagine it tracks that sort of stuff in ViewState, and modifying that on the client-side may be a bit ugly (and potentially hazardous to other logic). Let's step back for a minute... Why does this value need to be known on the server-side? — David
– David, Commented Sep 27, 2011 at 13:23
To have the server know the new image source, you'll have to use AJAX. — user447356
– user447356, Commented Sep 27, 2011 at 13:24
@David, I'm using this photo to send a Postcard. This is a module (user control .ascx) that collects the image, adds aditional messages, to and from email addresses and sends an HTML structured Email. — Dragan
– Dragan, Commented Sep 27, 2011 at 13:29

Asbjørn Ulsberg · Accepted Answer · 2011-09-27 13:41:01Z

2

Changing the src of an img, even though the img is placed within a <form> doesn't submit the src to the server. You need to set the new src in something that will be submitted in the form, i.e. a hidden field. Try this:

$('.image').click(function () {
    var imgPath = $(this).attr('src');
    var imgName = imgPath.substring(0, imgPath.length - 4);
    var imgAlt = $(this).attr('alt');
    var src = imgName + '-large.jpg';

    $('#<%= detailedImage.ClientID %>').
        attr('src', src).
        attr('alt', imgAlt);

    $('#<%= hiddenInput.ClientID %>').val(src);
});

If you now have something like this in your markup:

<input type="hidden" id="ImageSource" runat="server" />

You should be able to retrieve ImageSource.Value server-side.

answered Sep 27, 2011 at 13:41

Asbjørn Ulsberg

8,8403 gold badges48 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2011-09-27 13:40:00Z

2

I'm sure there are a number of ways to solve this, depending a lot on factors elsewhere in your page and your application which would contribute to the overall functionality and user experience. But in terms of suggestions, how about this:

Instead of trying to maintain the state of the selected image in the image control, separate it out into a different control. Use a standard img HTML element for displaying the image(s) to the user on the client-side and keep that as solely a user experience concern. Don't use it as part of a form.

Then create a separate control (a hidden field, a text box which has been styled to not be displayed, etc.) and set the path of the image file as the value of that control in your JavaScript. Something like this:

$('.image').click(function () {
  var imgPath = $(this).attr('src');
  var imgName = imgPath.substring(0, imgPath.length - 4);
  var imgAlt = $(this).attr('alt');

  $('#showImage').attr('src', imgName + '-large.jpg').attr('alt', imgAlt);
  $('#<%= imagePath.ClientID %>').val(imgName + '-large.jpg');
});

Note that the src and alt are being set on a standard img tag (with id showImage in this case) and the value that the server-side code cares about is being set on another control entirely (with server-side id imagePath in this case).

I don't have a way of testing this on hand right now, but it's a suggestion. It's possible it may not work, and if that's the case let me know so I can modify/remove this answer. But it seems like it would make sense given that things like TextBox ASP.NET controls are meant to have their values modified on the client-side. (Indeed, in this case you may have better luck with a TextBox styled to not be displayed than with a hidden field.)

answered Sep 27, 2011 at 13:40

David

221k42 gold badges245 silver badges337 bronze badges

2 Comments

Dragan Over a year ago

Thanks for helping me out David. I upvoted your answer however im gonna mark asbjornu's answer as the answer because you're already in the top 2% :D Thanks again!

David Over a year ago

@Dragan: That's not really how StackOverflow works in terms of accepted answers (though they're nearly identical, so either one is fine), but the important part is that you received helpful answers. Glad we could help :)

Collectives™ on Stack Overflow

ASP.NET image src question

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related