我使用MVC5进行编程,并且在一个视图中我想使用一个表,但是tjis表应该是一个Ajax,并且所有的时间都应该修改行号,即使从我的表中省略了一个记录。总是数字应该是一个顺序(1,2,3,...)。同样在表的底部我想显示页码,所有这些职责都应该用于Ajax。 我使用Handlebars.js进行这些操作,并根据主机网页的说明编写了我的程序。现在我的问题是我的数据没有显示在我的表格中,我不知道为什么......
感谢您的帮助
部分视图=> _GDview
<script id="entry-template" type="text/x-handlebars-template">
{{#each list}}
<tr>
<th>{{index}}</th>
<th>{{Author}}</th>
<th>{{Email}}</th>
<th>{{Subject}}</th>
<th>{{TextBody}}</th>
<th>{{MessageDate}}</th>
<td>
<a href="/admin/Contact/Edit/{{this.id}}">Edit</a>
<a href="/admin/Contact/Delete/{{this.id}}">Delete</a>
</td>
</tr>
{{/each}}
<table align="center" border="1" style="border:2px solid black" id="grid">
<thead>
<tr>
<th>index</th>
<th>author</th>
<th>email</th>
<th>subject</th>
<th>textmessage</th>
<th>date</th>
<th>edit / delete</th>
</tr>
</thead>
<tbody>
</tbody>
Index.chtml
<script src="~/js/handlebars.min.js"></script>
<script src="~/js/GDview.js"></script>
@Html.Partial("_GDview")
的ContactController
public JsonResult Get(int pageIndex, int pageSize)
{
JsonResult result = new JsonResult();
result.Data = new
{
RecordCount = Messages.Count(),
RecordData = Messages.SelectMessages(pageIndex, pageSize)
};
return result;
}
Messages.cs
public static List<Message> SelectMessages()
{
return db.Messages.ToList();
}
GDview.js
$(function () {
var pageSize = 1; pageIndex = 1; counter = 1;
//Set Row Number
Handlebars.registerHelper('index', function () {
return (pageindex - 1) * pageSize + counter++;
});
//Set PageSize
$("#size").change(function () {
pageSize = $(this).val();
pageIndex = 1;
counter = 1;
GridView();
})
//Set PageIndex
$(".paging").delegate('a.page', 'click', function () {
pageIndex = $(this).attr("data-index");
counter = 1;
GridView();
})
//Main Function(AJAX)
function GridView() {
$("#loading").fadeIn("slow");
$.ajax({
url: '/Admin/Contact/Get',
type: 'Post',
data: { pageIndex: pageIndex, pageSize: pageSize },
success: function (result) {
var source = $("#entry-template").html();
var template = handlebars.compile(source);
var output = template({
list: result.RecordData,
Count: result.RecordCount
});
$('#grid tbody').html(output);
},
error: function () {
alert('Nok');
}
})
}
GridView();
})
function makepaging(totalPages, pageIndex) {
var opaging, i, j, k;
i = pageIndex;
j = pageIndex - 1;
k = pageIndex + 1;
var oBefore, oAfter;
oBefore = "";
oAfter = "";
while (j != 0 && j != i - 6) {
oBefore = "<a class='Page' href='#' data-index='" + (j) + "'>" + j + "</a> " + oBefore;
j--;
}
if ((i - 6) > 0)
oBefore = " <a class='Page' href='#' data-index='" + (i - 6) + "'>...</a> " + oBefore;
for (; k < totalPages + 1 && k < i + 6; k++) {
oAfter += "<a class='Page' href='#' data-index='" + (k) + "'>" + k + "</a> ";
}
if ((i + 6) <= totalPages)
oAfter += "<a class='Page' href='#' data-index='" + (i + 6) + "'>...</a> ";
oPaging = oBefore + "<a class='CurPage' href='#' rel='' style='color:white;background-color:black'>" + i.toString() + "</a> " + oAfter;
$('.paging').html(oPaging);
}