如何在 mvc WebGrid 中显示数据库图像（字节 []）答案

【问题标题】：How to display database image (bytes[]) in mvc WebGrid如何在 mvc WebGrid 中显示数据库图像（字节 []）
【发布时间】：2018-01-03 21:47:55
【问题描述】：

我正在尝试在 .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[] 图像，我不知道如何之前将其转换为 base64 以显示在 webgrid 中，或者只是在列中添加正确的格式。我已经为此工作了几个小时，请帮忙。

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

【问题讨论】：

标签： c# sql-server asp.net-mvc webgrid

【解决方案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。

【讨论】：

首先非常感谢您，我认为您的解决方案正是我所需要的，唯一的问题是当我在这部分输入控制器的名称（ArticuloController）时@->YourController
尝试使用它所在的命名空间来限定名称。这是一个静态方法，因此您不需要控制器的实例，只需命名空间.类名称。在我的示例中，它看起来像这样：@WebApplication1.Controllers.ImageTablesController.ConvertByteArrayToBase64(@item.id)
感激不尽！这就是我所需要的，我只是不知道如何从视图中的控制器调用静态方法。再次感谢你！希望这对那里的许多人有所帮助

【解决方案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（如果是这种情况）。

编码愉快！！！！

【讨论】：