带有Bootstrap / jQuery / ASP.MVC的确认对话框

Question

I have a simple table with records and each of them has a btn with data-id attribute to run the confirmation dialog:

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

After clicking the delete btn, this code is running :

$('.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');
                }
            });
        });

As you can see, its Ajax request to my Action in HomeController. It returns PartialView that is loaded to my Bootstrap dialog:

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

After showing the dialog, the user can click confirm to delete the row via button with class saveBtn. Thats what happens after I click it :

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

So as you can see there is another Ajax (POST this time) request to delete the row.

So here is my question. Is this approach good practice? I'm not sure because in order to delete a row i have to send 2 ajax request (to load confirm dialog, and delete after confirm). Can anyone experience developer comment this code and say whether im doing it good or bad? I would be grateful.

Answer 1

It's always a good idea to challenge whether or not you could do things more effectively (as you have here.) So, let's think about it...

The Question:

Is it a good approach to send to two ajax requests - one to load a partial view and the second to post a delete request from the partial - for a single "user action"?

The Answer:

Maybe.

Why?

Based your example, if your goal is to simply confirm with the user whether or not they want to "Delete Dog ID: foo ?" You can absolutely do that without making a trip to the server for a partial view. Presumably, in your first ajax call - $(this).attr('data-id'); - is the dog's Id. You already have it!

In most circumstances, when you make a get request with an identifier, like /dogs/id?='foo' you're using foo to access some additional information about the object from a persistent data store. Like, for example, the dog's owners, similar dog breeds, last visit to the vet, etc.

If additional information about the dog (owners, other dogs, vet) is an important part of deciding whether or not to delete the dog AND there's a good reason not to load it when the page loads intially then it totally makes sense to issue two ajax calls.

It could also make sense to issue two ajax calls just to get the partial view html, even if you don't need additional "dog" data, if you simply don't want the "parent" page to be to big (hence, slowing it's loading time.)

Ultimately, though if you're not retrieving additional data, and there's no specific reason to load additional html, it's probably best in this case to just update the modal dialog using javascript/jquery:

Example fiddle