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

Question

嗨，我正在处理一张 table

如果不刷新站点，我无法自动更新表。我需要一种轻松的方法

在表格内容中添加一行、删除一行、修改一行。

我的 table 是这样构建的。

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

Controller 中应处理请求的我的方法。

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

但是它似乎不起作用现在我正在寻求想法和方法来使其更好/更容易/工作

编辑:看到了错误的副本

编辑2:我现在稍微改变了它，我发现我的脚本运行方式有错误，这是最新的。仍然存在问题，但至少现在我可以看到并描述错误。

这就是我现在更改的脚本

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

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

Answer 1

我不是在这里编写代码，但您应该这样做。

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

然后在ajax调用的success函数success: function (response){}中，检查返回的值是true/false，即成功还是错误。

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

查看这些链接:http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/