ASP.NET image src 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 suggestion开发者_运维知识库s?

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.

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.)