C# 如何在不刷新整个站点的情况下更新表

嗨，我在桌子上工作

我无法在不刷新站点的情况下更新表。 我需要一种简单的方法

添加行、删除行、修改表内容中的行

我的桌子是这样造的

{....}
@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>
{....}

然而，它现在似乎不起作用，我正在寻求一些想法和方法，使它更好/更容易/有效

编辑：看到一个复制过去的错误

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++;
});

$（“#添加按钮”）。单击（函数（事件）{
event.preventDefault（）；
var ShiftName=$（'#ShiftName'）.attr（'value'）；
var ShiftCode=$（'#ShiftCode'）.attr（'value'）；
var supelement=$（'#supelement'）.attr（'value'）；
var ExtraSuplement=$（'#ExtraSuplement'）.attr（'value'）；
$.ajax({
url:'@url.Action（“AddData”，“ShiftTypesConfiguration”），
数据：{ID:ID.toString（），ShiftName:ShiftName，ShiftCode:ShiftCode，supElement:supElement，extrasupElement:extrasupElement}，
键入：“POST”，
//contentType:'application/json；charset=utf-8；'，
数据类型：“json”，
成功：功能（响应）{
函数fnclickdaddrow（）{
$（'#EditableTableShiftTypes'）.dataTable（）.FNADDATA([
回应:，
response.ShiftName，
response.ShiftCode，
答复,补充,，
回答：额外补充，
“删除”]）；
}
}
});
ID++；
});

---

现在，在firebug的帮助下，我看到这些值回到了页面上，但在我看到它们之前，页面已刷新。

我在这里不是用代码编写的，但这里是您应该如何做的

在添加/编辑/删除时，对您的操作进行ajax调用。在您的操作中实现您的操作（添加/编辑/删除），并根据操作是否成功完成或由于某些错误而失败，以json的形式返回true/false标志

然后在ajax调用的success函数

success:function（response）{}

中，检查返回的值是否为true/false，这表示成功还是错误

然后使用一些jquery可以在表中添加行或删除行

---

查看以下链接：

fnAddData函数的作用是什么？你能添加代码吗？另外，通过在chrome或firebug上调试js，您可能会得到更多关于它为什么不工作的信息。fnAddData是一个函数，当我使用DataTables Jquery插件时，它应该添加到DataTables的行中。我一直在试萤火虫。然而，它似乎正在运行，只是什么也没发生。在某些情况下，整个页面加载到表中。我还顺利地使用了AddData方法在javascript单击函数上，因为单击任何按钮元素都会重新加载页面？因此您有了

.click（函数fnClickAddRow（event）{event.preventDefault（）

我认为Kolin和Yasser的观点很好。试着推出你自己的fnAddData版本基本上不应该太复杂。你可能还想把按钮改成锚。好吧，我现在成功了，我不会为此给自己评分，因为你说尝试推出你自己的fnAddData版本是正确的f fnaddata你让我思考了为什么我有这个函数，以及我有哪些函数。最终我发现代码中有一个不需要的函数。我删除了函数fnClickAddRow（）{}现在它按照预期和预期工作。因此，如果你把你的评论作为一个答案，那么我会给你一些积分。否则我会给亚西尔积分，因为他也让我重新思考我的方法，最终导致这个结果

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);
    }

 $("#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++;
});