Share via

JS tree in mvc using jsonresult

Guhananth S 1 Reputation point
2021-11-28T01:56:30.857+00:00

HI
i have MyClient.js file

function()

{
('$textbox').blur(function
{
var str = ('#textbox').value();
this return null.
('#myclient').jstree(
{
url:'MyClient/GetData',
data:str,
});

controller MyClientController.cs

public JsonResult(string str)
{
datatatable dt= new dataTable();
get data from stored procedure
SqlDataAdapater ad = new SqlDataAdapter();
dt.Fill(ad);
return json.Serialize(dt.Serialize());

}

}

MyClient mvc webform

<input type="text" id="textbox">
<div id="myclient"> to form tree view with check box

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,417 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Lan Huang-MSFT 28,841 Reputation points Microsoft Vendor
    2021-11-29T06:48:17.64+00:00

    Hi @Guhananth S ,
    You only need to use the standard jQuery-like AJAX configuration, and jstree will automatically make the AJAX request fill the tree with the response.
    To render the checkbox icon, use the plugin configuration option and add the name of the plugin to the array.
    For details, you can refer to the following code
    MyClient.js file:153235-myclientjs.txt
    153242-7.png
    JsTreeDemo,cshtml 

    @{  
    Layout = null;  
}  
<!D OC TY PE html>  
<html>  
<head>  
    <m eta name="viewport" content="width=device-width" />  
    <title>JsTree Demo</title>  
    <link rel="stylesheet" h  re f="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />  
    <link rel="stylesheet" h r ef="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />  
    <sc ript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></s cript>  
    <sc ript src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></sc ript>  
    <s cr ipt src="~/MyClient.js"></script>  
</head>  
<body>  
    <div class="container-fluid">  
        <div class="row">  
            <div class="col-md-12">  
                <div class="col-md-3">  
                    <div class="panel panel-info">  
                        <div class="panel-heading">  
                            JsTree Demo  
                        </div>  
                        <input type="text" id="textbox">  
                        <div class="panel-body">  
                            <div id="MyClient">  
                            </div>  
                        </div>  
                    </div>  
            </div>  
        </div>  
    </div>  
        </div>  
</body>  
</html>

    HomeController :

    [HttpGet]
    public ActionResult JsTreeDemo()
    {
    return View();
    }
    public Js onResult Nodes()
    {
    var nodes = new List<JsTreeModel>();
    nodes.Add(new JsTreeModel() { id = "101", parent = "#", text = "Kunal" });
    nodes.Add(new JsTreeModel() { id = "102", parent = "#", text = "Root node 1" });
    nodes.Add(new JsTreeModel() { id = "103", parent = "102", text = "Child 1" });
    nodes.Add(new JsTreeModel() { id = "104", parent = "102", text = "Child 2" });
    return Json(nodes, JsonR eque s tB ehavior.AllowGet);
    }
    Model: 

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

    The result:
    153263-1.png

    Best regards,
    Lan Huang

    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.

    0 comments