Question

嗨，我正在办公桌

我不能在没有网站刷新的情况下更新表格。我需要一种轻松的方法

添加行，删除行，修改表格内容中的行。

我的桌子是这样构建的。

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

然而它似乎不起作用现在我要求的想法和方法，使这更好/更容易/工作

修改：看到错误的副本

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

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

Answer 1

我不是在这里写代码，但这是你应该怎么做的。

在添加/编辑/删除时，对您的操作进行ajax调用。在您的Action实现您的操作（添加/编辑/删除）并根据操作成功完成或由于某些错误而失败，返回一个真/假标志为json。

然后在ajax调用的成功函数success: function (response){}中，检查返回的值是否为true / false，这意味着成功或错误。

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

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

如何在不刷新整个站点剃须刀的情况下更新表

1 个答案: