Click here to Skip to main content
14,695,499 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am creating a MVC 5 App in asp.net. I want to embed link in each node to direct to details page of the node. I am using jstree to populate the nodes.

Below is the code for Treenode class

public class TreeViewNode
    {
        public string id { get; set; }
        public string parent { get; set; }
        public string text { get; set; }
    }


Code in my Controller

public class HomeController : Controller
    {
        MetadataEntities db = new MetadataEntities();
        public ActionResult Index()
        {
            List<TreeViewNode> nodes = new List<TreeViewNode>();
            //Loop and add the Parent Nodes.
            foreach (Category type in db.Categories)
            {
                nodes.Add(new TreeViewNode { id = type.CATEGORY_INT_ID.ToString(), parent = "#", text = type.DISPLAY });
            }

            //Loop and add the Child Nodes.
            foreach (Term subType in db.Terms)
            {
                nodes.Add(new TreeViewNode { id = subType.TERM_INT_ID.ToString() + "-" + subType.TERM_INT_ID.ToString(), parent = subType.CATEGORY_INT_ID.ToString(), text = subType.BUSINESS_TERM });
            }

            //Serialize to JSON string.
            ViewBag.Json = (new JavaScriptSerializer()).Serialize(nodes);
            return View();
        }

        [HttpPost]
        public ActionResult Index(string selectedItems)
        {
            List<TreeViewNode> items = (new JavaScriptSerializer()).Deserialize<List<TreeViewNode>>(selectedItems);
            return RedirectToAction("Index");
        }


Index View Code

@model WebApplication4.Models.TreeViewNode
@using WebApplication4.Models
@{
    Layout = null;
}
<!DOCTYPE html>
<link href="~/Content/bootstrap.css" rel="stylesheet" />

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
  
    <div class="container-fluid" style="width:90%;">
        <br />
        <br />
        <br />
        @* Search Box*@
        <div class="search-box col-md-offset-3" style="width:50%;">
            <input type="text" class="form-control" id="plugins4_q" placeholder="Search…">
        </div>
        <br />
        <br />
        <br />

        <div id="jstree">
        </div>
    </div>

    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {

    }

    <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.node.parents[0]
                    });
                }
                
                //Serialize the JSON Array and save in HiddenField.
                $('#selectedItems').val(JSON.stringify(selectedItems));
            }).jstree({
                core: {
                    "data": @Html.Raw(ViewBag.Json),
                    'themes': {
                        "responsive": true,
                        'variant': 'larg',
                        'stripes': false,
                        'dots': false
                    },
                },
                "types": {
                    "default": {
                        "icon": "glyphicon glyphicon-plus",
                        "icon": "glyphicon glyphicon-ok"
                    },
                   
                     
                    "file": {
                        "icon": "fa fa-file icon-state-warning icon-lg"
                    } 
                },
                plugins: ["search", "themes", "types"]
            })
           
            });
        var to = false;
        $('#plugins4_q').keyup(function () {
            if (to) { clearTimeout(to); }
            to = setTimeout(function () {
                var v = $('#plugins4_q').val();
                $('#jstree').jstree(true).search(v);
            }, 250);
        });

 
    </script>
</body>
</html>



When someone clicks on any node it should direct them to Details page of the item using id as the reference and details view.cshtml page generated by the controller. It would be great if anyone can help me out.

What I have tried:

I have been trying to figure for past two weeks
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900