Question

我有一个包含记录的简单表，每个表都有一个带有data-id属性的btn来运行确认对话框：

@foreach (var dog in Model)
        {
            <tr>
                <td>@dog.Name</td>
                <td>@dog.Age</td>
                <td><a href="#" data-id="@dog.Id" class="btn btn-danger deleteBtn">Delete</a></td>
            </tr>
        }

点击删除btn后，此代码正在运行：

$('.deleteBtn').on('click', function () {
            $.ajax({
                url: '@Url.Action("DeleteConfirm", "Home")',
                data: {
                    id : $(this).attr('data-id')
                },
                success: function(data)
                {
                    $('#myModal').empty().html(data).modal('show');
                }
            });
        });

正如您所看到的，它在HomeController中对我的Action的Ajax请求。它返回加载到我的Bootstrap对话框的PartialView：

<div class="modal fade" id="myModal">
</div>

显示对话框后，用户可以单击“确认”以通过类saveBtn按钮删除行。那就是我点击后会发生什么：

$('#myModal').on('click', '.saveBtn', function () {
            var numer = $(this).attr('data-id');

            $.ajax({
                url: '@Url.Action("DeleteDog", "Home")',
                type: 'POST',
                dataType: 'JSON',
                data: {
                    id: numer
                },
                success: function (data)
                {
                    if (data = 'true')
                        $('a[data-id=' + numer + ']').closest('tr').remove();
                }
            });
        });

因此，您可以看到有另一个Ajax（此次POST）请求删除该行。

所以这是我的问题。这种方法是好的做法吗？我不确定因为为了删除一行我必须发送2个ajax请求（加载确认对话框，并在确认后删除）。任何人都可以体验开发者对这段代码的评论并说出我是做得好还是坏？我将不胜感激。

Answer 1

挑战你是否可以更有效地做事（如你所拥有的那样）总是一个好主意。所以，让我们考虑一下......

问题：

发送到两个ajax请求是一个好方法 - 一个用于加载局部视图，第二个用于发布部分删除请求 - 用于单个“用户操作”？

答案：

可能。

<强>为什么吗

根据您的示例，如果您的目标是简单地向用户确认他们是否要“删除狗ID： foo ？”你绝对可以做到这一点，而无需前往服务器进行部分查看。据推测，在你的第一个ajax电话 - $(this).attr('data-id'); - 是狗的Id。你已经拥有它了！

在大多数情况下，当您使用标识符发出get请求时，例如/dogs/id?='foo'您正在使用foo从持久数据存储中访问有关该对象的其他一些信息。例如，狗的主人，类似的狗品种，最后一次访问兽医等等。

如果关于狗的其他信息（所有者，其他狗，兽医）是决定是否删除狗的重要部分 AND ，那么有充分理由不在页面加载时加载它，那么发出两个ajax调用是完全有意义的。

如果您只是不希望“父”页面变大，那么即使您不需要额外的“狗”数据，也可以发出两个ajax调用来获取部分视图html （因此，减慢了加载时间。）

最终，如果您没有检索其他数据，并且没有特定的理由加载其他html，那么在这种情况下最好只使用javascript / jquery更新模式对话框：

Example fiddle

使用Bootstrap / jQuery / ASP.MVC确认对话框

1 个答案: