Как заполнить раскрывающийся список дерева вложенных данных, используя ajax в основном проекте asp.net?

Question

Я создал основной MVC-проект asp.net.В моем проекте я использовал бесконечность категории и подкатегории.Прямо сейчас я сделал это.Но я хочу получить вложенные данные JSON (я имею в виду класс категории) из контроллера и показать их в раскрывающемся списке.Так что это мой вопрос о том, как заполнить дерево раскрывающегося списка классом категории?

Я использовал плагин Multi-Select Drop Down Tree, вы можете увидеть его по этой ссылке Multi-Выберите плагин Tree Drop *

 public class Category
        {

            public Category()
            {
                Categories = new List<Category>();
            }

            public int CategoryID { get; set; }
            [Required]
            [Display(Name = "Title")]
            public string CategoryName { get; set; }
            public int? ParenetCategoryID { get; set; }
            public Category ParentCategory { get; set; }
            public ICollection<Category> Categories { get; set; }

        }

---

public JsonResult FillDropdown()
 {
   return Json(_context.Categories.ToList());
 }

---

<div class="col-md-12">
    <div class="card">
        <div class="card-header bg-light">
            Fill Category
        </div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-control-label"></label>

                <input type="text" id="justAnInputBox" placeholder="Select" />
            </div>
        </div>
    </div>
</div>

---

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script src="~/Drop-Down-Combo-Tree/icontains.js"></script>
<script src="~/Drop-Down-Combo-Tree/comboTreePlugin.js"></script>
<script>
         $(document).ready(function ($) {
        comboTree1 = $('#justAnInputBox').comboTree({
        source: $.ajax({
        url: "Categorys/FillDropdown",
        type: "Get",
        data: "",
        dataType: "json",
        cache: false,
        success: function (data) {
                    alert(data);
                },
                error: function (data) {

                }
                }),
                isMultiple: false
               });
          });

       </script>

Answer 1

Поскольку плагин Multi-Select Drop Down Tree ожидает структуру данных, как показано ниже:

[
    {
        id: 0,
        title: 'Item 1 '
    },
    {
        id: 1,
        title: 'Item 2',
        subs: [
            {
                id: 10,
                title: 'Item 2-1'
            },
        ]
    },
]

Я создаю новый класс DTO для хранения данных:

public class CategoryDto{
    public int Id { get; set; }
    public string Title { get; set; }
    public int? ParentId { get; set; }
    public IList<CategoryDto> Subs{ get; set; }
}

Мы можем преобразовать IList<Category> в IList<CategoryDto> и затем встроить их в деревья CategoryDto:

public static class CategoryExtensions
{
    public static IList<CategoryDto> BuildTrees(this IList<Category> categories)
    {
        var dtos = categories.Select(c => new CategoryDto {
            Id = c.CategoryID,
            Title = c.CategoryName,
            ParentId = c.ParenetCategoryID,
        }).ToList();

        return BuildTrees( null, dtos);
    }

    private static IList<CategoryDto> BuildTrees(int? pid, IList<CategoryDto> candicates)
    {
        var subs = candicates.Where(c => c.ParentId== pid).ToList();
        if (subs.Count() == 0) {
            return new List<CategoryDto>();  // required an empty list instead of a null ! 
        }
        foreach (var i in subs) {
            i.Subs= BuildTrees(i.Id, candicates);
        }
        return subs;
    }
}

Теперь мы можем использовать метод расширения для построения деревьев в методе действия FillDropDown:

public async Task<IActionResult> FillDropdown()
{
    var categories= await _context.Category.ToListAsync();
    var trees = categories.BuildTrees();
    return new JsonResult(trees);
}

Наконец, используйте ajax, чтобы загрузить его и установить категории:

$(document).ready(function ($) {

    $.ajax({
        url: "/category/filldropdown",
        type: "Get",
        data: "",
        dataType: "json",
        cache: false,
        success: function (data) {
            $('#justAnInputBox').comboTree({
                source:data,
                isMultiple:false,
            });
        },
        error: function (data) {

        }
    })
});

Я использую следующие данные для его проверки:

CategoryId CategoryName  ParentCategoryID
1          choice 1       NULL  
2          choice 2       NULL  
3          choice 3       NULL  
4          choice 4       NULL  
5          choice 2.1     2 
6          choice 2.2     2 
7          choice 2.3     2 
8          choice 2.2.1   6 
9          choice 2.2.2   6 
10         choice 2.2.3   6 

И он работает безупречно: