问题描述
我根本不知道为什么会这样。因为相同的代码适用于GridView控件，但不适用于DataList控件。下面给出的代码适用于使用ajax调用加载了DataList控件的asp.net网页（使用ajax完成数据绑定）。
发生以下错误：未捕获的DOMException：无法在“节点”上执行“ appendChild”：新的子元素包含父元素。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ADataList.aspx.cs" Inherits="WebServices.controls.ADataList" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server">
<HeaderTemplate>
<tr>
<th>Customer ID</th>
<th>Name</th>
<th>Country</th>
<th>Actions</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td id="CustomerId" style="margin-left: 160px">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
</td>
<td id="Name">
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
<asp:TextBox Text='<%# Eval("Name") %>' runat="server" Style="display: none" />
</td>
<td id="Country">
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Country") %>'></asp:Label>
<asp:TextBox Text='<%# Eval("Country") %>' runat="server" Style="display: none" />
</td>
<td>
<asp:LinkButton Text="Edit" runat="server" CssClass="Edit" />
<asp:LinkButton Text="Update" runat="server" CssClass="Update" Style="display: none" />
<asp:LinkButton Text="Cancel" runat="server" CssClass="Cancel" Style="display: none" />
<asp:LinkButton Text="Delete" runat="server" CssClass="Delete" />
</td>
</tr>
</ItemTemplate>
</asp:DataList>
<table style="border-collapse: collapse">
<tr>
<td style="width: 150px">Name:<br />
<asp:TextBox ID="txtName" runat="server" Width="140" />
</td>
<td style="width: 150px">Country:<br />
<asp:TextBox ID="txtCountry" runat="server" Width="140" />
</td>
<td style="width: 100px">
<br />
<asp:Button ID="btnAdd" runat="server" Text="Add" />
</td>
</tr>
</table>
</div>
</form>
<script>
$(function () {
$.ajax({
type: "POST",url: "service.asmx/GetCustomers",data: '{}',contentType: "application/json; charset=utf-8",dataType: "json",success: OnSuccess
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Table");
var row = $("[id*=DataList1] tr:last-child");
if (customers.length > 0) {
$.each(customers,function () {
AppendRow(row,$(this).find("CustomerId").text(),$(this).find("Name").text(),$(this).find("Country").text()),row = $("[id*=DataList1] tr:last-child").clone(true);
});
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
function AppendRow(row,customerId,name,country) {
//Bind CustomerId.
$("#CustomerId",row).find("span").html(customerId);
//Bind Name.
$("#Name",row).find("span").html(name);
$("#Name",row).find("input").val(name);
//Bind Country.
$("#Country",row).find("span").html(country);
$("#Country",row).find("input").val(country);
row.find(".Edit").show();
row.find(".Delete").show();
$("[id*=DataList1]").append(row); //This line is giving error on running .each
}
//Add event handler.
$("body").on("click","[id*=btnAdd]",function () {
var txtName = $("[id*=txtName]");
var txtCountry = $("[id*=txtCountry]");
$.ajax({
type: "POST",url: "service.asmx/InsertCustomer",data: '{name: "' + txtName.val() + '",country: "' + txtCountry.val() + '" }',success: function (response) {
var row = $("[id*=DataList1] tr:last-child");
if ($("[id*=DataList1] tr:last-child span").eq(0).html() !== " ") {
row = row.clone();
}
AppendRow(row,response.d,txtName.val(),txtCountry.val());
txtName.val("");
txtCountry.val("");
}
});
return false;
});
//Edit event handler.
$("body").on("click","[id*=DataList1] .Edit",function () {
var row = $(this).closest("tr");
$("td",row).each(function () {
if ($(this).find("input").length > 0) {
$(this).find("input").show();
$(this).find("span").hide();
}
});
row.find(".Update").show();
row.find(".Cancel").show();
row.find(".Delete").hide();
$(this).hide();
return false;
});
//Update event handler.
$("body").on("click","[id*=DataList1] .Update",row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
span.html(input.val());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Cancel").hide();
$(this).hide();
var customerId = row.find("#CustomerId").find("span").html();
var name = row.find("#Name").find("span").html();
var country = row.find("#Country").find("span").html();
$.ajax({
type: "POST",url: "service.asmx/UpdateCustomer",data: '{customerId: ' + customerId + ',name: "' + name + '",country: "' + country + '" }',dataType: "json"
});
return false;
});
//Cancel event handler.
$("body").on("click","[id*=DataList1] .Cancel",row).each(function () {
if ($(this).find("input").length > 0) {
var span = $(this).find("span");
var input = $(this).find("input");
input.val(span.html());
span.show();
input.hide();
}
});
row.find(".Edit").show();
row.find(".Delete").show();
row.find(".Update").hide();
$(this).hide();
return false;
});
//Delete event handler.
$("body").on("click","[id*=DataList1] .Delete",function () {
if (confirm("Do you want to delete this row?")) {
var row = $(this).closest("tr");
var customerId = row.find("span").html();
$.ajax({
type: "POST",url: "service.asmx/DeleteCustomer",data: '{customerId: ' + customerId + '}',success: function (response) {
if ($("[id*=DataList1] tr").length > 2) {
row.remove();
} else {
row.find(".Edit").hide();
row.find(".Delete").hide();
row.find("span").html(' ');
}
}
});
}
return false;
});
</script>
</body>
</html>
![Click here to see the output: In this image only the first record is showing on output from the database. This means the .each loop is running only once and giving error on this line $("[id*=DataList1]").append(row);](https://i.stack.imgur.com/rpgfQ.png){kind=link}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）