Блог

Главная - Вопросы по программированию - ASP.NET Ядро, Ajax-вызов для удаления не перезагружает содержимое div на индексной странице (PartialView) из ответа html json

ASP.NET Ядро, Ajax-вызов для удаления не перезагружает содержимое div на индексной странице (PartialView) из ответа html json

#jquery #json #asp.net-core #asp.net-mvc-partialview

#jquery #json #asp.net-core #asp.net-mvc-partialview

Вопрос:

Я определил некоторый простой код в моем Index.chtml, чтобы перечислить всю коллекцию, которая была создана до сих пор.

 @model IEnumerable<PaymentTracking.Models.PaymentCollection>
<div id="view-all">
    @await Html.PartialAsync("_ViewAll", Model)
</div>

_ViewAll.chtml

 @model IEnumerable<PaymentTracking.Models.PaymentCollection>

<table class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.AirlineCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PaymentCollectionAmount)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PaymentCollectionForDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PaymentCollectionRemarks)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CreatedUser)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CreatedDt)
            </th>
            <th> 
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.AirlineCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PaymentCollectionAmount)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PaymentCollectionForDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PaymentCollectionRemarks)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreatedUser)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CreatedDt)
                </td>
                <td>
                        <a class='btn btn-danger text-white' style='cursor:pointer; width:70px;' onclick="Delete('/PaymentCollection/Delete?id=@item.PaymentCollectionID')"> Delete </a>


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

JavaScript обрабатывает действие удаления

 function Delete(url) {
    swal({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover",
        icon: "warning",
        buttons: true,
        dangerMode: true
    }).then((willDelete) => {
        if (willDelete) {
            $.ajax({
                type: "DELETE",
                url: url,
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    if (data.success) { 
                        $("#view-all").html(data.html);
                        toastr.success(data.message);    
                    }
                    else {
                        toastr.error(data.message);
                    }
                }
            });
        }
    });
}

Метод действия моего контроллера

         [HttpDelete]

        public async Task<IActionResult> Delete(int id)
        {
            var pcolFromDb = await _db.PaymentCollections.FirstOrDefaultAsync(u => u.PaymentCollectionID == id);
            if (pcolFromDb == null)
            {
return Json(new { success = false, message = "Error while Deleting", isValue = false, html = Helper.RenderRazorViewToString(this, "Upsert", PaymentCollection) });
            }
            _db.PaymentCollections.Remove(pcolFromDb);
            await _db.SaveChangesAsync();



return Json(new { success = true, message = "Delete successful", isValid = true, html = "successful"});
        }

Я получил ответ и увидел сообщение toastr об успехе после удаления, но содержимое <div id="view-all"> не перезагружается с возвратом содержимого html из вызванного Ajax.

Ниже приведен скриншот того, что возвращается после вызова кнопки удаления

введите описание изображения здесь

Не могли бы вы указать, какие моменты я сделал неправильно?

Комментарии:

1. Согласно вашему описанию, я создал тестовую демонстрацию на своей стороне, она работает хорошо. Я предлагаю вам попробовать вернуть сообщение об успешном завершении в return Json(new { success = true, message = "Delete successful", isValid = true, html = "Success"); . Если это изменилось, я предлагаю вам опубликовать соответствующие коды, которые связаны с Helper.RenderRazorViewToString .

2. Попробуйте добавить dataType: 'json' в свою $.ajax() конфигурацию вызова. Я не уверен, что JsonResult добавляет необходимые заголовки, чтобы вы могли заставить jQuery интерпретировать ответ как JSON

3. Я добавил тип данных: ‘json’, а также обновил в контроллере для возврата Json(new { success = true, message = «Delete successful», isValid = true, html = «successfull» }); но все равно содержимое div в индексе не обновляется.

4. Не могли бы вы, пожалуйста, также обновить код в вашем вопросе. Вы подтвердили, что код в if (data.success) { ... } действительно выполняется? Единственная другая вещь, о которой я могу подумать, это то, что у вас есть несколько элементов с id="view-all" . Селектор идентификаторов jQuery выбирает только первый, и в любом случае у вас не должно быть повторяющихся идентификаторов

5. Я обновил код в вопросе. Код в if (data.success) {…} выполняется, потому что я видел, что в правом верхнем углу страницы появилось сообщение toastr «Удалить успешно», только содержимое div не перезагружается

Ответ №1:

Проблема связана с кэшами, после очистки всех кэшей все работает так, как ожидалось при первоначальном размещении кода в вопросе.

Спасибо вам за то, что указали мне хорошие способы отладки.