时间戳

首页 > 解决方案 > 如何在 blazor 中动态显示图像标签？

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

问题描述

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

在表头列中，我有：

<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 来完成此操作，但我无法弄清楚如何开始使用它。

标签： blazorblazor-server-side

解决方案

直接回答：

这是 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";

奖励曲目：

请记住，您可以使用参数将行为封装在您自己的 Blazor 组件中：

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

推荐阅读