JS tree in mvc using jsonresult

Guhananth S 1 Reputation point

i have MyClient.js file


var str = ('#textbox').value();
this return null.

controller MyClientController.cs

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



MyClient mvc webform

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

A set of technologies in the .NET Framework for building web applications and XML web services.
3,184 questions
{count} votes

1 answer

Sort by: Most helpful
  1. Lan Huang-MSFT 23,306 Reputation points Microsoft Vendor

    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

        Layout = null;  
    <!D OC TY PE html>  
        <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>  
        <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  
                            <input type="text" id="textbox">  
                            <div class="panel-body">  
                                <div id="MyClient">  

    HomeController :

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

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

    The result:

    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 No comments