我是MVC和Ajax Thing的新手,我已经完成了此任务,可以通过单击切换按钮并将这些孩子Divs放入父母中,以动态加载孩子。如何使用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('+');
});
以下是绑定子值的代码。希望您理解并为您工作:
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();
}