我正在尝试从数据库中获取图像文件并将其绑定(bind)到 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>
Controller
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,因为除了数据库之外,图像不会保存在任何地方。这是 ListView 的截图;即使必须显示 15 张图像,也只是空白!
请让我知道这个问题的任何线索或解决方案。
最佳答案
我知道这有点旧,但您需要做的是更改行 return Json(photosList.ToList(), JsonRequestBehavior.AllowGet);
到以下:
return Json(photosList.ToDataSourceResult(request),
JsonRequestBehavior.AllowGet);
如果方法
ToDataSourceResult
无法识别,必须添加using Kendo.Mvc.Extensions;
在您的文档顶部。
关于kendo-ui - MVC4 中的 Kendo UI ListView 模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21483569/