Kendo 来自数据库的自动完成模板 img src

Question

有很多关于如何从静态内容设置图标的例子。例如：

Html.Kendo().AutoComplete()
    .Name("employess")
    .Placeholder("Find Product..")
    .DataTextField("Name")
    .HighlightFirst(true)
    .Template("<span><img src='/Content/Images/default-photo.jpg' " +
    "width='20' height='20' />&nbsp;${data.Name}</span>")
...

是否可以通过${data.ImageId}从数据库中设置图片源？我尝试制作控制器方法并粘贴 Url.Action 而不是 default-photo 但编译器不明白我想做什么。

感谢提前！

Answer 1

如果您的 data 对象中有图像名称并且图像位于您的内容文件夹中，则可以使用 Url.Content() to get the path to it, as showed here。所以你的模板可能是这样的：

.Template("<span><img src='" + Url.Content("~/Images/") + "${data.ImageName}' " +
"width='20' height='20' />&nbsp;${data.Name}</span>")

url 将导致类似于：Content/Images/image.jpg。

但是如果您只有 ID 并且需要生成图像作为 http 响应，您可以为此创建一个操作方法，如 here 所示。所以你的模板将是：

.Template("<span><img src='" + Url.Action("GetImage", "Search") + "/${data.ImageId}' " +
"width='20' height='20' />&nbsp;${data.Name}</span>")

url 将导致类似于：Search/GetImage/1。

在这两种情况下，你都以某种方式 concat ASP.Net 字符串中的 Javascript 变量，如我的一个朋友的 this answer 所示.

Kendo 来自数据库的自动完成模板 img src

Kendo autocomplete template img src from database

javascript

asp.net-mvc

kendo-ui

autocomplete

kendo-template