Kendo UI ListView Template in MVC4

Question

I am trying to get image files from the database and bind it to a KendoUI ListView. The problem is that it is not showing images at all.

This is what I have done:

View

 <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;
}

Photo View Model:

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

I am not sure if the problem is caused by the image url setting in the template. as you see it is not actually a url because the image is not saved anywhere except from the database. this is a screenshot of how the listview looks like; simply blank even though there must 15 images displayed!

enter image description here

Please let me know any clues or solutions to this problem.

score 1 · Answer 1 · answered Jul 09 '14 at 10:38

I know this is a bit older, but what you need to do is change the line return Json(photosList.ToList(), JsonRequestBehavior.AllowGet); to the following:

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

If the method ToDataSourceResult is not recognized, you have to add

using Kendo.Mvc.Extensions;

on top of your document.

Matt Millican · Answer 2 · 2014-01-31T18:03:21.840

0

It looks like you're missing a return in your controller (just before the end of your if)

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

EDIT

Also, I noticed this:

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

Shouldn't that be:

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

or something similar?

edited Jan 31 '14 at 18:03

answered Jan 31 '14 at 16:46

Matt Millican

4,044
4
38
55

I tried that too. What Fiddler is showing me is that ImageData is being returned as a 'blob' (a long list of array of integers) and I think what needs to be is have this blob encoded somehow onto an actual image? @mmillican – t_plusplus Feb 01 '14 at 02:42
Are you storing your images as blobs in the database? If so, there are numerous ways out there to display the image. Here's an example (a little outdated, but I think still works): http://stackoverflow.com/a/4619810/976042 – Matt Millican Feb 03 '14 at 19:40

score 0 · Answer 3 · answered May 29 '14 at 15:19

0

It might be to late to answer, but your issue is that the json data being sent back to your view is to large so your images are not showing, rather save your images to a file and then render your images via a URL.

answered May 29 '14 at 15:19

HashSix

105
2
9

Kendo UI ListView Template in MVC4

3 Answers3