title: how can i add child node on select of parent node
body: <p>this is my controller where i am creating only child node</p>
  <pre><code> public class HomeController : Controller
      {
         
          private readonly ApplicationDbContext _db;
  
          public HomeController(ApplicationDbContext db)
          {
              
              _db = db;
          }
  
          public IActionResult Index()
          {
              
              return View();
          }
          //[HttpPost]
          //public IActionResult Index(string selectedItems)
          //{
          //    List&lt;TreeViewModel&gt; items=JsonConvert.DeserializeObject&lt;List&lt;TreeViewModel&gt;&gt;(selectedItems);
          //    return RedirectToAction(&quot;Index&quot;);
          //}
  
          public IActionResult GetTree()
          {
              List&lt;TreeViewModel&gt; nodes = new List&lt;TreeViewModel&gt;();
              foreach (ParentClass type in _db.parent)
              {
                  nodes.Add(new TreeViewModel
                  {
                      id = type.Id.ToString(),
                      parent = &quot;#&quot;,
                      text = type.ParentName
                  });
              }
              foreach (ChildClass list in _db.child)
              {
                  nodes.Add(new TreeViewModel
                  {
                      id = list.Id.ToString(),
                      parent = list.parentId.ToString(),
                      text = list.ChildName
                  });
              }
              return Json(nodes);
          }
        [HttpGet]
          public IActionResult Create()
          {
              ParentClass parent = new ParentClass();
              return PartialView(&quot;_HomePartial&quot;,parent);
          }
          [HttpPost]
          public IActionResult Create(ParentClass parent)
          {
              if (ModelState.IsValid)
              {
                  _db.parent.Add(parent);
                  _db.SaveChanges();
                  return PartialView(&quot;_HomePartial&quot;, parent);
              }
             
              return RedirectToAction(&quot;Index&quot;);
          }
      }
  </code></pre>
  <p>and this is my index.cshtml where i calling js tree</p>
  <pre><code>&lt;div class=&quot;container&quot; id=&quot;placeHolder&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
          &lt;div class=&quot;col-3&quot;&gt;
              &lt;div class=&quot;row pt-3&quot;&gt;
                  &lt;div class=&quot;col-6&quot;&gt;
                      &lt;p class=&quot;text-primary text-light&quot;&gt;File Structure
                      &lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-6 text-end&quot;&gt;
                      &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;ajax- 
                   modal&quot; data-bs-target=&quot;#Addnode&quot;
                      data-url=&quot;@Url.Action(&quot;Create&quot;)&quot;&gt;&lt;i class=&quot;bi bi-plus-square-fill&quot;&gt; 
                 &lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id=&quot;simpleJsTree&quot;&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col=9&quot;&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  @section scripts{
      &lt;link rel=&quot;stylesheet&quot; 
   href=&quot;https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css&quot; 
       /&gt;
      
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js&quot;&gt; 
          &lt;/script&gt;
      &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js&quot;&gt; 
         &lt;/script&gt;
      &lt;script src=&quot;~/js/JavaScript.js&quot;&gt;&lt;/script&gt;
  
  }
  </code></pre>
  <p>this is my sript for treeview</p>
  <pre><code>$(document).ready(function () {
      $.ajax({
          async: true,
          type: &quot;GET&quot;,
          url: &quot;https://localhost:44376/Home/GetTree&quot;,
          dataType: &quot;json&quot;,
          success: function (json) {
              createJSTree(json);
          }
      });
  });
  function createJSTree(jsondata) {
      $('#simpleJsTree').jstree({
          &quot;core&quot;: {
              &quot;check_callback&quot;: true,
              'data': jsondata
  
          },
          &quot;plugins&quot;: [&quot;contextmenu&quot;],
          &quot;contextmenu&quot;: {
              &quot;items&quot;: function ($node) {
                  var tree = $(&quot;#simpleJsTree&quot;).jstree(true);
                  return {
                      &quot;Create&quot;: {
                          &quot;separator_before&quot;: false,
                          &quot;separator_after&quot;: true,
                          &quot;label&quot;: &quot;Create&quot;,
                          &quot;action&quot;: function (obj) {
                              this.create(obj);
                          }
  
                      },
                      &quot;Rename&quot;: {
                          &quot;separator_before&quot;: false,
                          &quot;separator_after&quot;: false,
                          &quot;label&quot;: &quot;Rename&quot;,
                          &quot;action&quot;: function (obj) {
                              tree.edit($node);
                          }
                      },
                      &quot;Remove&quot;: {
                          &quot;separator_before&quot;: false,
                          &quot;separator_after&quot;: false,
                          &quot;label&quot;: &quot;Remove&quot;,
                          &quot;action&quot;: function (obj) {
                              tree.delete_node($node);
                          }
                      },
                      &quot;Upload&quot;: {
                          &quot;seperator_beore&quot;: false,
                          &quot;seperator_after&quot;: false,
                          &quot;label&quot;: &quot;Upload&quot;
                      }
                  };
              }
          }
      });
      
  }
  </code></pre>
  <p>now i am creating a partial view to add parent node to the tree</p>
  <pre><code>@model ParentClass
  &lt;div class=&quot;modal fade&quot; id=&quot;Addnode&quot;&gt;
      &lt;div class=&quot;modal-dialog&quot;&gt;
          &lt;div class=&quot;modal-content&quot;&gt;
              &lt;div class=&quot;modal-header&quot;&gt;
                  &lt;h4 class=&quot;modal-title&quot;id=&quot;Addnode&quot;&gt;Add Node&lt;/h4&gt;
                  &lt;button type=&quot;button&quot; class=&quot;close&quot; data-bs-dismiss=&quot;modal&quot;&gt;
                      &lt;span&gt;X&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-body&quot;&gt;
                  &lt;form asp-controller=&quot;Home&quot; asp-action=&quot;Create&quot; method=&quot;post&quot;&gt;
                      @Html.HiddenFor(m=&gt;m.Id)
                      &lt;div class=&quot;form-group&quot;&gt;
                          &lt;label asp-for=&quot;ParentName&quot;&gt;&lt;/label&gt;
                          &lt;input asp-for=&quot;ParentName&quot;class=&quot;form-control&quot; /&gt;
                          &lt;span asp-validation-for=&quot;ParentName&quot;class=&quot;text-danger&quot;&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class=&quot;modal-footer&quot;&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-bs- 
                dismiss=&quot;modal&quot;&gt;Close&lt;/button&gt;
                  &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data- 
               save=&quot;modal&quot;&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>this is site.js to get parent node</p>
  <pre><code>$(function () {
      var placeElement = $('#placeHolder');
      $('button[data-toggle=&quot;ajax-modal&quot;]').click(function (event) {
          var url = $(this).data('url');
          $.get(url).done(function (data) {
              placeElement.html(data);
              placeElement.find('.modal').modal('show');
          });
      });
      placeElement.on('click', '[data-save=&quot;modal&quot;]', function (event) {
          var form = $(this).parents('.modal').find('form');
          var actionUrl = form.attr('action');
          var sendData = form.serialize();
          $.post(actionUrl, sendData).done(function (data) {
              placeElement.find('.modal').modal('hide');
          });
      });
  });
  </code></pre>
  <p>firstly i want to bind create action method to the context menu action to create parent node
  and second one is to create child node on selected of parent node if help me out this is new to me to build</p>