javascript - 如果数字为 1 或 0，则显示不同的图标 - ASP.NET C# MVC JQuery

Question

我有一个生成随机数的模型:

public int IsLocked
{
    get
    {
        var rnd = new Random();
        return rnd.Next(0, 2);
    }
}

这是我的部分 View :

<table class="table table-striped table-hover dataTable admin-form theme-primary songsTable" cellspacing="0" width="100%" role="grid">
    <thead id="tableHeader">
        <tr>
            <th class="bg-white text-left hidden-xs">
                Song ID
            </th>
            <th class="sorting text-left @Html.SortTitleItem("Title", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
                <a href="@Url.Action("SongManagement", "ArtistAccount", new
                     {
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "Title",
                         sortAsc = Model.PagingInfo.SortPropertyName != "Title" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Song Title">Song Title</a>
            </th>
            <th class="sorting text-left hidden-xs hidden-sm @Html.SortTitleItem("CreatedDate", Model.PagingInfo.SortPropertyName, Model.PagingInfo.SortAscending)">
                <a href="@Url.Action("SongManagement", "ArtistAccount", new
                     {
                         page = 1,
                         take = Model.PagingInfo.Take,
                         sortBy = "CreatedDate",
                         sortAsc = Model.PagingInfo.SortPropertyName != "CreatedDate" || !Model.PagingInfo.SortAscending
                     })" data-container="body" data-toggle="tooltip" title="Sort by Created Date">Created Date</a>
            </th>
            <th class="bg-white text-left hidden-xs hidden-sm">
                Writers
            </th>
            <th class="bg-white text-left hidden-xs hidden-sm">
                Recordings
            </th>
            <th class="bg-white text-left hidden-xs hidden-sm">
                State
            </th>
            <th class="bg-white text-left">
                <div class="text-center">Action</div>
            </th>
        </tr>
    </thead>
    <tbody>

        @foreach (var t in Model.Songs)
        {
            var actionWorkId = "actionWork_" + tableRowIndex;
            var recordingWorkId = "recordingWork_" + tableRowIndex;
            var editWorkId = "jsEditWork_" + tableRowIndex;
            var deleteWorkId = "deleteWork_" + tableRowIndex;
            var tuneCodeId = "tuneCode_" + tableRowIndex;

            var writerShares = string.Join("<br />", t.Writers.Select(w => w.IsUnknown ? "UNKNOWN: " + string.Format("{0:0.00}", w.Share) + "%"
                                                                                        : w.Name + ": " + string.Format("{0:0.00}", w.Share) + "%"));

        <tr data-id="@t.ID"
            data-rowversion="@t.RowVersion">
            <td class="hidden-xs">
                @t.SongId
            </td>
            <td>
                @t.Title
            </td>
            <td class="hidden-xs hidden-sm">
                @t.CreatedDate
            </td>
            <td class="hidden-xs hidden-sm">
                <span class="label label-rounded label-primary" data-container="body" data-toggle="tooltip" data-html="true" title="@writerShares">@t.Writers.Count()</span>
            </td>
            <td class="hidden-xs hidden-sm">
                <span class="label label-rounded label-default">@t.Recordings</span>
            </td>
            <td class="hidden-xs hidden-sm">
                <span class="glyphicon glyphicon-lock">@t.IsLocked</span>
            </td>
            <td class="updateTableRow text-center">
                <div class="dropdownContainer btn-group text-right">
                    <button id="@actionWorkId" type="button" class="btn btn-primary br2 btn-xs fs12 dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                        Action
                        <span class="caret ml5"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        <li class="disabled">
                            <a href="@Url.Action("Recordings", "ArtistAccount", new
                                {
                                    accountcode = fullAccountCode,
                                    songcode = t.SongId
                                })" id="@recordingWorkId" data-container="body" data-toggle="tooltip" title="You cannot edit this song until pending writer edits are approved" data-rowhover="editTableRow" class="js_Recordings">Recordings</a>
                        </li>
                        <li class="disabled">
                            <a href='@Url.Action("EditSong", "ArtistAccount", new
                                     {
                                         songcode = t.SongId,
                                         accountcode = fullAccountCode,
                                         page = Model.PagingInfo.Page,
                                         take = Model.PagingInfo.Take,
                                         sortBy = Model.PagingInfo.SortPropertyName,
                                         sortAsc = Model.PagingInfo.SortAscending
                                     })' id="@editWorkId" data-container="body" data-toggle="tooltip" data-rowhover="editTableRow" class="disabled" title="You cannot edit this song until pending writer edits are approved">Edit</a>
                        </li>
                        <li>
                            <a href="#" id="@deleteWorkId" data-container="body" data-toggle="tooltip" title="Delete" data-rowhover="deleteTableRow" class="js_DeleteSong">Delete</a>
                        </li>
                        <li>
                            <a href="@Url.Action("TuneCodes", "ArtistAccount", new
                                    {
                                        accountCode = fullAccountCode,
                                        workCode = t.SongId,
                                    })" id="@tuneCodeId" data-container="body" data-toggle="tooltip" title="Tune Codes" data-rowhover="editTableRow">Tune Codes</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
            tableRowIndex++;
        }
    </tbody>
</table>

@Html.Partial("_Pagination", Model.PagingInfo)
</div>

我生成了随机数，但是有没有办法可以显示 <span class="glyphicon glyphicon-lock"> 的锁如果数字为 1，则 <span class="glyphicons glyphicons-unlock"></span>如果数字为零。

我正在考虑在 JQuery 中做一些事情，但如果有人有其他方法那就太好了。

Answer 1

您可以使用 Razor 执行简单的 if/else，就像这样:

@if (t.IsLocked == 1)
{
    <span class="glyphicon glyphicon-lock"></span>
} else { 
    <span class="glyphicons glyphicons-unlock"></span>
}