通过 AJAX 请求使用 fancybox3 加载图片库

Question

我有一个带有图库的 ASP.NET MVC 4 网页。我试图让 "large image" 通过 AJAX 调用异步加载，因为如果我要预先加载大图像，页面加载时间会太长。

以下是我的看法：

@{
    string srcMain = "";
}

<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script type="text/javascript">

    function getLargeImage(imageID, imageType) {

        $.ajax({
            url: "/Explore/GetLargeImage?i=" + imageID + "&objectType=" + imageType,
            type: "POST",
            dataType: "json",
            success: function (data) {
                return data;
            }
        })
    }

</script>


...

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

                <a data-fancybox="gallery" data-type="ajax" data-src="getLargeImage(@item.ID, @Model.Image.Type);" href="javascript:;">
                    <img src="@srcMain" id="@anchorID" class="tile-image" alt="Image" />
                </a>
            }
        </div>
    </div>
}

...

这是我的控制器中的 JsonResult：

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

我正在遵循 loading content via AJAX 的 fancybox3 模板 - 粘贴在下方：

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
    AJAX content
</a>

我在我的控制器中的 JsonResult 方法上放置了一个断点，但光标从未进入它，所以我在调用该方法时做错了。有人看到我的错误吗？我对如何使示例代码 data-src="my_page.com/path/to/ajax/" 适应我现有的代码感到困惑。它似乎不喜欢我的 javascript 函数调用：data-src="getLargeImage(@item.ID, @Model.Image.Type);" 我应该做些什么不同的事情？

Answer 1

Post MVC 中的操作从消息正文而不是 URI 获取参数。所以，你必须做这样的事情：

    function getLargeImage(imageID, imageType) {
        $.ajax({
            url: "@Url.Action("GetLargeImage", "Explore")",
            type: "POST",
            dataType: "json",
            data: JSON.stringify({ i: imageID, objectType: imageType }),
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                return data;
            }
        });
    }

Answer 2

按需加载大图，不需要使用ajax。有这样的标签：

<a id="id" href="Large Image Url"><img src="Small Image Url"/></a>

点击小图后Fancybox向大图发送请求Url。

你只需要设置它：

$(document).ready(function () {
    $("#id").fancybox({ type: 'image' });
});

例子

以下示例显示了按需加载大图像的最小示例。该示例假设您从以下 url 读取图像：

大：/gallery/getlargeimage/{id} - 服务器处理如何加载图像
小：/gallery/getsmallimage/{id} - 服务器处理如何加载图像

If you expose direct link to the images, you even don't need need actions to handle small and large images. The example is just for learning purpose to show how you can return an image from an action.

图库控制器

public class GalleryController: Controller
{
    public ActionResult Index()
    {
        return View();
    }
    public ActionResult GetLargeImage(int id)
    {
        //Load the large image from filesystem or database 
        var file = Server.MapPath($@"/Images/Large/{id}.jpg");
        return File(file, @"image/jpeg");
    }
    public ActionResult GetSmallImage(int id)
    {
        //Load the large image from filesystem or database 
        var file = Server.MapPath($@"/Images/Small/{id}.jpg");
        return File(file, @"image/jpeg");
    }
}

Index.cshtml

@{Layout = null;}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Gallery</title>
    <script type="text/javascript" 
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" 
        src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" 
        href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function () {
            $("a#example1").fancybox({ type: 'image' });
        });
    </script>
</head>
<body>
    <div>
        <a id="example1" href="/gallery/getlargeimage/1">
            <img alt="example1" src="/gallery/getsmallimage/1" />
        </a>
    </div>
</body>
</html>

通过 AJAX 请求使用 fancybox3 加载图片库

load image gallery using fancybox3 via AJAX request

c#

asp.net

ajax

asp.net-mvc

fancybox