Как правильно создать ajax запрос - PullRequest
Новая
       19

Как правильно создать ajax запрос

1 голос
/ 27 апреля 2020

C#, Razor Pages. У меня есть частичное представление под названием _Articles. Он отображает статьи в таблице. Статьи заполнены из модели. Он также содержит кнопку (хорошо, не кнопку, якорь) для удаления статей: <a asp-page-handler="delete" asp-route-ArticleId="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>. @ item.Id - уникальный идентификатор каждой статьи. Это обрабатывается обработчиком get на родительской странице, запрос выглядит так: / Orders / Edit / 1/58? Handler = delete. Все идет нормально. Но я бы хотел добиться этого без обратной передачи, что невозможно с get, верно? Поэтому я создал еще одну кнопку: 

<form method="post">                                 
         <input type="submit" class="btn bg-danger mr-1 delete" id="@item.Id" asp-route-ArticleId="@item.Id" asp-page-handler="delete" value="Delete" />
                            </form>

И я создал новый обработчик сообщений на родительской странице. Запрос на отправку отправляется на тот же URL-адрес, что и запрос на получение, и да, он работает.

Но он по-прежнему выполняет обратную передачу, которую я хотел бы избежать. Так что теперь я хотел бы использовать ajax, и я борюсь с этим. Я добавляю css 'delete' класс к каждой кнопке, которую я хотел бы использовать. Затем я использовал это jquery: 

$('.delete').on('click', function (evt) {
            evt.preventDefault();
            $.ajax({
                type: "POST",
                url: window.location.href + '?handler=Delete',
                data: $('form').serialize(),
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                success: function () {
                    $('#articles').load(window.location.href + '?handler=Refresh');
                }
            }
            )

        });

Очевидно, что это не может работать, потому что мне не хватает параметра @ item.Id в URL. Но я не знаю, как это пройти. Должен ли я использовать другой селектор jquery, чтобы найти ближайший @ item.Id? Это не должно быть так сложно, я вижу правильный URL-адрес в формировании кнопки, но как получить к нему доступ с помощью jquery?

Весь частичный вид: 

@model IEnumerable<Models.ArticlesInOrder>
<table class="table">
    <tr>
        <th></th>
        <th>PN</th>
        <th>Name</th>
        <th>Nickname</th>
        <th>Quantity</th>
    </tr>

    @foreach (var item in Model)
    {
        var tm = "#myModal" + item.Id;
        var mid = "myModal" + item.Id;

        <tr>
            <td>
            </td>
            <td>
                @item.Article.PN
            </td>
            <td>
                @item.Article.Name
            </td>
            <td>
                @item.Article.Nickname
            </td>
            <td>
                @item.Quantity
            </td>

            <td>
                <a asp-page="EditArticle" class="edit" asp-route-id="@item.Id">Edit</a>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm" formmethod="post">
                    Delete
                </button>

                <div class="modal fade" id="@mid" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                <h4 class="modal-title" id="myModalLabel">Delete Confirmation</h4>
                            </div>
                            <div class="modal-body">
                                Are you sure want to delete this item?
                            </div>
                            <div class="modal-footer">
                                <a asp-page-handler="delete" asp-route-ArticleId="@item.Id" id="deleteBtn" class="btn bg-danger mr-1">Delete</a>
                                <form method="post">

                                    <input type="submit" class="btn bg-danger mr-1 delete" id="@item.Id" asp-route-ArticleId="@item.Id" asp-page-handler="delete" value="Delete" />
                                </form>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    }

</table>

Ответы [ 2 ]

1 голос
/ 28 апреля 2020

Используйте событие click для передачи идентификатора в запрос ajax вместо прослушивателя событий button.click. 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm" formmethod="post" onclick="delete('@item.Id')">Delete</button>

Затем вы можете передать @item.Id в AJAX запрос в delete() метод.

0 голосов
/ 28 апреля 2020 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="@tm" formmethod="post" onclick="deleteArticle('@item.Id')">Delete</button>


function deleteArticle (id){$.ajax({
                type: "POST",
                url: window.location.href + '/' + id + '?handler=Delete',
                data: $('form').serialize(),
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                success: function () {
                    $('#articles').load(window.location.href + '?handler=Refresh');
                }
            });}
...