在Kendo网格中显示二进制图像

Question

我正在尝试在我的Kendo表格中显示保存在数据库中的图片。

@(Html.Kendo().Grid<DevelopmentNotesProject.Models.NoteForm>()
.Name("grid")
.Columns(columns =>
{
    columns.Bound(c => c.Title).Width(420).ClientTemplate(string.Format("{0}...", "#= formatter(Title) #"));
    columns.Bound(c => c.Text).Width(900).ClientTemplate(string.Format("{0}...", "#= formatter(Text) #"));
    columns.ForeignKey(p => p.languageId, (System.Collections.IEnumerable)ViewData["lang"], "Id", "Name").Title("Language").Width(140).EditorTemplateName("LangDropDown");
    columns.Bound(c => c.img); <-- THIS returns object [object]
    columns.Command(command => { command.Edit(); command.Destroy(); });

})

PS：我表中的列类型为Varbinary(MAX)

我的模型如下：

[Table("note")]
    public class NoteForm
    {
        [Required]
        [Display(Name = "Title")]
        public string Title { get; set; }

        [Required]
        [Display(Name = "Text")]
        public string Text { get; set; }

        [Required]
        [Display(Name = "Language")]  
        public int languageId { get; set; }
        [ForeignKey("languageId")]
        [UIHint("LangDropDown")]
        public virtual Language language { get; set; }

        [Display(Name = "Photo")]  
        public byte[] img { get; set; }


        [Key]
        [System.Web.Mvc.HiddenInput(DisplayValue = false)]
        public int id { get; set; }

        [System.Web.Mvc.HiddenInput(DisplayValue = false)]

        public int userId { get; set; }


    }

我该如何实现这个，请帮忙提供帮助，非常感谢。

- FieryA

---

你可以将图像转换为Base64，并像这个例子中一样使用ClientTemplate。 - Andrei V

我尝试了这个代码： columns.Bound(c => c.img).ClientTemplate("<img src='data:image;base64,@System.Convert.ToBase64String(c =>c.img)' />");但是在生成的HTML中出现了这一行：<img src="data:image;base64,@System.Convert.ToBase64String(c =>c.img)"> - FieryA

http://www.telerik.com/forums/render-image-byte-on-kendo-templates-from-model - Jayesh Goyani

谢谢Jayesh。我尝试了这个页面上写的所有方法，但在加载页面时出现以下错误：使用JSON JavaScriptSerializer进行序列化或反序列化时出错。字符串的长度超过了maxJsonLength属性设置的值。 - FieryA

Answer 1

这对我有效：首先添加一个属性，将字节数组转换为字符串，就像上面链接中所示。

public string Image64{get { return Image != null ? Convert.ToBase64String(Image) : null ; }}

在读取记录时，可以设置MaxJsonLength参数。

    var people= Json( _repository.Employees, JsonRequestBehavior.AllowGet );
    people.MaxJsonLength = int.MaxValue;          

    return people ;

第三步是为您的绑定字段准备一个客户端模板

columns.Bound( employee=> employee.Image64).ClientTemplate( "<img src='" + "data:image/gif;base64,#=Image64#'" ).Title( "Photo" );

- Ashiqullah Sahibzai