如何在 mvc 中的 kendo 网格中添加图像？

Question

你好任何人都可以告诉我如何从数据库中向 kendo 网格列添加图像。实际上我从早上开始尝试但没有成功。

@(Html.Kendo().Grid<TelerikMvcAppCombo.Models.ImageModel>()
.Name("grdImageModel")
.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#  />");
    columns.Bound(c => c.IMAGESIZE_NAME).Width(140);
    columns.Bound(c => c.IMAGESIZE_DESC).ClientTemplate("<img src=@Url.Content(~/Images/normal_234.png)");
    columns.Bound(c => c.created_by);
    columns.Bound(c => c.created_date);
    columns.Bound(c => c.modified_by);
    columns.Bound(c => c.modified_date);
})
.HtmlAttributes(new { style = "height: 580px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
    .Refresh(true)
    .PageSizes(true)
    .ButtonCount(10)
)
.DataSource(datasource => datasource
    .Ajax()
    .Read(read => read
            .Action("GetData", "Image")
          ))

)

Answer 1

你可以这样实现：

HTML

columns.Bound(u => u.Image).ClientTemplate("#=GetImage(data.Image)#").HtmlAttributes(new { style = "text-align: center; width: 30%; min-width: 60px;" });

Javascript

function GetImage(image) {
    var returnString = '<img src="~/Images/normal_234.png" title=\"image\" height=\"24\" alt=\"image\"/>';   
    return returnString;
}