asp.net-mvc - データベースから剣道UIグリッドに画像をロードする方法

Question

データベースにImageという名前のフィールドがあります。データベースから直接画像をロードしたい。私は次のようなテンプレートを与えました：

{ field: "Image", title: "image", template:"<img src ='#= Image #'/>"}

クロスマーク付きの画像を表示しています。どうすれば画像を取得できますか？

Answer 1

ASP.NET Web API を介してデータを公開する方法を示す詳細なブログ投稿を公開しました。HTTP 経由でデータにアクセスできるようになったら、Kendo UI の DataSource コンポーネントを介してグリッド ウィジェットをバインドするのは簡単です。

Answer 2

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)
))