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>();
foreach (Category type in db.Categories)
{
nodes.Add(new TreeViewNode { id = type.CATEGORY_INT_ID.ToString(), parent = "#", text = type.DISPLAY });
}
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 });
}
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++) {
var id = data.selected[i];
if (id.indexOf('-') != -1) {
id = id.split("-")[1];
}
selectedItems.push({
text: data.instance.get_node(data.selected[i]).text,
id: id,
parent: data.node.parents[0]
});
}
$('#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