MVC4 中的 Kendo UI ListView 模板答案

【问题标题】：Kendo UI ListView Template in MVC4MVC4 中的 Kendo UI ListView 模板
【发布时间】：2014-01-31 15:22:14
【问题描述】：

我正在尝试从数据库中获取图像文件并将其绑定到 KendoUI ListView。问题是它根本不显示图像。

这就是我所做的：

查看

 <script type="text/x-kendo-tmpl" id="template">
                <div class="product">
                    <img src="@Url.Content("#:PhotoID# + #:MIMEType#")" />
                </div>
            </script>
            <div id="imageListView2" class="demo-section">
                @(Html.Kendo().ListView<WorcesterMarble.ViewModels.PhotosViewModel>()
                                    .Name("listView")
                                    .TagName("div")
                                    .ClientTemplateId("template")
                                    .DataSource(dataSource =>
                                    {
                                        dataSource.Read(read => read.Action("GetImages", "StockReceiptsGrid").Data("passStockIDToListView"));
                                        dataSource.PageSize(1);
                                    })
                                    .Pageable()
                                    .Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple))
                        //.Events(events => events.Change("onChange").DataBound("onDataBound"))
                )
            </div>

控制器

public JsonResult GetImages([DataSourceRequest] DataSourceRequest request, int stockReceiptID)
{
    var photos = _stockPhotosRepository.GetStocReceiptkPhotos(stockReceiptID).ToList();

    var photosList = new List<PhotosViewModel>();
    //var photosList = new List<FileContentResult>();

    if (photos.Count != 0)
    {
        foreach (var stockPhoto in photos)
        {
            var photoVm = new PhotosViewModel();

            photoVm.PhotoID = stockPhoto.PhotoID;
            photoVm.Image = stockPhoto.ImageData;
            photoVm.MIMEType = stockPhoto.MIMEType;

            // FileContentResult file = File(stockPhoto.ImageData, stockPhoto.MIMEType);

            photosList.Add(photoVm);
        }
        return Json(photosList.ToList(), JsonRequestBehavior.AllowGet);
    }
    else
    {
        return null;
        //FilePathResult file = this.File("/Content/Images/80.jpeg", "image/jpeg");
        //return file;
    }
    return null;
}

照片查看模型：

public class PhotosViewModel
{
    public int PhotoID { get; set; }    
    public byte[] Image { get; set; }
    public string MIMEType { get; set; }
    public int StockReceiptID { get; set; }
}

我不确定问题是否是由模板中的图像 url 设置引起的。如您所见，它实际上不是一个 url，因为除了数据库之外，图像不会保存在任何地方。这是列表视图的截图；即使必须显示 15 张图片，也只是空白！

请让我知道此问题的任何线索或解决方案。

【问题讨论】：

标签： kendo-ui kendo-grid kendo-asp.net-mvc kendo-treeview kendo-dataviz

【解决方案1】：

我知道这有点旧，但您需要做的是将行 return Json(photosList.ToList(), JsonRequestBehavior.AllowGet); 更改为以下内容：

return Json(photosList.ToDataSourceResult(request),
    JsonRequestBehavior.AllowGet);

如果方法ToDataSourceResult无法识别，则必须添加

using Kendo.Mvc.Extensions;

在您的文档顶部。

【讨论】：

【解决方案2】：

您的控制器中似乎缺少返回（就在您的 if 结束之前）

return Json(photosList.ToList(), JsonRequestBehavior.AllowGet);

编辑

另外，我注意到了这一点：

<img src="@Url.Content("#:PhotoID# + #:MIMEType#")" />

不应该是这样的：

<img src="@Url.Content("#:ImageData#")" />

还是类似的？

【讨论】：

我也试过了。 Fiddler 向我展示的是 ImageData 作为“blob”（整数数组的长列表）返回，我认为需要将这个 blob 以某种方式编码到实际图像上？ @mmillican
您是否将图像作为 blob 存储在数据库中？如果是这样，有很多方法可以显示图像。这是一个例子（有点过时，但我认为仍然有效）：stackoverflow.com/a/4619810/976042

【解决方案3】：

回答可能为时已晚，但您的问题是发送回视图的 json 数据太大，因此您的图像没有显示，而是将图像保存到文件中，然后通过 URL 呈现图像.

【讨论】：