包含 javascript 条件的 ClientTemplate 表达式答案

【问题标题】：ClientTemplate expression to include javascript conditional包含 javascript 条件的 ClientTemplate 表达式
【发布时间】：2018-10-11 17:41:09
【问题描述】：

使用 Kendo UI MVC 已经有一段时间了，需要在网格的一个字段中的复选框上放置一些条件逻辑。

网格中需要评估的字段是

在此处停止示例
https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

columns.Bound(p => p.ProductName).ClientTemplate(
    "# if (HasIcon == true) { #" +
        "<img src='" + Url.Content("~/Content/icons/") + "#= ProductID #.png' alt='#= ProductName # icon' />" +
    "# } else { #" +
        "#: ProductName #" +
    "# } #"
);

如何格式化条件内的测试以使用网格字段值？例如
测试 ProductID 是否是这样的特定值？

columns.Bound(p => p.ProductName).ClientTemplate(
    "# if (#= ProductID # == 123) { #" +
        "<img src='" + Url.Content("~/Content/icons/") + "#= ProductID #.png' alt='#= ProductName # icon' />" +
    "# } else { #" +
        "#: ProductName #" +
    "# } #"
);

【问题讨论】：

标签： kendo-grid kendo-asp.net-mvc

【解决方案1】：

由于客户端模板的复杂性，我个人倾向于使用javascript函数方法 columns.Bound(p => p.ProductName).ClientTemplate("#= getProductIcon(data, Url.Content("~/Content/icons/")#);

然后在一个 js 脚本块中

function getProductIcon(data, imgUrl) {
   if (data.ProductID == 123)
      return "<img src='" + imgUrl + data.ProductID + ".png' alt='" + data.ProductName + " icon' />";
   else
      return data.ProductName;
}

只需确保在实例化网格之前加载您的脚本，否则您将遇到getProductIcon undefined 或一些类似的错误。此外，在您的 javascript 函数上添加调试器并真正查看正在发生的事情并验证数据输入/输出会更容易。

请原谅上面的任何错别字，我目前不在可以验证剃刀语法的位置。

【讨论】：