Asp.net mvc 如何将图标显示为剑道网格单元上的值？

我有一个名为Priority的表，它有一个名为IconUrl的列，用于存储图标的路径，如下所示：

| ID     | Priority      | IconUrl       
------------------------------------------------------------| 
| 0      | Normal        | /../../Content/icons/normal.png  |
| 1      | Urgent        | /../../Content/icons/urgent.png  |
| 2      | Blocker       | /../../Content/icons/blocker.png |

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.PriorityDescription)
           .ClientTemplate(@"<div class='grid-icon' style='background-image: 
                url(#:data.IconUrl#);'></div>").Width("40px");
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
)


<style>
.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}
</style>

我想根据剑道网格上每条记录的图标值显示图标。我尝试了如下所示的一些方法，但都没有解决问题。如何管理仅显示图标图像

columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("~/") + "#=IconUrl#' height='62' width='62'/>");

columns.Bound（c=>c.Priority）.ClientTemplate（“”）；

或

columns.Bound（c=>c.Priority.ClientTemplate（“”）；

问题可能是由url开头的

'/../../'

引起的

打开浏览器开发工具，查看单元格，可以看到有什么url

如果您的内容文件夹位于主目录或项目目录中，则使用

Priority

col中的文本重新创建url可能会起作用

columns.Bound(c => c.Priority).ClientTemplate("<img src='" + Url.Content("~/Content/icons/") + "#=Priority.toLowerCase()#.png' height='62' width='62'/>");

columns.Bound（c=>c.Priority）.ClientTemplate（“”）；

这个。例如，在其他应用程序中包含应用程序。如果传递给函数的字符串的开头没有波浪号，它只会返回url字符串，不做任何更改

因此，在第二个示例中，调用

“'”

将产生与Telerik页面上提到的

相同的结果，您可以如下所示显示图像：

| ID     | Priority      | IconUrl       
------------------------------------------------------------| 
| 0      | Normal        | /../../Content/icons/normal.png  |
| 1      | Urgent        | /../../Content/icons/urgent.png  |
| 2      | Blocker       | /../../Content/icons/blocker.png |

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.PriorityDescription)
           .ClientTemplate(@"<div class='grid-icon' style='background-image: 
                url(#:data.IconUrl#);'></div>").Width("40px");
        columns.Bound(c => c.ContactTitle).Width(190);
        columns.Bound(c => c.CompanyName);
        columns.Bound(c => c.Country).Width(110);
    })
    .HtmlAttributes(new { style = "height: 380px;" })
    .Scrollable()
    .Groupable()
    .Sortable()
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Customers_Read", "Grid"))
    )
)


<style>
.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}
</style>

@（Html.Kendo（）.Grid（））
.名称（“网格”）
.列（列=>
{
columns.Bound（c=>c.PriorityDescription）
.ClientTemplate（@“）.Width（“40px”）；
columns.Bound（c=>c.ContactTitle）.Width（190）；
columns.Bound（c=>c.CompanyName）；
columns.Bound（c=>c.Country）.Width（110）；
})
.HtmlAttributes（新的{style=“height:380px；”}）
.Scrollable（）
.Groupable（）
.Sortable（）
.Pageable（Pageable=>Pageable
.刷新（真）
.页面大小（真）
.按钮计数（5））
.DataSource（DataSource=>DataSource
.Ajax（）
.Read（Read=>Read.Action（“客户读取”、“网格”））
)
)
.客户照片{
显示：内联块；
宽度：32px；
高度：32px；
边界半径：50%；
背景尺寸：32px 35px；
背景位置：中心；
垂直对齐：中间对齐；
线高：32px；
盒影：插入0 1px#999，插入0 0 10px rgba（0,0,0,2）；
左边距：5px；
}
.客户名称{
显示：内联块；
垂直对齐：中间对齐；
线高：32px；
左：3倍；
}

---

希望这有帮助…

事实上，问题是由html中的语法引起的，而不是/。/../（我已经尝试过几种形式）。因此，可以使用

columns.Bound（c=>c.PriorityDescription）.ClientTemplate（@“”）.Width（“40px”）非常感谢。投票赞成+。