Ravi 1001 Ответов: 0

Создайте ссылку для каждого узла в MVC с помощью jstree

Я создаю приложение MVC 5 в asp.net-да. Я хочу встроить ссылку в каждый узел, чтобы направить ее на страницу сведений о узле. Я использую jstree для заполнения узлов.

Ниже приведен код для класса Treenode

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


Код в моем контроллере

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");
        }


Код Индексного Представления

@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>



Когда кто-то нажимает на какой-либо узел, он должен направить их на страницу сведений об элементе, используя id в качестве ссылки и страницу сведений view.cshtml, сгенерированную контроллером. Было бы здорово, если бы кто-нибудь мог мне помочь.

Что я уже пробовал:

Я уже две недели пытаюсь это понять

0 Ответов