ASP.NET MVC - 使用超棒的字体图标填充 SelectList

Question

我在列表中填充了字体超棒的字符串，例如：

private static readonly List<string> Icons = new(){
    "<i class=\"fas fa-users\"></i>",
    "<i class=\"fas fa-user-tag\"></i>",
    "<i class=\"fas fa-sitemap\"></i>",
    "<i class=\"fas fa-cubes\"></i>",
    "<i class=\"fas fa-shield-alt\"></i>"
};

在视图中我有一个下拉菜单：

<select asp-for="Icon" class="form-control" asp-items="ViewBag.Icons"></select>

然后当我在 SelectList 中显示它们时，我得到：

我想将它们呈现为 HTML 并显示图标，而不是字符串。可能吗？也许用 JS 或 jQuery?

Answer 1

您无法在 <option> 元素中呈现 <i> 图标元素，如以下问题所述：.

相反，您可以将 Unicode 传递给 <option> 元素以显示图标。

第 1 步：从 FontAwesome website 获取图标的 Unicode。

第 2 步：将图标的 Unicode 传递给 SelectList。

Note 1: The Unicode that passed to front-end must be in the format: &#x{Unicode};

Note 2: You may remove <i> element string and redesign Icons type in case <i> element is not needed.

Controller

public IActionResult Index()
{
    Dictionary<string, string> Icons = new Dictionary<string, string>()
    {
        { "<i class=\"fas fa-users\"></i>", "&#xf0c0;" },
        { "<i class=\"fas fa-user-tag\"></i>", "&#xf507;" },
        { "<i class=\"fas fa-sitemap\"></i>", "&#xf0e8;" },
        { "<i class=\"fas fa-cubes\"></i>", "&#xf1b3;" },
        { "<i class=\"fas fa-shield-alt\"></i>", "&#xf3ed;" }
    };

    ViewBag.Icons = new SelectList((IEnumerable)Icons, "Key", "Value");
}

步骤 3：使用 @Html.Raw(item.Text) 渲染 <option> 个元素。

Note: Unicode to be generated as IHtmlString instead of string.

View

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" />

    <style>

        select {
            font-family: 'FontAwesome', Verdana;
        }

        .fa option {
            font-weight: 900;
        }
    </style>
</head>

<select asp-for="Icon" class="form-control fa">
    @foreach (var item in (SelectList)ViewBag.Icons)
    {
        <option value="@item.Value">
            @Html.Raw(item.Text)
        </option>
    }
</select>

Result

ASP.NET MVC - 使用超棒的字体图标填充 SelectList

ASP.NET MVC - Populate SelectList with Font-Awesome Icons

.net

c#

asp.net

asp.net-mvc

razor