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/

点击链接放大图片

2 个答案: