How to implement tree view with checkboxes represent children's ?

Question

I work on razor asp.net page model . i need to implement tree view with children's checkboxes then submit changes on every parent from selected checkboxes so are you have any sample on razor page asp.net 

can you help me by provide me sample or attachment by csharp asp.net razor for tree view with children checkbox 

sample below :

public class EditUserModel : PageModel     
{  
public EditUserModel()         {
public void OnGet()
        {
        }
public async Task OnPost()         
{
}
}
}

Answer 1

Hi @Ahmed Abd El Aziz

How to implement tree view with checkboxes represent children's ?

You can achieve it using a Jquery treeview plugin. Refer to the following sample:

Models:

    //parent node
    public class VehicleType
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }
    //children node
    public class VehicleSubType
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public int VehicleTypeId { get; set; }
    }
    //view model to populate the treeview.
    public class TreeViewNode
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string text { get; set; }
    }

ApplicatonDbContext:

    public class ApplicationDbContext:DbContext
    { 
        public ApplicationDbContext(DbContextOptions<ApplicationDbContext> options)
            : base(options)
        {
        }
        public DbSet<VehicleType> VehicleTypes { get; set; }
        public DbSet<VehicleSubType> VehicleSubTypes { get; set; }

Generate the table and add the test data as below:

Razor page: TreeView.cshtml

@page "/treeview"
@model RazorWebApp.Pages.TreeViewModel
<div id="jstree">
</div>
<form method="post">
    <input type="hidden" name="selectedItems" id="selectedItems" />
    <input type="submit" value="Submit" />
</form>

@section Scripts{
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#jstree').on('changed.jstree', function (e, data) {
                var i, j;
                var selectedItems = [];
                for (i = 0, j = data.selected.length; i < j; i++) {

                    //Fetch the Id.
                    var id = data.selected[i];

                    //Remove the ParentId.
                    if (id.indexOf('-') != -1) {
                        id = id.split("-")[1];
                    }

                    //Add the Node to the JSON Array.
                    selectedItems.push({
                        text: data.instance.get_node(data.selected[i]).text,
                        id: id,
                        parent: data.instance.get_node(data.selected[i]).parents[0]
                    });
                }

                //Serialize the JSON Array and save in HiddenField.
                $('#selectedItems').val(JSON.stringify(selectedItems));
            }).jstree({
                "core": {
                    "themes": {
                        "variant": "large"
                    },
                    "data": @Html.Raw(Model.jsonstring)
                                },
                "checkbox": {
                    "keep_selected_style": false
                },
                "plugins": ["wholerow", "checkbox"],
            });
        });
    </script>
} 

Treeview.cshtml.cs:

    public class TreeViewModel : PageModel
    {
        private readonly ApplicationDbContext _dbcontext;

        public TreeViewModel(ApplicationDbContext applicationDbContext)
        {
            _dbcontext=applicationDbContext;
        }
        [BindProperty]
        public string jsonstring { get; set; }
        public void OnGet()
        {
            List<TreeViewNode> nodes = new List<TreeViewNode>();

            //Loop and add the Parent Nodes.
            foreach (VehicleType type in _dbcontext.VehicleTypes.ToList())
            {
                nodes.Add(new TreeViewNode { id = type.Id.ToString(), parent = "#", text = type.Name });
            }

            //Loop and add the Child Nodes.
            foreach (VehicleSubType subType in _dbcontext.VehicleSubTypes.ToList())
            {
                nodes.Add(new TreeViewNode { id = subType.VehicleTypeId.ToString() + "-" + subType.Id.ToString(), parent = subType.VehicleTypeId.ToString(), text = subType.Name });
            }

            //Serialize to JSON string.
            jsonstring = JsonConvert.SerializeObject(nodes);
        }

        public void OnPost(string selectedItems)
        {
            List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
        }
    }

The result as below:

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Dillion