Hi rani,
Check this example. Now please take its reference and correct your code.
Database
CREATE TABLE [dbo].[Menu]
(
[MenuId] [INT] IDENTITY(1,1) NOT NULL,
[ParentMenuId] [INT] NOT NULL,
[Title] [VARCHAR](100) NULL
)
INSERT INTO Menu VALUES (0,'Bus')
INSERT INTO Menu VALUES (0,'Truck')
INSERT INTO Menu VALUES (0,'Micro')
INSERT INTO Menu VALUES (1, 'Bus1')
INSERT INTO Menu VALUES (1, 'Bus2')
INSERT INTO Menu VALUES (1, 'Bus3')
INSERT INTO Menu VALUES (2, 'Truck1')
INSERT INTO Menu VALUES (2, 'Truck2')
INSERT INTO Menu VALUES (2, 'Truck3')
INSERT INTO Menu VALUES (3, 'Micro1')
INSERT INTO Menu VALUES (3, 'Micro2')
INSERT INTO Menu VALUES (3, 'Micro3')
INSERT INTO Menu VALUES (4, 'Bus1.1')
INSERT INTO Menu VALUES (4, 'Bus1.2')
INSERT INTO Menu VALUES (4, 'Bus1.3')
INSERT INTO Menu VALUES (5, 'Bus2.1')
INSERT INTO Menu VALUES (5, 'Bus2.2')
INSERT INTO Menu VALUES (5, 'Bus2.3')
INSERT INTO Menu VALUES (6, 'Bus3.1')
INSERT INTO Menu VALUES (6, 'Bus3.2')
INSERT INTO Menu VALUES (6, 'Bus3.3')
INSERT INTO Menu VALUES (19, 'Bus3.1.1')
SELECT MenuId,ParentMenuId,Title FROM Menu
Namespaces
using System.Collections.Generic;
using System.Data.SqlClient;
using Newtonsoft.Json;
Model
public class TreeViewNode
{
public string id { get; set; }
public string parent { get; set; }
public string text { get; set; }
}
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
List<TreeViewNode> nodes = new List<TreeViewNode>();
string conString = "Server=.\\SQL2014;DataBase=AjaxSamples;UID=sa;PWD=pass@123";
string query = "SELECT MenuId,ParentMenuId,Title FROM Menu";
using (SqlConnection con = new SqlConnection(conString))
{
SqlCommand cmd = new SqlCommand(query);
cmd.Connection = con;
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
nodes.Add(new TreeViewNode
{
id = sdr["MenuId"].ToString(),
parent = sdr["ParentMenuId"].ToString() == "0" ? "#" : sdr["ParentMenuId"].ToString(),
text = sdr["Title"].ToString()
});
}
con.Close();
}
ViewBag.Json = JsonConvert.SerializeObject(nodes);
return View();
}
[HttpPost]
public IActionResult Index(string selectedItems)
{
List<TreeViewNode> items = JsonConvert.DeserializeObject<List<TreeViewNode>>(selectedItems);
return RedirectToAction("Index");
}
}
View
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<div id="jstree">
</div>
<form method="post" asp-controller="Home" asp-action="Index">
<input type="hidden" name="selectedItems" id="selectedItems" />
<input type="submit" value="Submit" />
</form>
<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": {
"themes": {
"variant": "large"
},
"data": @Html.Raw(ViewBag.Json)
},
"checkbox": {
"keep_selected_style": false
},
"plugins": ["wholerow", "checkbox"],
});
});
</script>
</body>
</html>
Screenshot
