javascript - 使用 AJAX 在 MVC 中单击时加载子节点

Question

我对 mvc 和 ajax 很陌生，我有这个任务通过单击切换按钮动态加载子项并将这些子项 div 放入父项 div 中。如何使用 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

下面是绑定(bind)子值的代码。希望您理解并为您工作:

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