我正在尝试向使用 JQuery 启用分页的 MVC3 WebGrid 添加一行。
当我添加新行时,它作为最后一行正确插入,但是当我的 WebGrid 中有超过 1 页时出现问题。
打算在最后一个 WebGrid 页面的最后一行插入的新行将插入到第一个 WebGrid 页面上。
Javascript代码:
$("#add-category-dialog").dialog({
resizable: false,
height: 300,
modal: true,
autoOpen: false,
open: function (event, ui) {
var objectid = 0;
$('#add-category-dialog').load("/Categories/CreateEditPartial", { id: objectid });
},
buttons: {
"Save": function () {
var ai = {
categoryID: $(this).data('id'),
Name: $("#Name").val()
};
var json = $.toJSON(ai);
$.ajax({
url: $(this).data('url'),
type: 'POST',
dataType: 'json',
data: json,
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('.pretty-table tr:last').after('<tr><td>....</td></tr>');
},
error: function (data) {
var data = data;
alert("Error");
}
});
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#add-category-btn").live("click", function () {
var url = $(this).attr('controller');
$("#add-category-dialog")
.data('url', url)
.dialog('open');
event.stopPropagation();
return true;
});
控制器:
[HttpPost]
public ActionResult Create(Category Category)
{
if (ModelState.IsValid)
{
context.Categories.Add(Category);
context.SaveChanges();
}
return Json(new { Success = Category.CategoryID > 0, Category });
}
看法:
var grid = new WebGrid(Model, ajaxUpdateContainerId: "category-grid", canPage: true, rowsPerPage: 30);
@grid.GetHtml(
tableStyle: "pretty-table",
headerStyle: "ui-widget-header",
columns: grid.Columns(
grid.Column("CategoryID", "Id", canSort: true, format: @<b>@item.CategoryID</b>),
grid.Column("Name", "Name", canSort: true, format: @<b>@item.Name</b>)
)
)