用 Razor Pages 中的图像替换 table 值中的 true 或 false

Question

您好，我正在用 Razor 页面编写代码。我有一个 table，其中我的值之一是布尔值，此时它在 table 中显示 true 或 false。我想用我的 wwwroot 文件夹中的图像切换这些值。具有布尔值的变量是@tool.Borrowed.

我的HTML代码

<table border ="1" class="table table-sortable">
    <thead>
        <tr>
            <td><b>Verktøy Nummer</b></td>
            <th>Modell</th>
            <td><b>RFID nummer</b></td>
            <th>Kategori</th>
            <th>Utlånt</th>
            <td><b>Siste ansvarlige person</b></td>
        </tr>
    </thead>
    <tbody>
        @foreach (var tool in Model.Tools) //Get the nessecary Tools from the tools Model from Tools.csgtml.cs
        {
        <tr>
            <td>@tool.ToolNumber</td>

            <td><a asp-page="/Tools/Details" asp-route-ID="@tool.ToolId">@tool.Model</a> </td>

            <td> @tool.ToolId </td>
            <td> @tool.Category</td>            
            <td> @tool.Borrowed</td>
            <td><a asp-page="/Employees/Details" asp-route-ID="@tool.EmployeeId">@tool.EmployeeName</a> </td>
        </tr>
        }
    </tbody>
</table>

Answer 1

如果你想根据@tool.Borrowed的值添加图片。你可以使用conditional operator。这里有一个演示：

wwwroot 结构：

cshtml:

<table border="1" class="table table-sortable">
    <thead>
        <tr>
            <td><b>Verktøy Nummer</b></td>
            <th>Modell</th>
            <td><b>RFID nummer</b></td>
            <th>Kategori</th>
            <th>Utlånt</th>
            <td><b>Siste ansvarlige person</b></td>
        </tr>
    </thead>
    <tbody>
        @foreach (var tool in Model.Tools) //Get the nessecary Tools from the tools Model from Tools.csgtml.cs
        {
        <tr>
            <td>@tool.ToolNumber</td>

            <td><a asp-page="/Tools/Details" asp-route-ID="@tool.ToolId">@tool.Model</a> </td>

            <td> @tool.ToolId </td>
            <td> @tool.Category</td>
            <td><img src="@(tool.Borrowed?"/imgs/true.jpg":"/imgs/false.jpg")" /></td>
            <td><a asp-page="/Employees/Details" asp-route-ID="@tool.EmployeeId">@tool.EmployeeName</a> </td>
        </tr>
        }
    </tbody>
</table>

cshtml.cs(我只测试@tool.Borrowed):

 [BindProperty]
            public List<Tool> Tools { get; set; }
            public void OnGet()
            {
                Tools = new List<Tool> { new Tool { Borrowed = true }, new Tool { Borrowed = false }, new Tool { Borrowed = false } };
            }

结果：

用 Razor Pages 中的图像替换 table 值中的 true 或 false

Replacing true or false in table value with an image in Razor Pages

html

asp.net-core

razor-pages