example - fancybox jquery ejemplos

jQuery FancyBox con Ajax

Question

He consultado muchos sitios web y muchas páginas en Stackoverflow, pero ninguno de ellos ha resuelto mi problema todavía. Simplemente, tengo un hyperlink y quiero recuperar una imagen de la base de datos a través de la llamada Ajax y luego mostrarla en la FancyBox emergente de FancyBox . También probé muchas combinaciones diferentes de métodos de acción de Javascript y Controller , pero no lo he logrado, así que visualizo el archivo descargado correctamente. ¿Podría echar un vistazo a mi código y dar un ejemplo de trabajo que contenga todos los métodos necesarios en View y en Controller ? Por otro lado, sería mejor abrir un diálogo para los otros tipos de archivos (es decir, excel, pdf) al abrir FancyBox para archivos de imagen.

Ver:

<a onclick="downloadFile(@Model.ID);">@Model.FileName</a>


function downloadFile(id) {     
    $.ajax({
        url: "/Issue/RenderImage?ID=" + id,
        async: true,
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (response) {
            $(''#fancybox-inner'').html(''<img height="200" width="250" src="data:image/png;base64,'' + response + ''" />'');
        }       
    });
}

Controlador: no hay problema con respecto al método en el controlador y devuelve la imagen correctamente.

[HttpPost]
public virtual JsonResult RenderImage(int id)
{
    string str = System.Convert.ToBase64String(repository.FileAttachments.FirstOrDefault(p => p.ID == id).FileData, 0, repository.FileAttachments.FirstOrDefault(p => p.ID == id).FileData.Length);
    return Json(new { Image = str, JsonRequestBehavior.AllowGet });
}

Answer 1

Esto debería funcionar. Parece que la imagen se almacena como JSON. Si es así, creo que debería convertirlo a Base64 antes de enviarlo al navegador. Ver http://mobile.cs.fsu.edu/converting-images-to-json-objects/

function downloadFile(id) {
    $(''#fancybox-inner'').html(''<img height="200" width="250" src="/Issue/RenderImage?ID=''+id+''" />'');
}

Answer 2

Mejor prueba

success: function (response) {
    $.fancybox({
        content: ''<img height="200" width="250" src="data:image/png;base64,'' + response + ''" />'',
        type: "html"
    });
}  

Me pregunto por qué intenta cargar el contenido dentro de un contenedor de fancybox cuando no muestra ningún código donde ya lo abrió. De todos modos, siempre es mejor lanzar una nueva fancybox con el nuevo contenido (desde la respuesta ajax)

Por supuesto, esto funcionará si la llamada ajax devuelve la respuesta correcta para su etiqueta <img> , pero eso no puedo decirlo.