3

嗨，我在桌子上工作

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

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

我的桌子是这样建造的。

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

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

4

1 回答 1

0

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

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

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

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

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

于 2012-10-26T09:31:48.390 回答