【发布时间】：2012-10-26 09:19:50
【问题描述】：
你好，我正在桌子上工作
如果不刷新站点，我无法自动更新表格。 我需要一种方法来轻松
添加一行，删除一行，修改表格内容中的一行。
我的桌子是这样构建的。
{....}
@using (Html.BeginForm())
{
<fieldset>
<legend>ShiftTypes</legend>
<table class="EditableTable" id="EditableTableShiftTypes">
<thead>
<tr>
<th>
#:
</th>
<th>
ShiftName:
</th>
<th>
ShiftCode:
</th>
<th>
Suplement:
</th>
<th>
ExtraSuplement:
</th>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (BPOPortal.Domain.Models.ShiftTypeView type in Model.ShiftTypeList)
{
<tr>
<td>
@type.ID
</td>
<td>
@type.ShiftName
</td>
<td>
@type.Name
</td>
<td>
@type.Supplement
</td>
<td>
@type.OneTimePayment
</td>
<td>
<button>
Delete</button>
</td>
</tr>
}
<tr>
<td>
<label>
</label>
</td>
<td>
@Html.Editor("ShiftName")
</td>
<td>
@Html.Editor("ShiftCode")
</td>
<td>
@Html.Editor("Suplement")
</td>
<td>
@Html.DropDownList("ExtraSuplement", new SelectListItem[] { new SelectListItem() { Text = "yes", Value = "true", Selected = false }, new SelectListItem() { Text = "No", Value = "false", Selected = false } }, "--Choose--")
</td>
<td>
<button id="AddButton">
Add</button>
</td>
</tr>
</tbody>
</table>
<button type="submit" id="Gem">
Save</button>
</fieldset>
{....}
我尝试通过以下方式使用 Ajax，但它刷新了整个页面。
{....}
var ID= 2;
$("#AddButton").click(function(){
var ShiftName= $('#ShiftName').attr('value');
var ShiftCode= $('#ShiftCode').attr('value');
var Suplement= $('#Suplement').attr('value');
var ExtraSuplement= $('#ExtraSuplement').attr('value');
$.ajax({
url: '@Url.Action("AddData", "ShiftTypesConfiguration")',
data: { ID: ID.toString(), ShiftName: $('#ShiftName').attr('value'), ShiftCode: $('#ShiftCode').attr('value'), Suplement: $('#Suplement').attr('value'), ExtraSuplement: $('#ExtraSuplement').attr('value') },
type: 'POST',
// contentType: 'application/json; charset=utf-8;',
dataType: 'json',
success: function (response)
{
function fnClickAddRow() {
$('#EditableTableShiftTypes').dataTable().fnAddData([
response.ID,
response.ShiftName,
response.ShiftCode,
response.Suplement,
response.ExtraSuplement,
"<button>Delete</button>"]); }
}
});
ID++;
});
{....}
</script>
控制器中的我的方法应该处理请求。
public JsonResult AddData(string ID, string ShiftName, string ShiftCode, string Suplement, string ExtraSuplement)
{
TableViewModel tableViewModel = new TableViewModel();
tableViewModel.ID = ID;
tableViewModel.ShiftName= ShiftName;
tableViewModel.ShiftCode= ShiftCode;
tableViewModel.Suplement= Suplement;
tableViewModel.ExtraSuplement= ExtraSuplement;
return Json(tableViewModel);
}
但是它似乎不起作用现在我正在寻求想法和方法来使它更好/更容易/工作
编辑：看到一个副本过去错误
EDIT2：我现在稍微改变了一下，我发现我的脚本运行方式有错误，这是最新的。仍然存在问题，但至少现在我可以看到并描述错误。
这就是我现在改的脚本
$("#AddButton").click(function (event) {
event.preventDefault();
var ShiftName = $('#ShiftName').attr('value');
var ShiftCode = $('#ShiftCode').attr('value');
var Suplement = $('#Suplement').attr('value');
var ExtraSuplement = $('#ExtraSuplement').attr('value');
$.ajax({
url: '@Url.Action("AddData", "ShiftTypesConfiguration")',
data: { ID: ID.toString(), ShiftName: ShiftName, ShiftCode: ShiftCode, Suplement: Suplement, ExtraSuplement: ExtraSuplement },
type: 'POST',
// contentType: 'application/json; charset=utf-8;',
dataType: 'json',
success: function (response) {
function fnClickAddRow() {
$('#EditableTableShiftTypes').dataTable().fnAddData([
response.ID,
response.ShiftName,
response.ShiftCode,
response.Suplement,
response.ExtraSuplement,
"<button>Delete</button>"]);
}
}
});
ID++;
});
现在在萤火虫的帮助下，我看到这些值又回到了页面上，但在我看到它们之前，页面已经刷新了。
【问题讨论】：
-
fnAddData 函数有什么作用？你可以添加代码吗？此外，您可能会通过在 chrome 或 firebug 上调试 js 来获得有关它为什么不起作用的更多信息。
-
fnAddData 是一个应该添加到数据表行的函数，我在使用 DataTables Jquery 插件时得到它。我一直在尝试萤火虫。但是它似乎正在运行，但什么也没发生。在某些情况下，整个页面都加载到表格中。我也可以毫无问题地使用 AddData 方法。
-
您是否应该在您的 javascript 点击功能上添加
event.preventDefault();，因为点击任何按钮元素肯定会重新加载页面？所以你有.click(function fnClickAddRow(event) { event.preventDefault(); -
我认为 Kolin 和 Yasser 的观点很好。基本上尝试推出您自己的 fnAddData 版本，不应该太复杂。例如，您可能还想将按钮更改为锚点。
-
好的，我现在成功了我有的功能。最终我发现我在代码中有一个不需要的函数。我删除了函数 fnClickAddRow() {}，现在它按预期工作。所以如果你把你的评论作为答案然后我会给你一些功劳。否则我会把功劳归功于 Yasser，因为他还让我重新思考我的方法，最终导致了这个结果
标签： c# jquery ajax razor asp.net-mvc-4