jQuery的的fancybox使用Ajax [英] jQuery FancyBox with Ajax

问题描述

我看很多网站和＃1多页，但他们都不是解决我的问题呢。简单地说，我有一个超链接，我想通过 Ajax来检索数据库中的图片通话，然后显示它的fancybox 弹出。我也试过 Javascript的和控制器操作方法很多不同的组合，但没有管理，以便正确显示所下载的文件。能否请你看看我的code和得到含在查看所有必要的方法工作的例子和控制器？在另一方面，这将是更好地打开一个对话框，为其他文件类型（即脱颖而出，PDF格式），同时打开的fancybox 的图像文件。

查看：

 ＆LT;一的onclick =downloadFile（@ Model.ID）;＆GT; @ Model.FileName＆LT; / A＆GT;


功能downloadFile（ID）{
    $阿贾克斯（{
        网址：？/问题/ RenderImage ID =+ ID，
        异步：真正的，
        键入：POST，
        数据类型：JSON，
        的contentType：应用/ JSON的;字符集= UTF-8，
        成功：函数（响应）{
            $（'＃的fancybox-内）HTML（'＆LT; IMG高度=200宽度=250SRC =数据：图像/ PNG; BASE64，+响应+/＆GT;'）。
        }
    }）;
}
 

控制器：有关于在控制器的方法没有问题，它返回的图像正常

  [HttpPost]
公共虚拟JsonResult RenderImage（INT ID）
{
    字符串str = System.Convert.ToBase64String（repository.FileAttachments.FirstOrDefault（P =＆GT; p.ID == ID）.FileData，0，repository.FileAttachments.FirstOrDefault（P =＆GT; p.ID == ID）.FileData 。长度）;
    返回JSON（新{图片=海峡，JsonRequestBehavior.AllowGet}）;
}
 

解决方案

最好尝试

 成功：函数（响应）{
    $ .fancybox（{
        内容：'＆LT; IMG高度=200宽度=250SRC =数据：图像/ PNG; BASE64，+响应+/＆GT;'，
        类型：HTML
    }）;
}
 

我不知道为什么你想加载的fancybox容器里面的内容时，你不显示任何code，你已经打开了它。不管怎么说，它总是更好地推出一个新的fancybox与新的内容（从Ajax响应）

当然，这将工作，如果Ajax调用将返回你的＆LT正确的响应; IMG＆GT; 标签，但我不能告诉

I have look at many web sites and many pages on Stackoverflow, but none of them has solved my problem yet. Simply, I have a hyperlink and I want to retrieve an image from database via Ajax call and then display it on FancyBox popup. I also tried many different combinations of Javascript and Controller action methods, but have not managed so display the downloaded file properly. Could you please have a look at my code and give a working example containing all the necessary methods in View and in Controller? On the other hand, it would be better to open a dialog for the other file types (i.e. excel, pdf) while opening FancyBox for 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 to the method in the Controller and it returns the image properly.

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

解决方案

Better try

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

I wonder why you trying to load the content inside a fancybox container when you don't show any code where you already opened it. Anyways, it's always better to launch a new fancybox with the new content (from ajax response)

Of course, this will work if the ajax call is returning the correct response for your <img> tag, but that I cannot tell.

这篇关于jQuery的的fancybox使用Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！