刷新图片源

Question

我需要一位懂得MVC和jQuery的专家来帮助我。我的页面上有一张图片，单击它会启动一个对话框，允许上传文件。一旦对话框关闭，图像应该刷新为从数据库中上传/存储的内容...

第一次运行都很好。但是如果我尝试上传第二个图像，则仍将显示第一个图像。似乎我的控制器方法第二次没有被调用...以下是我的代码...

我还排除了页面被缓存的可能性。再次强调，第二次没有调用控制器方法...

控制器

[AcceptVerbs(HttpVerbs.Get)]
public ActionResult GetImage(Guid parentId)
{
    var la = Helper.Service.GetAttachmentByEntity(parentId, MembershipProvider.SecurityTicket).ToList();
    la.OrderByDescending(x => x.CreatedDate);

    return File(la[0].Data, la[0].ContentType);
}

查看

<script type="text/javascript">
    $(function() {
        var iphcObject = $('#<%=imagePlaceHolderControl.ClientID %>');

        iphcObject.children().find('#imageUploadDialog').bind('onClose', function() {
            iphcObject.children().find('#image').attr('src', '<%=Url.Action("GetImage", "Image", new { parentId = Model.ParentId }) %>');
        });
    });
</script>

<asp:Panel ID="imagePlaceHolderControl" runat="server">
    <div style="border: solid 1px; width: <%=Model.Width%>; height: <%=Model.Height%>; text-align: center; vertical-align: middle;">
        <a href="#" onclick="$('#imageUploadDialog').dialog('open');" title="Add a picture...">
        <img id="image" src="<%=Url.Content("~/content/images/icon_individual_blank.gif") %>" /></a>
        <%Html.RenderDialog("imageUploadDialog", "Upload image...", "ImagePlaceHolder_Upload", "Image", Model, 235, 335); %>        
    </div>
</asp:Panel>

- Jason

---

有没有可能您能够发布您的实时网页链接，这将有助于互动。看起来像是缓存问题，但不确定您如何处理数据库方面的事情。 - Bobby Borszich

我已经发布了一些附加信息。这绝对不是缓存问题... 你有什么想法？ - xspydr

好的，如果缓存不是问题，你能发布一下渲染到页面上的HTML内容吗？包括第一次显示、上传第一张图片和上传第二张图片时的HTML。这应该相对简单，但我认为我们可能遗漏了诊断的某些部分。 - Bobby Borszich

Answer 1

您可以添加任意数字来强制在客户端刷新：

  <img id="img" src="@Url.Action("GetImage")" alt="random" />
  <script type="text/javascript">

     var src = $("#img").attr("src");
     var count = 0;

     setInterval(function () {
        $("#img").attr("src", src + "?" + count);
        count++;
     }, 3000);

  </script>

- Trax72

Answer 2

#image 是什么？难道不应该使用 find('img') 吗？或者给 IMG 加上一个 ID，叫做 'image'。

- Glennular

Answer 3

我不了解 ASP，但是这一行代码：

iphcObject.find('#image').attr('src', '<%=Url.Action("GetNewImage", "Image", new { parentId = Model.ParentId }) %>');

似乎在页面初始查看时解析，而不是上传新图像时。

要获取新图像的URL，请将该数据发送到POST请求的响应中。这应该很容易，特别是如果您使用JSON或原始文本进行传输。

对于jQuery方面：

$.post('<%=Url.Action("GetImage", "Image", new { parentId = Model.ParentId }) %>', {}, function(data) 
{
    iphcObject.find('#image').attr('src', data.newImageUrl);
}, 'json');

如果有人知道如何在ASP端完成它，请编辑此帖或创建另一个！

- strager

---

我尝试了类似这样的代码... iphcObject.find('image').attr('src', $.post('<%=Url.Action("GetImage", "Image", new { parentId = Model.ParentId }) %>'));但是它没有起作用... - xspydr

@Jason，让你的请求处理程序返回URL！显然，你不能从客户端这样做。 - strager

服务器端的方法是从数据库中获取内容，然后将其写入响应对象... 我应该让jquery对一个输出文件到页面的页面进行post请求吗？ - xspydr

@Jason，是的，这就是应该做的。如果你从请求中输出的只有图片的URL，那么你可以在我的代码示例中将“json”更改为“text”。 - strager

我让它有点儿工作了。当对话框关闭时，图像会刷新到新图像。但是，如果我立即重新进入对话框并上传新图像，则旧图像不会被新图像替换... 你有什么想法吗？ - xspydr

@Jason，请确保您的浏览器没有缓存您的结果（返回的URL或图像本身）。 - strager

Answer 4

你的 <img> 没有 id 为 image，所以 .find('#image') 没有返回任何元素。

- sunsean

Answer 5

我不懂ASP，但是...你有检查过HTTP头吗？可能是浏览器缓存了图片URL。尝试使用Firefox的LiveHTTPHeaders并查看实际发送到服务器的调用。Firebug在这里也可能有所帮助（它跟踪浏览器中的缓存命中与网络调用）。

- martian

---

绝对不是缓存。我已经采取了以下措施...Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1)); Response.Cache.SetCacheability(HttpCacheability.NoCache); Response.Cache.SetNoStore();这将防止页面被缓存... - xspydr

如果我在模型方法上设置断点，它从未触发。此外，在第二次上传时，LiveHttpHeaders 没有任何操作... - xspydr

如果在第二轮中 LiveHttpHeaders 没有发生任何事情，那么您的浏览器很可能会缓存原始图像。您页面上的缓存标头不起作用。一个技巧可能是在第二/第三个图像 URL 的末尾添加额外的 URL 参数，这样浏览器就被强制刷新 src。 - martian

那么我该如何防止图片被缓存呢？ - xspydr

iphcObject.children().find('#image').attr('src', '<%=Url.Action("GetImage", "Image", new { parentId = Model.ParentId }) %>&tstamp=' + (new Date()).getTime() );类似这样。你可能需要将&更改为?。 - martian