点击链接放大图片

Question

  @foreach (var item in Model)
  { 
        <img src='ShowShowcaseImage/@Html.Encode(item.ProductID)' id='@item.ProductID'  />
        <b>@Html.DisplayFor(m => item.ProductName)</b>
        <a href="#"  class="enlargeImg" id="@item.ProductID">Enlarge</a>
  }

<div id="EnlargeContent" class="content">
    <span class="button bClose"><span>X</span></span>

    <div style="margin: 10px;" id="imageContent">
    </div>

    <p align="center"></p>
</div>

//弹出javascript

$('.enlargeImg').bind('click', function (e) {
            $.post('/Home/EnlargeShowcaseImage/' + $(this).attr('id'), null, function (data) {
         document.getElementById("imageContent").innerHTML +=  data;
            });

            $('#EnlargeContent').bPopup();
 });
    });

// C#方法

  public ActionResult EnlargeShowcaseImage(string id)
            {

                var imageData = //linq query for retrive bytes from database;
                StringBuilder builder = new StringBuilder();
                if (imageData != null)
                    builder.Append("<img src='" + imageData.ImageBytes + "' />");
                return Json(builder);

            }

我想在单击放大链接时显示放大图像的弹出窗口。图像以字节存储在数据库中。每个产品的数据库中存储了两张图像——一张是缩略图，另一张是放大的。我正在显示缩略图，我想在单击放大链接时显示放大的图像。我无法从数据库中检索它。

Answer 1

我无法从数据库中检索它

所以您的问题是关于从数据库中检索图像，对吧？它与 ASP.NET MVC 完全无关？

很遗憾，您没有告诉我们您是使用一些 ORM 框架来访问您的数据库还是使用普通的 ADO.NET。假设您使用的是普通的 ADO.NET：

public byte[] GetImage(string id)
{
    using (var conn = new SqlConnection("YOUR CONNECTION STRING COMES HERE"))
    using (var cmd = conn.CreateCommand())
    {
        conn.Open();
        // TODO: replace the imageData and id columns and tableName with your actual
        // database table names
        cmd.CommandText = "SELECT imageData FROM tableName WHERE id = @id";
        cmd.Parameters.AddWithValue("@id", id);
        using (var reader = cmd.ExecuteReader())
        {
            if (!reader.Read())
            {
                // there was no corresponding record found in the database
                return null;
            }

            const int CHUNK_SIZE = 2 * 1024;
            byte[] buffer = new byte[CHUNK_SIZE];
            long bytesRead;
            long fieldOffset = 0;
            using (var stream = new MemoryStream())
            {
                while ((bytesRead = reader.GetBytes(reader.GetOrdinal("imageData"), fieldOffset, buffer, 0, buffer.Length)) > 0)
                {
                    stream.Write(buffer, 0, (int)bytesRead);
                    fieldOffset += bytesRead;
                }
                return stream.ToArray();
            }            
        }
    }
}

如果你正在使用一些 ORM，它可能很简单：

public byte[] GetImage(string id)
{
    using (var db = new SomeDataContext())
    {
        return db.Images.FirstOrDefault(x => x.Id == id).ImageData;
    }
}

然后在你的控制器动作中：

public ActionResult EnlargeShowcaseImage(string id)
{
    var imageData = GetImage(id);
    if (imageData != null)
    {
        // TODO: adjust the MIME Type of the images
        return File(imageData, "image/png");
    }

    return new HttpNotFoundResult();
}

在您的视图中，您应该创建一个 <img> 标记，以便在单击按钮时指向此控制器操作：

$('.enlargeImg').bind('click', function (e) {
    $('#imageContent').html(
        $('<img/>', {
            src: '/Home/EnlargeShowcaseImage/' + $(this).attr('id')
        })
    );
    $('#EnlargeContent').bPopup();
});

但是像这样在 javascript 中将 url 硬编码到您的控制器操作是非常糟糕的做法，因为当您部署应用程序时它可能会中断。如果您决定更改路线的模式，它也可能会中断。你不应该像这样硬编码网址。我建议您在服务器上生成此 url。

例如，我看到您订阅了一些 .enlargeImage 元素。让我们假设这是一个锚。以下是正确生成它的方法：

@Html.ActionLink("Enlarge", "EnlargeShowcaseImage", "Home", new { id = item.Id }, new { @class = "enlargeImage" })

然后调整点击处理程序：

$('.enlargeImg').bind('click', function (e) {
    // Cancel the default action of the anchor
    e.preventDefault();

    $('#imageContent').html(
        $('<img/>', {
            src: this.href
        })
    );
    $('#EnlargeContent').bPopup();
});

Answer 2

试试 jQuery，

这是一个 http://superdit.com/2011/06/11/hover-image-zoom-with-jquery/

http://demo.superdit.com/jquery/zoom_hover/