如何将图片从数据库调用到Lightbox Jquery？

Question

有没有办法把图片从我的数据库调用到我的lightbox jquery。我想调用许多图片到我的图片库：

<%--using multiple="" images="" in="" a="" sequence="", link="" is="" thumbnail=""of="" image--=""%>

          <div>
            Birds<br /><br />

            <a href="images/AmericanGoldfinch_male.jpg" rel="lightbox[roadtrip2]" 
            title="American Goldfinch">
              <img src="images/AmericanGoldfinch_male.JPG" width="60" height="60" 
              alt="" />
           </a>

             <a href="images/birdgroup1.jpg" rel="lightbox[roadtrip2]" 
            title="Mixed Birds">
              <img src="images/birdgroup1.JPG" width="60" height="60" alt="" />
            </a> 
            <a href="images/doves.jpg" rel="lightbox[roadtrip2]" 
            title="Mourning Doves">
              <img src="images/doves.JPG" width="60" height="60" alt="" />
            </a>
            <a href="images/goldfinch_fiesta.jpg" rel="lightbox[roadtrip2]" 
            title="American Goldfinches">
              <img src="images/goldfinch_fiesta.JPG" width="60" height="60" alt="" />
            </a>

            <a href="images/hummingbird.jpg" rel="lightbox[roadtrip2]" 
            title="Ruby Throated Hummingbird">
              <img src="images/hummingbird.JPG" width="60" height="60" alt="" />
            </a>

            <a href="images/RoseBreastedGrosbeak_male.jpg" 
            rel="lightbox[roadtrip2]" 
            title="Rose Breasted Grosbeak">
              <img src="images/RoseBreastedGrosbeak_male.JPG" width="60"                   height="60" alt="" />
            </a>

         </div>
        </form>
 </body>

​

我将把什么放到我的查询中？

Answer 1

我建议使用HTTP处理程序，如下所示：

public class ImageHandler : IHttpHandler 
{
    public void ProcessRequest(HttpContext context)
    {
        // Grab ID from query string
        int id = Convert.ToInt32(context.Request.QueryString["roomID"]);

        // Logic here to retrieve image from database

        // Write image to context object to return to browser

        // Set content type to type of image, change to whatever you need it to be
        context.Response.ContentType = "image/gif";
    }

    public bool IsReusable 
    {
        get {
            return false;
        }
    }
}

然后，您可以在客户端代码中调用HTTP处理程序，如下所示：

<img src="ImageHandler.ashx?id=1" />

Answer 2

如果视图中的图像只是对图像资源的引用，如下所示：

images/AmericanGoldfinch_male.jpg

然后，您可以遍历数据库记录以生成图像的标记。例如，假设在您的模型上，您已经用图像文件的URL和标题填充了一个名为Images的IEnumerable<SomeCustomObject>。在这种情况下，您的视图将包含如下内容：

<div>
    Birds<br /><br />

    @foreach (var image in Model.Images)
    {
    <a href="@image.Url" rel="lightbox[roadtrip2]" title="@image.Title">
        <img src="@image.Url" width="60" height="60" alt="" />
    </a>
    }
</div>

这将为模型中的所有图像动态生成与您手动创建的相同的标记。

下一个问题就变成了.这些图像是通过URL从数据库引用的，还是实际上存储在数据库中？如果是后者，那么您可能要做的就是创建一个单独的操作方法来充当" image“本身，它动态地从数据库返回图像。首先，您必须更改上面的代码才能使用该操作。假设模型上的是图像ID而不是URL，如下所示：

<div>
    Birds<br /><br />

    @foreach (var image in Model.Images)
    {
    <a href="@Url.Action("ActionName", "ControllerName", new { id = image.ID })" rel="lightbox[roadtrip2]" title="@image.Title">
        <img src="@Url.Action("ActionName", "ControllerName", new { id = image.ID })" width="60" height="60" alt="" />
    </a>
    }
</div>

现在的不同之处在于，不是对图像使用静态URL，而是基于动作名称、控制器名称和图像的ID动态创建一个作为路由值的URL。接下来，您需要创建操作方法。如果图像只是来自数据访问层的一个byte[]，那么您可以让该操作返回一个File结果。如下所示：

public ActionResult ActionName(int id)
{
    var file = Files.Get(id); // this would be replaced with however you get your file from the database
    return File(file.Data, file.ContentType, file.Name);
}

当然，这是假设您还将名称和内容类型与文件一起存储在数据库中。如果您将原始文件数据存储在数据库本身中，那么至少也存储它的内容类型是一个非常好的主意。