Geek Answers Handbook

JQuery FancyBox with Ajax

I look at many websites and many pages on Stackoverflow, but none of them have solved my problem yet. I just have it hyperlink, and I want to get the image from the database using a call Ajax, and then display it on a pop-up window FancyBox. I also tried many different combinations of methods Javascriptand Controller, but could not display the downloaded file so correctly. Could you look at my code and give a working example containing all the necessary methods in Viewand Controller? On the other hand, it would be better to open a dialog for other types of files (i.e. excel, pdf) by opening it FancyBoxfor image files.

View:

<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 + '" />');
        }       
    });
}


Controller: There is no problem regarding the method in the controller and it correctly returns the image.

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

. , JSON. , , Base64, . . 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+'" />');
}
0

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

, fancybox, , . , fancybox ( ajax)

, , ajax <img>, .

0

More articles:


All Articles