ASP.Net Core MVC中Telerik Kendo Grid如何将Null值转为空字符串？

问题描述 #

我正在开发基于ASP.Net Core MVC的应用，使用Telerik Kendo Grid组件。
网格列定义如下：

columns.Bound(x => x.PrimaryContact.EmailAddress)
       .ClientTemplate("#= PrimaryContact ? PrimaryContact.EmailAddress : '' #")

当前代码可正常运行，但当PrimaryContact不为null，但其内部的EmailAddress属性为null时，页面会显示“null”而非空字符串。请问该如何解决这个问题？

是否可以在.ClientTemplate中添加逻辑处理？或者能否通过jQuery将所有Null值替换为空字符串？

我的现有jQuery代码如下：

function onDataBound(e) {
    const grid = this;
    grid.table.find("tr").each(function () {
        const dataItem = grid.dataItem(this);
        const text = dataItem.IsActive ? 'Active' : 'Inactive';

        if (dataItem.IsActive) {
          //code here
        }
        else {
          //code here
        }
    });
}

更新
我尝试通过以下方式访问属性：

const test = dataItem.PrimaryContact.EmailAddress;
if (test === null)
{
  dataItem.PrimaryContact.EmailAddress.val = "";
}

控制台能输出我想要修改的3个值，但无法完成替换，我尝试访问.val属性但没有效果。

解决方案1：优化ClientTemplate逻辑 #

直接在ClientTemplate里嵌套双重判断，同时处理PrimaryContact和EmailAddress为null的场景，修改后的列定义如下：

columns.Bound(x => x.PrimaryContact.EmailAddress)
       .ClientTemplate("#= PrimaryContact && PrimaryContact.EmailAddress ? PrimaryContact.EmailAddress : '' #")

如果想要逻辑更清晰，也可以用Kendo模板的if语句写法：

columns.Bound(x => x.PrimaryContact.EmailAddress)
       .ClientTemplate("# if (PrimaryContact && PrimaryContact.EmailAddress) { # #= PrimaryContact.EmailAddress # # } else { # '' # } #")

这样不管是PrimaryContact为null，还是EmailAddress为null，都会显示空字符串，无需额外JS处理。

解决方案2：修改onDataBound事件的jQuery代码 #

你之前的代码问题在于：直接修改dataItem的属性不会自动同步到页面DOM，而且EmailAddress是数据对象的普通属性，不存在.val()方法（这是表单元素的方法）。正确的做法是定位到对应的单元格，直接替换文本内容：

function onDataBound(e) {
    const grid = this;
    grid.table.find("tr").each(function () {
        const dataItem = grid.dataItem(this);
        // 定位到当前行对应EmailAddress列的单元格（通过data-field属性匹配）
        const emailCell = $(this).find("td[data-field='PrimaryContact.EmailAddress']");
        if (dataItem.PrimaryContact && dataItem.PrimaryContact.EmailAddress === null) {
            emailCell.text("");
        }
    });
}

如果想要批量处理所有显示"null"的单元格，可以用更简洁的写法（注意：如果有正常内容包含"null"字符串会被误替换，按需使用）：

function onDataBound(e) {
    this.table.find("td:contains('null')").text("");
}

内容的提问来源于stack exchange，提问作者Demian