Como implementar uma TreeView simples usando ASP.NET MVC
Eu sou um novato no desenvolvimento da web, e eu quero construir um site muito simples usando VS2019, baseado na estrutura MVC. Preciso de criar uma árvore numa página web, com um nó selecionável, o mais simples possível.
Não tenho problemas em Carregar dados, preencher qualquer estrutura / classe. No entanto, não faço ideia de como mostrar uma árvore numa página web.
Estou à procura há quatro horas. Vejo muitos plug-ins js tree, muitos controladores TreeView em NuGet. I só quero uma árvore simples, melhor da Microsoft não de qualquer outro terceiro partido. Eu vejo um WebControl TreeView mas parece para aplicação Web Form (.aspx). Por favor, não me digas para procurar na internet, como eu tentei, muito. Muito obrigado!Se não for nada fora de caixa da Microsoft para ser usado no cshtml, por favor confirme isso e eu vou parar de procurar, e se possível, por favor, recomende uma maneira mais fácil de aprender e usar TreeView.
Jstree / Telerik / ???
1 answers
Classe TreeView Do Microsoft Docs
Também analisei Telerik e Syncfusion, mas estou a tentar evitar pagar por uma solução. Primeiro, para a estrutura de dados, encontrei um pacote NuGet chamado TreeCollections escrito por David West. aqui:Https://github.com/davidwest/TreeCollections
Implementei isso e posso construir com sucesso uma ou várias árvores hierárquicas a partir dos meus dados. Você pode querer olhar para isso para a sua estrutura de dados da árvore.
Agora para exibir os dados em uma página web, eu não acho que a Microsoft tenha quaisquer ferramentas para nos ajudar. Procurei como você. Você menciona JsTree , e eu acho que essa é uma opção viável, mas não é html-apenas como você especificou. Acho eu. teremos que usar pelo menos algum javascript.
Há duas implementações de carga preguiçosa da JSTree aqui: Asp.Net MVCDependendo do tamanho e profundidade da sua árvore, se você pode puxar os seus dados dinamicamente à medida que o usuário navega na árvore, esta pode ser a melhor solução. Se você quiser pré-carregar seus dados em uma estrutura de árvore primeiro, como eu estou fazendo com TreeCollections, então talvez preencher uma estrutura de trabalho, mas ele ainda vai precisar de ajuda com javascript se você quiser mostrar/esconder ramos interativamente na árvore.
Actualização: fui capaz de carregar e mostrar uma árvore hierárquica na minha página web com muito pouco código, usando jsTree. Descobri que não precisava de nenhuma coleção de árvores. Primeiro, o modelo que contém os dados de cada nó:
public class JsTreeModel
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
public string icon { get; set; }
public string state { get; set; }
public bool opened { get; set; }
public bool disabled { get; set; }
public bool selected { get; set; }
public string li_attr { get; set; }
public string a_attr { get; set; }
}
using System.Text.Json;
[...]
IList<JsTreeModel> nodes = new List<JsTreeModel>();
foreach (var item in items)
{
nodes.Add(new JsTreeModel
{
id = item.Id.ToString(),
parent = item.ParentId == null ? "#" : item.ParentId.ToString(),
text = item.Name
});
}
//Serialize to JSON string.
ViewBag.Json = JsonSerializer.Serialize(nodes);
return View();
Então, na sua opinião, você simplesmente precisa de um mergulhador que segure a árvore:
<div id="jstree"></div>
E este javascript que irá povoá - lo:
<script type="text/javascript">
$(document).ready(function () {
$('#jstree').jstree({
"core" : {
"data" : @Html.Raw(ViewBag.Json)
}
});
});
</script>