ASP.NET MVC4中Fancybox3通过AJAX异步加载大图失败排查

你在ASP.NET MVC4中尝试用Fancybox3结合AJAX异步加载大图，但控制器的GetLargeImage方法断点从未触发，核心原因是Fancybox3的data-type="ajax"模式下，data-src需要直接指定请求URL，而不是JavaScript函数调用——Fancybox并不会执行你写的getLargeImage函数，自然不会向控制器发送请求。

解决方案 #

我们可以从调整视图标签、控制器请求方式和Fancybox配置这几个方面修正：

1. 修正视图中的<a>标签 #

把原来调用函数的data-src改成直接拼接请求URL，不需要自定义的getLargeImage函数：

@foreach (var item in Model.Image.ExhibitionImages) {
<div class="tile-outer">
<div class="tile-inner">
@if (item.Image_MimeType_MediumPad != null) {
srcMain = "data:" + item.Image_MimeType_MediumPad + ";base64," + @Html.Raw(Convert.ToBase64String(item.Image_Data_MediumPad));
<!-- 直接把请求URL放到data-src中 -->
<a data-fancybox="gallery" data-type="ajax" data-src="/Explore/GetLargeImage?i=@item.ID&objectType=@Model.Image.Type" href="javascript:;">
<img src="@srcMain" id="@anchorID" class="tile-image" alt="Image" />
</a>
}
</div>
</div>
}

2. 匹配控制器的请求方式 #

Fancybox默认用GET请求加载AJAX内容，你需要调整控制器的特性：

方案一：改为GET请求（推荐，更简单）

把控制器的[HttpPost]改成[HttpGet]：

[HttpGet]
public JsonResult GetLargeImage(int i, int objectType) {
    var imageResult = LoadSP_ImageLarge("sp_ImageLarge", i, objectType);
    List<ImageLarge> list_ImageLarge = new List<ImageLarge>();
    foreach (var row in imageResult) {
        list_ImageLarge.Add(new ImageLarge {
            Image_Data_string = (row.Image_Data != null) ? string.Format("data:" + row.Image_MimeType + ";base64,{0}", Convert.ToBase64String(row.Image_Data)) : null
        });
    }
    string imageString = list_ImageLarge.FirstOrDefault()?.Image_Data_string ?? "";
    return Json(imageString, JsonRequestBehavior.AllowGet);
}

方案二：保留POST请求（需额外配置Fancybox）

如果必须用POST，需要初始化Fancybox时指定请求类型：

<script type="text/javascript">
$(function() {
    // 初始化Fancybox并配置AJAX为POST
    $("[data-fancybox='gallery']").fancybox({
        ajax: {
            type: 'POST'
        }
    });
});
</script>

3. 让Fancybox正确显示返回的图片 #

因为你控制器返回的是base64格式的图片字符串，需要让Fancybox把它转换成图片元素。可以选择两种方式：

方式一：控制器直接返回HTML（更直观）

修改控制器返回包含图片的HTML，Fancybox会直接渲染：

[HttpGet]
public ActionResult GetLargeImage(int i, int objectType) {
    var imageResult = LoadSP_ImageLarge("sp_ImageLarge", i, objectType);
    var imageRow = imageResult.FirstOrDefault();
    
    if (imageRow?.Image_Data != null) {
        var imageSrc = string.Format("data:{0};base64,{1}", imageRow.Image_MimeType, Convert.ToBase64String(imageRow.Image_Data));
        return Content($"<img src='{imageSrc}' alt='Large Exhibition Image' style='max-width:100%;' />");
    }
    
    return Content("<p>Large image not found</p>");
}

方式二：在Fancybox回调中处理JSON返回值

如果保留返回JSON的逻辑，在Fancybox的afterLoad回调中把字符串转换成图片：

<script type="text/javascript">
$(function() {
    $("[data-fancybox='gallery']").fancybox({
        ajax: {
            type: 'GET', // 对应控制器的请求方式
            dataType: 'json'
        },
        afterLoad: function(instance, current) {
            // 将返回的base64字符串转为图片元素
            current.content = `<img src="${current.content}" alt="Large Image" style="max-width:100%;" />`;
        }
    });
});
</script>

这样调整后，点击缩略图时Fancybox就会正确向控制器发送请求，加载并显示大图了。

内容的提问来源于stack exchange，提问作者sion_corn