0

A idéia é trocar imagem, depois de update.

Eu tenho o seguinte de código:

<div id="context1" data-toggle="context" data-target="#context-menu1">
    <img id="SizeImage1" src="@Url.Action("StreamImage1", "Account", new { id = Model.Id })" style="cursor:pointer" />
</div>

Script completo:

    <script>
        $(document).ready(function () {
            $("#submit_button").click(function () {
                //mostra loading gif
                $('#loading1').show();
                //desabilita o botão
                document.getElementById("submit_button").disabled = true;
                var formData = new FormData();

                debugger;
                var images = $("#Image1")[0].files;
                for (var i = 0; i < images.length; i++)
                {
                    if(i == 0)
                    {
                        formData.append("Image1", images[i]);
                    }
                    else if(i == 1)
                    {
                        formData.append("Image2", images[i]);
                    }
                    else if(i == 2)
                    {
                        formData.append("Image3",images[i]);
                    }
                    else if(i == 3)
                    {
                        formData.append("Image4",images[i]);
                    }

                }

                $.ajax({
                    cache: false,
                    type: "POST",
                    url: '/Account/Upload',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        if (response.Success)
                        {

                            debugger;
                            //Oculta loading gif
                            $('#loading1').hide();

                            $("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id = Model.Id })");

                        }
                        if (response.ErrorImage)
                        {
                            alert("Erro de imagem");
                        }
                    },
                    error: function (request, status, error)
                    {
                        alert('A chamada para o servidor não está funcionando.')
                    }
                });
            });
        });

function ApagarImagem1(){   
    swal({
        title: "Are you sure?",
        text: "You will not be able to recover this imaginary file!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: false
    },
    function(){

        $.ajax({
            url: '/Account/Apagar_Imagem1',
            type: 'POST',
            data: { imagem :"Imagem1" },
            success: function (response) {
                if (response.Success)
                {
                    $("#SizeImage1").removeAttr("src");
                    swal("Deleted!", "Your imaginary file has been deleted.", "success");

                }
                if(response.Error)
                {
                    swal("Cancelled", "Your imaginary file is safe :)", "error");
                }

            }
        });
    });

}

    </script>

Antes de fazer update de uma nova imagem, ele apaga uma imagem do banco de dados e depois apaga src com código JS removeAttr:

function ApagarImagem1(){
    $.ajax({
        url: '/Account/Apagar_Imagem1',
        type: 'POST',
        data: { imagem :"Imagem1" },
        success: function (response) {
            if (response.Success)
            {
                $("#SizeImage1").removeAttr("src");
            }
        }
});
}

Resultado de HTML:

<img id="SizeImage1" style="cursor:pointer">

Com return "true" de AJAX, eu uso JS para adicionar a imagem.

$.ajax({
    type: "POST",
    url: '/Account/Upload',
    data: formData,
    dataType: 'json',
    cache: false,
    contentType: false,
    processData: false,                                
    success: function (response) {
        if (response.Success)
        {
            $("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id= Model.Id})");
        }
    }
    });

Até agora funciona normal, quando eu faço na terceira vez de "trocar imagem", a imagem continua a mesma. Porque não está passando no "Controller" para pegar a imagem do banco de dados.

Código no Controller:

public ActionResult StreamImage1(int id) // Na terceira vez não entra aqui
        {
           //... Aqui onde pega a imagem no banco de dados
        }

O problema é esse código abaixo:

$("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id = Model.Id})");

Esse código acima, não está fazendo ele passar na ação "StreamImage1" na terceira vez.

Porque na terceira vez não funciona ? Alguma solução ?

0

2 Respostas 2

1

Resolvi problema desativando cache através do Controller:

Código:

[OutputCache(NoStore = true, Location = OutputCacheLocation.None, VaryByParam = "*")]

Exemplo:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public ActionResult StreamImage1(int id) // Sempre entra aqui
        {
           //... Aqui onde pega a imagem no banco de dados
        }
0
 cache: false 

Defini isso no seu AJAX que eliminar a possibilidade de cache e sempre vai fazer a pesquisa na Action do Controller.

10
  • Oi @Edvaldo Farias, editei meu post, e coloquei o "cache: false" no AJAX, não funcionou. Commented 23/11/2016 às 17:19
  • Poderia me manda o script do Ajax inteiro? Commented 23/11/2016 às 17:41
  • sim vou editar meu post Commented 23/11/2016 às 17:45
  • 1
    obrigado pela ajuda :) Commented 23/11/2016 às 18:54
  • 1
    Então realmente era o cache, mas no Controller. Commented 23/11/2016 às 18:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .