Как заполнить список Drop Down Вложенные данные дерева с использованием ajax в основном проекте asp.net?

76
10

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

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

 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>

спросил(а) 2021-01-19T14:25:14+03:00 2 месяца, 3 недели назад
1
Решение
62

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

[
{
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 действия 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

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

enter image description here

ответил(а) 2021-01-19T14:25:14+03:00 2 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема