显示图像 devexpress gridview，这是火箭科学吗？答案

【问题标题】：display image devexpress gridview, is this a rocket science?显示图像 devexpress gridview，这是火箭科学吗？
【发布时间】：2012-03-22 14:26:17
【问题描述】：

假设我有在 devexpress gridview 中使用的 ViewModel。在该视图中，我像这样在 devexpress gridview 中显示我的数据

@Html.DevExpress().GridView(
    settings =>
    {
        settings.Name = "myGridView";
        settings.KeyFieldName = "Id";
....
    var column = settings.Columns.Add("Id", "Id");
    column = settings.Columns.Add("Title", "MyTitle");
    ...    
    }).Bind(Model).GetHtml()

我的模型是 IEnumerable 这段代码一切正常。现在我想在 Id 列之前或之后在该 gridview 中显示图像。所以我发现这应该用Html.DevExpress().BinaryImage()来完成但我现在被困在这里一段时间了。首先描述我的视图模型以及我的图像是如何存储的。我的模特有List<Photo> 收藏。我以FileContentResult 获取图像。

所以我知道我应该使用这个Html.DevExpress().BinaryImage()，但我不知道。这是我应该遵循的示例。

column = settings.Columns.Add("", "Photos");
        Html.DevExpress().BinaryImage(
            imageSettings =>
            {
                //imageSettings.Name = "Photo";
                imageSettings.Width = 100;
                imageSettings.Height = 100;
            })
            .Bind(((System.Data.Linq.Binary)DataBinder.Eval(Model, "Photo")).ToArray())
            .Render();

更新： 我想我应该尝试这个解决方案。这里的问题是我想在我的网格中显示照片集合中的第一张图像。我尝试使用下面的代码，但没有运气。没有错误。

var photoColumn = settings.Columns.Add("Photos[0].ImageData", "Foto");
        photoColumn.Visible = true;
        photoColumn.Width = 20;
        photoColumn.FieldName = "Photo.ImageData";
        photoColumn.ColumnType = MVCxGridViewColumnType.BinaryImage;
        DevExpress.Web.ASPxEditors.BinaryImageEditProperties properties = (DevExpress.Web.ASPxEditors.BinaryImageEditProperties)photoColumn.PropertiesEdit;
        properties.ImageHeight = 50;
        properties.ImageWidth = 50;

【问题讨论】：

标签： asp.net-mvc gridview devexpress

【解决方案1】：

您不需要直接在 GridView 中使用 BinaryImage，因为MVCxGridViewColumnType 支持 BinaryImage。
相关链接-GridView - How to load binary image within BinaryImage column

请同时查看 Grid View - Templates 演示，该演示演示如何在数据行中使用 BinaryImage。

【讨论】：

【解决方案2】：

在您的情况下，需要自定义 DataItemTemplate 并在其中自定义 BinaryImage，如下所示：

settings.Columns.Add(column => {
    column.SetDataItemTemplateContent(c => {
        Html.DevExpress().BinaryImage(
            imageSettings => {
                imageSettings.Name = "Photo" + c.KeyValue;
                imageSettings.Width = 50;
                imageSettings.Height = 50;
            })
            .Bind(Here_Your_Code_To_Retrieve_Image_From_Current_DataItem)
            .Render();
    });
});

【讨论】：