如何在 mvc WebGrid 中显示数据库图像 (bytes[])

Question

我正在尝试在 .NET MVC WebGrid 列中显示来自数据库的 byte[] 图像。我正在执行以下步骤

（EF 模型 - 文章）

[Key]
    public int id_Art { get; set; }

    public int id_Pro { get; set; }

    [StringLength(1)]
    public string tipo_Pro { get; set; }

    [Required]
    [StringLength(50)]
    public string nombre_Pro { get; set; }

    [Required]
    [StringLength(100)]
    public string descripcion_Pro { get; set; }

    public byte[] imagen_Pro { get; set; }

    [Required]
    public decimal? precio_Pro { get; set; }

    public int? estatus_Pro { get; set; }

（控制器）

public List<articulos> cargarArticulos(string search, string sort, string sortdir, int skip, int pageSize, out int totalRecord)
    {
        using (DbModel db = new DbModel())
        {
            var v = (from a in db.articulos

                     where
                        a.tipo_Pro.Contains(search) ||
                        a.nombre_Pro.Contains(search) ||
                        a.descripcion_Pro.Contains(search)
                     select a
                     );
            totalRecord = v.Count();
            v = v.OrderBy(sort + " " + sortdir);
            if (pageSize > 0)
            {
                v = v.Skip(skip).Take(pageSize);
            }
            return v.ToList();
        }
    }

（查看）

<div>
            @grid.Table(
                    tableStyle: "table table-responsive table-bordered",
                    headerStyle: "webgrid-header",
                    footerStyle: "webgrid-footer",
                    alternatingRowStyle: "webgrid-alternating-row",
                    rowStyle: "webgrid-row-style",
                    columns: grid.Columns(
                        grid.Column(columnName: "imagen_Pro", header: "IMAGEN", format: ),
                        grid.Column(columnName: "tipo_Pro", header: "TIPO"),
                        grid.Column(columnName: "nombre_Pro", header: "NOMBRE"),
                        grid.Column(columnName: "descripcion_Pro", header: "DESCRIPCION"),
                        grid.Column(columnName: "precio_Pro", header: "PRECIO"),
                        grid.Column(header: "⇨", format: (item) => Html.ActionLink("Ver", "Ver", new { }))
    )
)

其他一切正常，我成功地从控制器中检索列表，并将其显示到 Webgrid 中，唯一的问题是显示存储在我的数据库中的 byte[] 图像，我不知道如何在显示在 webgrid 之前将其转换为 base64 或简单地在列中添加正确的格式。我已经为此工作了几个小时，请帮忙。

grid.Column(columnName: "imagen_Pro", header: "IMAGEN", format: ),

Answer 1

这是一种将字节数组转换为 Base64 并将 Base64 字符串嵌入到网格中的 img 标记中的方法。您应该能够像这样向控制器添加静态方法：

public static String ConvertByteArrayToBase64(int id)
{
    using (var db = new DBModel())
    {
        return Convert.ToBase64String(db.Articulos.Where(c => c.id_Art == id).First().imagen_Pro);
    }
}

然后像这样添加列：

columns: grid.Columns
(
    grid.Column(header: "IMAGEN", format: @<img src="data:image/jpeg;base64,@YourController.ConvertByteArrayToBase64(@item.id_Art)" alt="">))
)

如果是 png 或 gif，请分别将 image/jpeg 替换为 image/png 或 image/gif。

Answer 2

我有类似的任务，但就我而言，我使用了一种非常直接的方法：

控制器

添加以下方法，将从您的数据库中搜索并获取图像：

public ActionResult SetImageThrough(int id)
    {
        var fileById = (from fi in _db.InvMasters
                        where fi.UId== id
                        select new {fi.SampleAttach }).ToList().FirstOrDefault();
        return File(fileById.SampleAttach, "image/jpg");
    }

查看页面

添加使用以下方法：

grid.Column(format:<img src="/ProductPricing/SetImageThrough?@item.UId" alt="Sample" height="50" width="70" /></text>, header: "PRODUCTIMAGE"),

希望这对您展示图片有所帮助。如果是不同的扩展名，您只能将以下内容 ("image/jpg") 更改为 .png，如果是的话。

编码愉快!!!!

如何在 mvc WebGrid 中显示数据库图像 (bytes[])

How to display database image (bytes[]) in mvc WebGrid

c#

sql-server

asp.net-mvc

webgrid