asp mvc animate удаление строки таблицы

Question

Как я могу применить некоторые эффекты, если я собираюсь удалить строку таблицы, сейчас я просто использую функцию reload () для обновления моих данных.

Мой стол такой:

<table class="sortable" border="1" id="table2">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td width="50%">@item.name</td>
                <td>

                    <button onclick="Remove('@item.name', '@item.age')" type="button" class="btn btn-danger">
                        Remove
                    </button>


                </td>
            </tr>
        }
    <tbody>
</table>

И мой скрипт, чтобы удалить, а затем обновить:

 function Remove(name, age) {
        var result = confirm("Are you want to remove " + name);
        if (result == true) {

            $.ajax({
                url: '/Home/Remove',
                type: 'POST',
                data: {
                    'id': name,
                },
                success: function (data) {
                    location.reload() //---> Want to have effects rather than refresh
                    alert('Data has been successfully removed');
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }
    }

Answer 1

В обработчике onclick в вашем HTML, передайте this в качестве параметра для вашего Remove метода.

onclick="Remove(this, '@item.name', '@item.age')"

Добавьте новый параметр в ваш метод, чтобы принять его. При нажатии кнопки удаления это будет элемент кнопки.

Теперь используйте метод closest, чтобы получить ссылку на строку внешней таблицы. В обработчике success вашего ajax-метода вы теперь можете вызвать метод fadeOut и затем в конечном итоге удалить строку таблицы из DOM.

function Remove(that, name, age) {
        var result = confirm("Are you want to remove " + name);
        if (result == true) {

           // Get the jQuery object of the outer TR of clicked button
           $tr = $(that).closest("tr");

            $.ajax({
                url: '/Home/Remove',
                type: 'POST',
                data: {
                    'id': name,
                },
                success: function (data) {
                     $tr.find('td').fadeOut(400,function() {
                          $tr.remove();
                     });
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }
    }