我正在尝试将视图中的表扩展为明细行。扩展功能正在运行，并且获取数据正在运行。但是，我要显示的详细信息表未显示。视图上的html看起来像这样：
<table>
<thead>
<tr><td>Column 1</td></tr>
<tr><td>Column 2</td></tr>
<tr><td>Column 3</td></tr>
</thead>
<tbody>
foreach(var data in ViewData["data"] as List<DataModel>)
{
<tr>
<td>@data.Data1</td>
<td>@data.Data2</td>
<td>@data.Data3</td>
</tr>
<tr>
<td class="hiddenRow" colspan="6">
<div class="accordion-body collapse" id="@data.MembershipId">
<div id="UpdatePanel_@data.MembershipId" class="container">
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
然后，我使用@ data.MembershipId的JQuery来获取明细表的数据：
$(document).ready(function () {
var memberId;
$('.header').click(function () {
$(this).nextUntil('tr.header').slideToggle(50);
memberId = $(this).data("target").replace("#", "");
$.ajax({
type: "GET",
url: "GetActivity",
data: { membershipId: memberId },
success: OnSuccess,
error: OnError
});
});
function OnSuccess(data) {
var TableContent = "<table>" +
"<thead>" +
"<tr>" +
"<td>Detail Column 1</td>" +
"<td>Detail Column 2</td>" +
"<td>Detail Column 3</td>" +
"<td>Detail Column 4</td>" +
"<td>Detail Column 5</td>" +
"</tr>" +
"</thead>" +
"<tbody>";
for (var i = 0; i < data.length; i++) {
TableContent += "<tr>" +
"<td>" + data[i].data1 + "</td>" +
"<td>" + data[i].data2 + "</td>" +
"<td>" + data[i].data3 + "</td>" +
"<td>" + data[i].data4 + "</td>" +
"<td>" + data[i].data5 + "</td>" +
"</tr>";
}
TableContent += "</tbody></table>";
$("#UpdatePanel_" + memberId).html(TableContent);
}
function OnError(data) {
alert("Error: " + data)
}
});
JQuery AJAX调用转到我的控制器以获取SQL数据并获取数据模型列表。数据正确返回，并且如果我检查页面，则可以看到使用数据正确构建的表，但是当我扩展表行时它不显示任何内容。
我认为这不是CSS的问题，但我可能是错的。
答案 0 :(得分：0)
这是它如何工作的。我是现场教师，代码导师，Wyzant和Chegg的教师。也许我可以帮助您进行编程。请将我的答案标记为正确，因为它可以正常工作。如果我们可以一起工作，我们可以改善您的编码，例如应该使用模型代替ViewState。
反正
这是视图
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Tut126</title>
<style type="text/css">
.customCSS {
border: 3px solid #f00;
}
.header {
border: 3px solid #4cff00;
}
</style>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
function Display(arg) {
$("#" + arg.id).collapse('toggle');
}
$(function () {
var memberIds;
$('.header').click(function () {
//header column look like column so we don't need all the children
//$(this).nextUntil('tr.header').slideToggle(50);
$(this).slideToggle(50);
//memberId = $(this).data("target").replace("#", "");
memberIds = $(".customCSS");
var elements = [];
memberIds.each(function () {
elements.push(this.id);
});
var stringOfElementIDs = elements.toString();
$.ajax({
type: "GET",
url: '@Url.Action("GetActivity", "Home")',
data: { membershipIds: stringOfElementIDs },
success: OnSuccess,
error: OnError
});
});
function OnSuccess(data) {
var dataObj = JSON.parse(data);
$.each(dataObj, function (i, anObj) {
var TableContent = "<table>" +
"<thead>" +
"<tr>" +
"<td>Detail Column 1</td>" +
"<td>Detail Column 2</td>" +
"<td>Detail Column 3</td>" +
"<td>Detail Column 4</td>" +
"<td>Detail Column 5</td>" +
"</tr>" +
"</thead>" +
"<tbody>";
TableContent += "<tr>";
$.each(anObj.outData, function (index, val) {
TableContent += "<td>" + val + "</td>";
});
TableContent += "</tr>";
TableContent += "</tbody></table>";
$("#" + anObj.id).html(TableContent);
});
}
function OnError(data) {
alert("Error: " + data)
}
})
</script>
</head>
<body>
<table>
<thead>
Click in the header to get activity
<tr class="header">
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</thead>
<tbody>
@foreach (var data in ViewData["data"] as List<Testy20161006.Controllers.DataModel>)
{
<tr>
<td>@data.DataColumn1</td>
<td>@data.DataColumn2</td>
<td>@data.DataColumn3</td>
</tr>
<tr>
<td class="hiddenRow" colspan="6">
Click in the red row to expand
<div class="accordion-body collapse customCSS container" id="@data.MembershipId" onclick="Display(this)">
...some text1...
</div>
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
这是代码
public string GetActivity(string membershipIds)
{
List<ReturnValue> returnVals = new List<ReturnValue>();
var listOfMembershipIds = membershipIds.Split(',');
foreach (string id in listOfMembershipIds)
{
List<string> toArrayOut = new List<string>();
toArrayOut.Add("Data1");
toArrayOut.Add("Data2");
toArrayOut.Add("Data3");
toArrayOut.Add("Data4");
toArrayOut.Add("Data5");
ReturnValue returnVal = new ReturnValue { id = id, outData = toArrayOut };
returnVals.Add(returnVal);
}
//I NUGETed the JSON Newtonsoft program
var serialized = JsonConvert.SerializeObject(returnVals);
return serialized;
}
public ActionResult Tut126()
{
List<DataModel> listOfDataModel = new List<DataModel>();
DataModel d1 = new DataModel { DataColumn1 = "Data101", DataColumn2 = "Data102", DataColumn3 = "103", MembershipId = "dataMembershipId1" };
DataModel d2 = new DataModel { DataColumn1 = "Data201", DataColumn2 = "Data202", DataColumn3 = "203", MembershipId = "dataMembershipId2" };
listOfDataModel.Add(d1);
listOfDataModel.Add(d2);
ViewData["data"] = listOfDataModel;
return View();
}