Load Kind Knoten auf Klick in MVC mit AJAX

Question

Ich bin ziemlich neu zu MVC und AJAX-Sache, und ich habe diese Aufgabe, um Kinder dynamisch zu laden, indem Sie auf eine Schaltfläche klicken und diese Kinder divs innerhalb der Eltern setzen. Wie macht man das mit Ajax?

HTML:

@helper PopulateDivs(List<Tree_List.Controllers.Element> elements) 
{ 

foreach (var element in elements) 
{ 
     <div class="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID" style="display:none"> 
      <button class="toggler_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">+</button> 
      @element.NAME 
      <button class="add_btn" type="button" data-id="@element.ID">Add</button> 
      <button class="edit_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">Edit</button> 
      <button class="delete_btn" type="button" data-id="@element.ID">Delete</button> 
      @if (element.CHILDS.Count() > 0) 
      { 
       @PopulateDivs(element.CHILDS); 
      } 
     </div> 
    } 
} 

JS:

 $('.toggler_btn').on('click', function() 
    { 
     var id = $(this).attr('data-id'); 
     var elem = $('.element_wrapper[data-parent="' + id + '"]'); 
     if ($(this).text() === '+') { 
      $.ajax({ 
       type: "post", 
       url: "/List/GetSubItems", 
       contentType: "application/json", 
       dataType: "json", 
       data: '{"parent_id":"' + id + '"}', 
       success: alert("DONE") // something must be done here!!! 
      }); 
      $(this).html('-'); 
     } 
     else $(this).html('+'); 
    }); 

Answer 1

Unten ist der Code für Werte Kind-Bindung. Hoffnung, die Sie verstehen und für Sie arbeiten:

HTML:

<ul> 
     @foreach (var element in elements) 
     { 
      <li> 
       <div class="element_wrapper" data-id="@element.ID" data-parent="@element.PARNET_ID" style="display:none"> 
         <button class="toggler_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">+</button> 
         @element.NAME 
         <button class="add_btn" type="button" data-id="@element.ID">Add</button> 
         <button class="edit_btn" type="button" data-id="@element.ID" data-parent="@element.PARNET_ID">Edit</button> 
         <button class="delete_btn" type="button" data-id="@element.ID">Delete</button> 
         <ul id="childItems-@element.ID"> 

         </ul> 
       </div> 
      </li> 
     } 
    </ul> 

JS:

$('document').on('click','.toggler_btn' function (evt) { 
    evt.preventDefault(); 
    evt.stopPropagation(); 
    var id = $(this).attr('data-id'); 

    if ($(this).text() === '+') { 
     $.ajax({ 
      url: '/List/GetSubItems', 
      data: '{"id":"' + id + '"}', 
      cache: false, 
      type: "POST", 
      dataType: "html", 
      success: function (data) { 
       $("#childItems-"+id).html(data); 
      } 
     }); 

     $(this).html('-'); 
    } 
    else 
     $(this).html('+'); 
}); 

Controller:

[HttpPost] 
public JsonResult GetSubItems(int id) 
{ 
    List<Item> itemList = new List<Item>(); 
    string subItemList; 
    try 
    { 
     //Get Sub-item list using parent_id 
     itemList = GetSubItemList(id);  
     //Bind list to HTML 
     subItemList = bindItems(itemList); 
    } 
    catch(Exception ex) 
    { 
     ex.message.ToString(); 
    } 

    return Json(subItemList,JsonRequestBehavior.AllowGet); 
} 

private string bindItems(List<Item> list) 
{ 
    StringBuilder sb = new StringBuilder(); 

    if (list != null) 
    { 
     if (list.Count > 0) 
     { 
      foreach (var m in list) 
      { 
       sb.Append("<li>"); 
       sb.Append("<div class='element_wrapper' data-id='"+m.ID+"' data-parent='"+m.ParentID+"' style='display:none'>"); 
        sb.Append("<button class='toggler_btn' type='button' data-id='"+m.ID+"' data-parent='"+m.ParentID+"'>+</button>"); 
        sb.Append(m.NAME); 
        sb.Append("<button class='add_btn' type='button' data-id='"+m.ID+"'>Add</button>"); 
        sb.Append("<button class='edit_btn' type='button' data-id='"+m.ID+"' data-parent='"+m.ParentID+"'>Edit</button>"); 
        sb.Append("<button class='delete_btn' type='button' data-id='"+m.ID+"'>Delete</button>"); 
        sb.Append("<ul id='childItems-"+m.ID+"'>"); 
        sb.Append("</ul>"); 
       sb.Append("</div>"); 
       sb.Append("</li>"); 
      } 
     } 
    } 

    return sb.ToString(); 
}