如何在blazor中动态显示图像标记？

我有一个页面有一个可排序的表格

在表格标题列中，我有：

<div>Inv. # @SortGlyph("inventory_number")</div>

Inv.#@SortGlyph（“库存编号”）

在我的代码块中

    public string SortGlyph(string field)
    {
        if (field == _orderBy)
        {
            return _direction == "asc" ? "<img src='/images/uparrow.gif'>" : "<img src='/images/downarrow.gif'>";
        }
        return "";
    }

公共字符串SortGlyph（字符串字段）
{
如果（字段==\u订购方）
{
返回方向==“asc”？：“”；
}
返回“”；
}

我想我需要使用RenderFragment来完成这项工作，但我很难确定如何开始使用它。

直接回答： 这是Blazor的方式：

Inv.#
@如果是Sortedupy（“库存编号”）{
} 
否则，如果按“库存编号”排序{
}

代码：

public bool IsSortedUpBy（字符串字段）=>field==\u orderBy&&u direction==“asc”；
公共bool IsSortedUpBy（字符串字段）=>field==\u orderBy&&u direction！=“asc”；

奖金轨道： 请记住，您可以使用parms将行为封装到

直接回答： 这是Blazor的方式：

Inv.#
@如果是Sortedupy（“库存编号”）{
} 
否则，如果按“库存编号”排序{
}

代码：

public bool IsSortedUpBy（字符串字段）=>field==\u orderBy&&u direction==“asc”；
公共bool IsSortedUpBy（字符串字段）=>field==\u orderBy&&u direction！=“asc”；

奖金轨道： 请记住，您可以使用parms将行为封装到

---

我省略了这个示例中的字段，因为我不确定组件的其余部分是如何实现的。我还认为您可能需要一次按多个字段进行排序。因此，为了保持答案的简单性，我缩小了实际问题的范围：“如何在blazor中动态显示图像标记？”

要动态显示任何内容，只需将其包装在

if

语句中即可。要切换图像，实际上可以交换字符串的一部分，而不是替换整个

}
@代码{
字符串方向=>SortDirection==“asc”？“向上箭头”：“向下箭头”；
[参数]公共字符串排序方向{get；set；}
}

我省略了这个示例中的字段，因为我不确定组件的其余部分是如何实现的。我还认为您可能需要一次按多个字段进行排序。因此，为了保持答案的简单性，我缩小了实际问题的范围：“如何在blazor中动态显示图像标记？”

要动态显示任何内容，只需将其包装在

if

语句中即可。要切换图像，实际上可以交换字符串的一部分，而不是替换整个

}
@代码{
字符串方向=>SortDirection==“asc”？“向上箭头”：“向下箭头”；
[参数]公共字符串排序方向{get；set；}
}

为什么不使用一个简单的@if语句和一个标记呢？因为我想重复使用它，而且每页有5个几乎相同的if语句会让我感到毛骨悚然。为什么不创建一个组件呢？根据您的建议创建一个组件。你说得对，这样更容易重复使用。因为我真的很好奇如何呈现一幅图像，所以我要让这个问题保持直播。你为什么不使用一个简单的@if语句和一个标记呢？因为我想重用它，而且每页有5个几乎相同的if语句会让我的皮肤感到毛骨悚然。为什么不创建一个组件呢？根据你的建议创建一个组件。你说得对，这样更容易重复使用。因为我真的很好奇如何渲染图像。是的，我已经按照mars的建议制作了一个组件。是的，我已经按照mars的建议制作了一个组件

@if (!String.IsNullOrEmpty(SortDirection))
{
    <img src='/images/@(Direction).gif'>
}

@code {
    string Direction => SortDirection == "asc" ? "uparrow" : "downarrow";
    [Parameter] public string SortDirection { get; set; }
}