如何从数据库将图像加载到kendo ui网格中

时间:2012-05-29 04:13:05

标签: asp.net-mvc visual-studio-2010 kendo-ui

我的数据库中有一个名为Image的字段。我想直接从数据库加载图像。我给出了像这样的模板 {field:“Image”,标题:“image”,模板:“”}, 它显示的是带有十字标记的图像。请告诉我如何获取图像?

2 个答案:

答案 0 :(得分:0)

我们已发布a detailed blog post that demonstrates how to expose data via ASP.NET Web API。一旦您的数据可以通过HTTP访问,通过Kendo UI的DataSource组件绑定Grid小部件是微不足道的。

答案 1 :(得分:0)

public JsonResult GetData([DataSourceRequest] DataSourceRequest request)
        {
            var list = db.imageModels.ToList();
            return Json(list.ToDataSourceResult(request));
        }



@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.DataSource(datasource => datasource
    .Ajax()
    .Model(model => model.Id(p=>p.IMAGESIZE_ID))
    .Create(create => create.Action("Create", "Imagetest"))
    .Update(update => update.Action("Editing_Update", "Imagetest"))
    .Destroy(delete => delete.Action("Delete", "Imagetest"))
    .Read(read => read.Action("GetData", "Imagetest"))
        .Model(model =>
        {
            model.Field(p => p.IMAGESIZE_ID).Editable(true);
            model.Id(p => p.IMAGESIZE_ID);
            model.Field(p => p.IMAGESIZE_ID).Editable(false);
           // model.Field(p => p.isenabled).DefaultValue(true);
        })
    )
.Columns(columns =>
{
    //columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID#  />").Width(50);
    columns.Bound(c => c.IMAGESIZE_ID).ClientTemplate("<input type='checkbox' value #=IMAGESIZE_ID#  />").Title("Image No");
    columns.Bound(c => c.IMAGESIZE_NAME).Width(140).Title("Image Name");
    columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src='" + Url.Content("~/Images/") + "#=IMAGESIZE_NAME#'/>").Title("Image");
    columns.Bound(c => c.created_by).Title("Created By");
    columns.Bound(c => c.created_date).Title("Created Date");
    columns.Bound(c => c.modified_by).Title("Modified By");
    columns.Bound(c => c.modified_date).Title("Modified Date");
    columns.Command(command =>
        {
            command.Edit(); command.Destroy();
        });
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable =>editable.Mode(GridEditMode.PopUp))//TemplateName("ImageModel")
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(5)
))