Question

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

（EF模型 - Articulos）

[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中显示，或者只是在列中添加righ格式。我已经工作了几个小时了，请帮忙。

grid.Column（columnName：“imagen_Pro”，标题：“IMAGEN”，格式:)，

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 / png或image / gif替换image / jpeg。

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 []）

2 个答案: