如何在 blazor 中动态显示图像标签？答案

【问题标题】：How do i dynamically show an image tag in blazor?如何在 blazor 中动态显示图像标签？
【发布时间】：2019-12-15 12:46:05
【问题描述】：

我有一个包含可排序表的页面。

在我的表头列中：

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

在我的代码块中

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

我认为我需要使用 RenderFragment 来完成此操作，但我无法弄清楚如何开始使用它。

【问题讨论】：

为什么不使用简单的@if 语句和标签？
因为我想重用它，而且每页有 5 个几乎相同的 if 语句让我的皮肤爬行
你为什么不创建一个组件？
根据您的建议创建了一个组件。你是对的，这种方式更可重用。打算留下这个问题，因为我真的很好奇如何渲染图像。

标签： blazor blazor-server-side

【解决方案1】：

直接回答：

这是 Blazor 方式：

<div>Inv. # 
     @if IsSortedUpBy("inventory_number") {
        <img src='/images/uparrow.gif'>
     } 
     else if IsSortedDownBy("inventory_number") {
        <img src='/images/downarrow.gif'>
     }
</div>

代码：

public bool IsSortedUpBy(string field) => field == _orderBy && _direction == "asc";
public bool IsSortedUpBy(string field) => field == _orderBy && _direction != "asc";

奖励曲目：

请记住，您可以使用参数将行为封装在 own Blazor component 中：

    <arrowdiv 
        label="Inv. # "
        state="@GetArrowStateForField(inventory_number)">
    </arrowdiv>

【讨论】：

是的，根据 mars 的建议，我已经根据 augu 将它作为一个组件

【解决方案2】：

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

要动态显示任何内容，只需将其包装在 if 语句中即可。要切换图像，您实际上可以只交换部分字符串，而不是替换整个 <img 元素。

在以下示例中，如果未设置 SortDirection，则由于 if 语句将不会显示。否则，将显示图像并根据输入 Direction 属性的三元运算符显示正确的图像。

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

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

【讨论】：