Кнопки действий в виде бритвы ASP.NET Core 2.2 - PullRequest
Новая
       33

Кнопки действий в виде бритвы ASP.NET Core 2.2

0 голосов
/ 29 декабря 2018

Предположим, мы изменили представление ниже:

enter image description here

Текущий код: 

@foreach (var item in Model) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Url)
        </td>
        <td>
            <a asp-action="Edit" asp-route-id="@item.BlogId">Edit</a> |
            <a asp-action="Details" asp-route-id="@item.BlogId">Details</a> |
            <a asp-action="Delete" asp-route-id="@item.BlogId">Delete</a>
        </td>
    </tr>
}

Наша цель -удалить Delete представление, которое связано в каждой строке.Вместо этого мы хотели бы иметь кнопку удаления, которая удаляет строку после подтверждения, не покидая страницы Index (перезагрузка в порядке).

Как можно реализовать такую ​​кнопку?И есть ли соответствующая документация?

1 Ответ

0 голосов
/ 29 декабря 2018

Вы можете использовать ajax для выдачи запроса на удаление, чтобы пользователь мог остаться в процессе удаления.После успешного выполнения ajax-запроса вы можете удалить строку таблицы из пользовательского интерфейса.

Сначала добавьте новый атрибут в тег привязки, который вы можете использовать для селектора jQuery, чтобы связать событие click. 

<a asp-action="Delete" ajaxy asp-route-id="@item.BlogId">Delete</a>

Здесь я добавил атрибут с именем ajaxy

Теперь мы будем слушать событие click в тегах привязки с этим атрибутом ajaxy, останавливать нормальное поведение (переход кURL-адрес значения атрибута href) и вместо этого сделайте вызов ajax.Для подтверждения вы можете использовать window.confirm API. 

@section Scripts
{
    <script>

        $(function () {
            $("a[ajaxy]").click(function (e) {
                e.preventDefault();

                if (window.confirm("Are you sure ?")) {

                    var $this = $(this);
                    var url = $this.attr("href");
                    $.post(url).done(function (res) {
                        $this.closest("tr").fadeOut(300, function (a) {
                            $(this).remove();
                        });
                    }).fail(function (jqXHR, textStatus, errorThrown) {
                        alert("error in ajax call!" + errorThrown);
                    })
                }
            });
        });

    </script>
}

Если ваше действие Delete принимает параметр Id. 

[HttpPost]
public async Task<IActionResult> Delete(int id)
{
   // to do : return something     
}
...