jQuery FancyBox con Ajax

He visto 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 Controller y Javascript , pero no lo he hecho, así que muestre el archivo descargado correctamente. ¿Podría por favor ver mi código y dar un ejemplo funcional que contenga todos los métodos necesarios en View y en Controller ? Por otro lado, sería mejor abrir un cuadro de diálogo para los otros tipos de archivos (es decir, excel, pdf) al abrir FancyBox para archivos de imagen.

Ver:

 @Model.FileName 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(''); } }); } 

Controlador: No hay ningún 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 }); } 

Mejor bash

 success: function (response) { $.fancybox({ content: '', 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 un nuevo fancybox con el nuevo contenido (de la respuesta de ajax)

Por supuesto, esto funcionará si la llamada ajax está devolviendo la respuesta correcta para su etiqueta , pero eso no puedo decirlo.

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

 function downloadFile(id) { $('#fancybox-inner').html(''); }