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

时间:2015-05-12 12:06:26

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

我试图在我的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; }


    }

我怎样才能实现这一目标? 在此先感谢您的帮助。

1 个答案:

答案 0 :(得分: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 ;

第三个为你的绑定字段设置了一个clienttemplate

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