如何在DataGridView中插入HTML图标替换锁定状态文本

第一步：修改后台C#代码，替换文本为HTML图标 #

把原本赋值为"Yes"的代码替换成你提供的FontAwesome图标HTML字符串：

//checking if folder is locked
for(int i = 0; i<pathLock.Count; i++)
{
    if (pathLock[i] == folderPath)
    {
        // 替换为HTML图标代码
        myDataRow["Locked"] = "<span class='fa fa-lock'></span>";
        // 找到匹配项后跳出循环，提升效率
        break;
    }
}

可选优化：为未锁定的文件夹设置默认空白值，避免列内容为空时显示异常

// 先设置默认值
myDataRow["Locked"] = "";
//checking if folder is locked
for(int i = 0; i<pathLock.Count; i++)
{
    if (pathLock[i] == folderPath)
    {
        myDataRow["Locked"] = "<span class='fa fa-lock'></span>";
        break;
    }
}

第二步：允许GridView渲染HTML内容 #

默认情况下，GridView会自动转义HTML文本，导致页面显示原始代码而非图标，需要关闭对应列的HTML编码：

方式1：ASPX页面声明式配置

如果你的GridView是在ASPX页面中声明的，找到Locked对应的BoundField列，添加HtmlEncode="False"属性：

<asp:GridView ID="yourGridViewID" runat="server" AutoGenerateColumns="False">
    <Columns>
        <!-- 其他列配置 -->
        <asp:BoundField DataField="Locked" HeaderText="Locked" HtmlEncode="False" />
    </Columns>
</asp:GridView>

方式2：后台代码动态配置

如果是后台动态生成GridView列，创建列时设置HtmlEncode为false：

BoundField lockedColumn = new BoundField();
lockedColumn.DataField = "Locked";
lockedColumn.HeaderText = "Locked";
lockedColumn.HtmlEncode = false;
yourGridViewID.Columns.Add(lockedColumn);

额外注意 #

确保页面已引入FontAwesome的CSS文件，否则图标无法正常显示：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

若项目已本地引入FontAwesome资源，可跳过此步骤

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