Cómo crear un HTML Helper personalizado para una lista de árbol desplegable en ASP.NET Core 6.

Answer

1. 

   davy.ai

   July 28, 2023 at 3:46 pm

   Para crear un ayudante HTML para una opción de lista de árbol general con opción de selección, puedes usar el siguiente código:

   using System.Collections.Generic;
   using System.Linq.Expressions;
   using System.Text;
   using System.Web.Mvc;
   using System.Web.Mvc.Html;
   
   public static class HtmlHelpers
   {
       public static MvcHtmlString TreeViewFor<tmodel, tproperty="">(
           this HtmlHelper<tmodel> htmlHelper,
           Expression<><tmodel, tproperty="">> expression,
           IEnumerable<dropdowntreeview> list,
           object htmlAttributes = null)
       {
           var selectList = GetSelectListItems(list, null, "");
           var dropdown = htmlHelper.DropDownListFor(expression, selectList, htmlAttributes);
           return dropdown;
       }
   
       private static IEnumerable<selectlistitem> GetSelectListItems(IEnumerable<dropdowntreeview> list, long? parentId, string prefix)
       {
           var items = list.Where(x => x.IdParent == parentId).Select(x =>
               new SelectListItem
               {
                   Value = x.Id.ToString(),
                   Text = (prefix == "" ? "" : prefix + " > ") + x.Name
               });
           var selectListItems = items as IList<selectlistitem> ?? items.ToList();
           foreach (var item in selectListItems)
           {
               var childItems = GetSelectListItems(list, long.Parse(item.Value), item.Text);
               if (childItems.Any())
               {
                   item.Group = new SelectListGroup { Name = item.Text };
                   foreach (var childItem in childItems)
                   {
                       item.Children.Add(childItem);
                   }
               }
           }
           return selectListItems;
       }
   }
   

   Puedes usar esta función de ayuda en tu vista de la siguiente manera:

   @Html.TreeViewFor(model => model.ParentCategoryId, Model.DropdownList)
   

   Aquí, TreeViewFor es un nuevo método de ayuda HTML que toma los siguientes parámetros:

   • expression: La expresión que proporciona el campo para el cual se está creando la vista de árbol.
   • list: La lista de elementos que se mostrarán en la vista de árbol.
   • htmlAttributes: Cualquier atributo HTML que deba aplicarse al elemento select.

   El ayudante crea una lista desplegable utilizando el método DropDownListFor y la rellena con los elementos del parámetro list, que es una lista de objetos DropdownTreeview. El ayudante genera de forma recursiva los elementos para la lista desplegable basándose en sus relaciones padre-hijo.

   Para mostrar una estructura de árbol anidada, se utiliza el método GetSelectListItems. Este método genera de forma recursiva los elementos para la lista desplegable, agregando un prefijo > a cada texto de los elementos hijos para indicar su jerarquía de padres. El método utiliza objetos SelectListItem para representar los elementos de la lista desplegable y agrega objetos SelectListGroup para representar grupos de elementos. Los objetos SelectListItem se agrupan bajo el grupo correspondiente mediante la configuración de la propiedad Group. Por último, el método devuelve los objetos SelectListItem como IEnumerable<selectlistitem>.

   La lista desplegable resultante mostrará los elementos anidados en un formato de vista de árbol, con los elementos padres mostrados como grupos de opciones y sus elementos hijos correspondientes como opciones anidadas.</tmodel,></tmodel,>

Comments are closed.