Обновить изображение Src

Question

к ... Страгер смог мне немного помочь. Тем не менее, это все еще не работает совершенно правильно. Нужен кто-то, кто знает и MVC, и JQuery, пожалуйста ...

У меня есть страница с изображением, при нажатии на которое открывается диалоговое окно, в котором можно загрузить файл. После закрытия диалога изображение должно обновляться с тем, что было загружено / сохранено в базе данных ...

Все отлично работает с первого раза. Однако, если я попытаюсь загрузить второе изображение; 1-е изображение все еще отображается. Также не похоже, что мой метод контроллера вызывается во второй раз ... Ниже мой код ...

Я также исключил, что страница кэшируется. Опять же, метод контроллера не вызывается второй раз ...

Контроллер

[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);
}

View

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

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>

Answer 2

Я не знаю 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, отредактируйте этот пост или сделайте еще один!

Answer 3

Что такое #image не должно быть найдено ('img')? Или назначьте IMG идентификатор изображения.

Answer 4

Я не знаю ASP, но ... Вы проверили заголовки HTTP? Возможно, URL-адрес изображения кэшируется браузером. Попробуйте LiveHTTPHeaders для Firefox и посмотрите, какие вызовы действительно поступают на сервер. Здесь также может помочь Firebug (он отслеживает попадания в кеш в браузере по сравнению с сетевыми вызовами).

Answer 5

Ваш <img> не имеет идентификатора image, поэтому .find('#image') не возвращает никаких элементов.