在剑道网格中显示二进制图像答案

【问题标题】：Display binary image in Kendo grid在剑道网格中显示二进制图像
【发布时间】：2015-05-12 12:06:26
【问题描述】：

我正在尝试在我的剑道网格中显示保存在数据库中的图像。

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


    }

请问我怎样才能做到这一点？提前感谢您的帮助。

【问题讨论】：

您可以将图像转换为 Base64 并使用 ClientTemplate，如 this example。
我试过这个：columns.Bound(c => c.img).ClientTemplate("c. img)' />");但是这一行出现在生成的 HTML 中：
telerik.com/forums/…
谢谢杰伊什。我尝试了此页面上编写的所有内容，但在尝试加载页面时出现以下错误：使用 JSON JavaScriptSerializer 进行序列化或反序列化时出错。字符串长度超过 maxJsonLength 属性设置的值。

标签： c# asp.net-mvc-4 telerik kendo-grid

【解决方案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" );

【讨论】：