AJAXを使用してMVCでクリックして子ノードをロードする

Question

私はmvcとAjaxのことではかなり新しく、トグルボタンをクリックして子供を動的にロードし、どのように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

は、子の値をバインドするためのコードです。あなたが理解してほしいとあなたのために働く：

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('+'); 
}); 

コントローラー：

[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(); 
}