ASP.NET Core中NonFactors WebGrid根据模型属性值动态生成HTML标签

我刚好之前做过类似的需求，给你分享几个实用的实现方案，都是经过实际项目验证的：

方案1：直接使用列的Format委托（最快捷） #

这是最简单直接的方式，在定义WebGrid列的时候，通过Format参数传入一个委托，根据模型的布尔属性值返回对应的HTML片段。记得用Html.Raw()来避免HTML被转义：

@{
    var grid = new WebGrid(Model);
}

@grid.GetHtml(
    columns: grid.Columns(
        // 其他列...
        grid.Column(
            columnName: "IsActive", // 你的布尔属性名
            header: "状态",
            format: item => item.IsActive ? 
                Html.Raw("<div class='status-active'>已激活</div>") : 
                Html.Raw("<img src='/images/inactive.png' alt='未激活' class='status-icon' />")
        )
    )
)

注意点： #

• 必须用Html.Raw()，否则WebGrid会把HTML标签转义成文本（比如显示<div>而不是渲染成div元素）
• img标签的路径要根据你的项目结构调整，比如用Url.Content("~/images/inactive.png")来确保路径正确

方案2：使用局部视图封装模板（适合复杂逻辑） #

如果你的逻辑不止简单的true/false判断，或者需要在多个地方复用这个模板，把HTML逻辑抽成局部视图会更清晰：

首先在视图里定义列时，调用局部视图：

grid.Column(
    header: "状态",
    format: item => Html.Partial("_StatusTemplate", item)
)

然后创建_StatusTemplate.cshtml局部视图：

@model YourProject.Models.YourModel

@if (Model.IsActive)
{
    <div class="status-active">已激活</div>
}
else
{
    <img src="@Url.Content("~/images/inactive.png")" alt="未激活" class="status-icon" />
}

这种方式的好处是把视图逻辑分离出来，方便维护和复用，后续如果要修改样式或逻辑，只需要改局部视图就行。

方案3：封装WebGrid扩展方法（适合多处复用） #

如果你的项目里很多地方都需要这种布尔值转HTML的列，可以写一个扩展方法来封装逻辑，减少重复代码：

首先创建扩展类：

using NonFactors.Mvc.Grid;
using Microsoft.AspNetCore.Mvc.Rendering;

namespace YourProject.Extensions
{
    public static class WebGridExtensions
    {
        public static WebGridColumn StatusColumn(this WebGrid grid, string header = "状态")
        {
            return grid.Column(
                header: header,
                format: item => item.IsActive ? 
                    grid.HtmlHelper.Raw("<div class='status-active'>已激活</div>") : 
                    grid.HtmlHelper.Raw("<img src='/images/inactive.png' alt='未激活' class='status-icon' />")
            );
        }
    }
}

然后在视图里引用命名空间后，就可以直接使用：

@using YourProject.Extensions

@{
    var grid = new WebGrid(Model);
}

@grid.GetHtml(
    columns: grid.Columns(
        // 其他列...
        grid.StatusColumn()
    )
)

这样不管在哪个视图里需要这个列，只需要调用grid.StatusColumn()就行，非常方便。

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