ASP.NET 图片 src 问题

Question

我通过以下 jquery 代码设置图像控件的值：

$('.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);

图片在浏览器中完美显示。但是我无法访问它的 src 属性：

string imgName = detailedImage.Src;

imgName 始终为空字符串。有什么建议吗？

Answer 1

更改img 的src，即使img 放置在<form> 中也不会将src 提交给服务器。您需要将新的src 设置为将在表单中提交的内容，即隐藏字段。试试这个：

$('.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);
});

如果您现在的标记中有这样的内容：

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

您应该能够在服务器端检索ImageSource.Value。

Answer 2

我确信有很多方法可以解决这个问题，这很大程度上取决于页面和应用程序中其他有助于整体功能和用户体验的因素。但就建议而言，这个怎么样：

与其尝试在图像控件中保持所选图像的状态，不如将其分离到不同的控件中。使用标准的img HTML 元素在客户端向用户显示图像，并将其仅作为用户体验问题。不要将其用作表单的一部分。

然后创建一个单独的控件（一个隐藏字段、一个已设置为不显示样式的文本框等）并将图像文件的路径设置为 JavaScript 中该控件的值。像这样的：

$('.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');
});

请注意，src 和 alt 设置在标准 img 标记上（在本例中为 id showImage），并且服务器端代码关心的值设置在另一个控件上完全（在这种情况下使用服务器端 id imagePath）。

我目前没有办法对此进行测试，但这是一个建议。它可能不起作用，如果是这种情况，请告诉我，以便我可以修改/删除此答案。但考虑到像TextBox ASP.NET 控件这样的东西意味着要在客户端修改它们的值，这似乎是有道理的。 （实际上，在这种情况下，TextBox 的样式可能比隐藏字段更好。）