如何仅使用ajax调用将新的输入数据而不是表单的所有数据绑定到控制器,以将数据发送到控制器?

时间:2019-12-30 13:32:45

标签: javascript jquery ajax asp.net-mvc

我的数据表中有近150行,并且有一个输入字段值,用户可以在任何行中更改该值,然后按批量更新以提交表单,目前我正在使用serializeArray()函数发送所有150行。不论用户是否插入新值,都会导致回发延迟过多,有一种方法是我仅绑定表单中的更改值,而不是全部150行。

<form id="share">
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="container col-md-12">
    <table id="myTable" class="table table-hover table-striped table-bordered dataTable">
        <thead>
            <tr>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().Id)</th>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagName)</th>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagCategory)</th>
                <th style="text-align:center">@Html.DisplayNameFor(m => Model.tags.First().TagValue)</th>
                <th style="text-align:center"> Action</th>
            </tr>
        </thead>
        <tbody>
            @for (int i = 0; i < Model.tags.Count(); i++)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(m => Model.tags[i].Id)
                        @Html.HiddenFor(m => Model.tags[i].Id)
                    </td>
                    <td>
                        @Html.DisplayFor(m => Model.tags[i].TagName)
                    </td>
                    <td>
                        @Html.DisplayFor(m => Model.tags[i].TagCategory)
                    </td>
                    <td>
                        @Html.EditorFor(m => Model.tags[i].TagValue, new { htmlAttributes = new { @id = "TagVaule_" + Model.tags[i].Id, @class = "form-control" } })
                        @Html.ValidationMessageFor(m => Model.tags[i].TagValue, "", new { @class = "text-danger" })

                    </td>

                    </td>
                </tr>
            }
        </tbody>
    </table>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content" id="myModalContent">

            </div>
        </div>
    </div>
                <button type="submit" class="btn btn-danger" id="bulkupdate">BulkUpdate</button>

    </div>
</div>

$('#share').on('submit', function (e) {
                debugger;
                // Prevent actual form submission
                e.preventDefault();
                var data = table.$('input').serializeArray();
                // Submit form data via Ajax
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("BulkUpdate", "Home")',
                    data: data,
                    success: function (data) {
                        $('#myModalContent').html(data);
                        $('#myModal').modal('show');
                    }
                });
            });

0 个答案:

没有答案