He llenado la Lista con cadenas de fuentes impresionantes como:
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>"
};
Y en Vista tengo un menú desplegable:
<select asp-for="Icon" class="form-control" asp-items="ViewBag.Icons"></select>
y luego, cuando los muestro en SelectList, obtengo:
Me gustaría representarlos como HTML y mostrar iconos, no cadenas. ¿Es posible? ¿Quizás con JS o jQuery?
Solución del problema
No puede representar el <i>elemento del ícono en <option>el elemento como se le hizo esta pregunta: ícono de Font Awesome en la opción de selección.
En su lugar, puede pasar el Unicode al <option>elemento para mostrar el icono.
Paso 1: Obtenga el Unicode de los íconos del sitio web de FontAwesome.
Paso 2: Pase el Unicode de los iconos a SelectList.
Note 1: The Unicode that passed to front-end must be in the format: &#x{Unicode};
Nota 2: puede eliminar la <i>cadena de elementos y rediseñar el Iconstipo en caso de que el <i>elemento no sea necesario.
Controlador
public IActionResult Index()
{
Dictionary<string, string> Icons = new Dictionary<string, string>()
{
{ "<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>", "" }
};
ViewBag.Icons = new SelectList((IEnumerable)Icons, "Key", "Value");
}
Paso 3: Renderizar <option>elementos con @Html.Raw(item.Text).
Nota: Unicode se generará como IHtmlStringen lugar de string.
Vista
<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>
Resultado
No hay comentarios:
Publicar un comentario