Javascript 使用AJAX在MVC中单击加载子节点_Javascript_Jquery_Ajax_Asp.net Mvc

Javascript 使用AJAX在MVC中单击加载子节点

javascript jquery ajax asp.net-mvc

Javascript 使用AJAX在MVC中单击加载子节点,javascript,jquery,ajax,asp.net-mvc,Javascript,Jquery,Ajax,Asp.net Mvc,我对mvc和ajax非常陌生，我的任务是通过单击切换按钮动态加载子项，并将这些子项放入父项中。如何使用ajax实现这一点 HTML: 下面是绑定子值的代码。希望您理解并为您工作： HTML: 控制器： [HttpPost] public JsonResult GetSubItems(int id) { List<Item> itemList = new List<Item>(); string subItemList; try {

我对mvc和ajax非常陌生，我的任务是通过单击切换按钮动态加载子项，并将这些子项放入父项中。如何使用ajax实现这一点

HTML:

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

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

[HttpPost]
public JsonResult GetSubItems（int-id）
{
List itemList=新列表（）；
字符串子项列表；
尝试
{
//使用父项id获取子项列表
itemList=GetSubItemList（id）；
//将列表绑定到HTML
subItemList=bindItems（itemList）；
}
捕获（例外情况除外）
{
例如message.ToString（）；
}
返回Json（subItemList，JsonRequestBehavior.AllowGet）；
}
私有字符串绑定项（列表）
{
StringBuilder sb=新的StringBuilder（）；
如果（列表！=null）
{
如果（list.Count>0）
{
foreach（列表中的var m）
{
某人加上“”；
某人加上（“”）；
某人加上“+”；
某人附加（姓名）；
某人附加（“添加”）；
某人追加（“编辑”）；
某人追加（“删除”）；
sb.追加（“”）；
某人追加（“”）；
某人加上（“”）；
某人追加（“”）；
}
}   
}
使某人返回字符串（）；
}

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

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

[HttpPost]
public JsonResult GetSubItems（int-id）
{
List itemList=新列表（）；
字符串子项列表；
尝试
{
//使用父项id获取子项列表
itemList=GetSubItemList（id）；
//将列表绑定到HTML
subItemList=bindItems（itemList）；
}
捕获（例外情况除外）
{
例如message.ToString（）；
}
返回Json（subItemList，JsonRequestBehavior.AllowGet）；
}
私有字符串绑定项（列表）
{
StringBuilder sb=新的StringBuilder（）；
如果（列表！=null）
{
如果（list.Count>0）
{
foreach（列表中的var m）
{
某人加上“”；
某人加上（“”）；
某人加上“+”；
某人附加（姓名）；
某人附加（“添加”）；
某人追加（“编辑”）；
某人追加（“删除”）；
sb.追加（“”）；
某人追加（“”）；
某人加上（“”）；
某人追加（“”）；
}
}   
}
使某人返回字符串（）；
}

此GetSubItemList（id）来自何处？GetSubItemList（id）将是获取要绑定并显示为子项的子项列表的方法。（从数据库或任何文件）此GetSubItemList（id）来自何处？GetSubItemList（id）将是获取要绑定并显示为子项的子项列表的方法。（从数据库或任何文件）

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

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