Я пишу приложение ASP.Net Core 2.2, безуспешно пытаясь реализовать модальное представление Bootstrap 4 для подтверждения удаления записей из представления базы данных / таблицы.
Каждая строка таблицы имееткнопка удаления. При нажатии кнопки удаления для данной строки в таблице окно подтверждения модального удаления появляется, как и ожидалось. Когда пользователь нажимает кнопку, чтобы подтвердить удаление записи, окно подтверждения модального удаления исчезает, и ничего не происходит.
Вот код Razor, который генерирует строки в таблице:
<tbody>
@foreach (LearningObjective item in Model.LearningObjectives)
{
<tr>
<td>@Html.DisplayFor(model => item.Sentence)</td>
<td>@Html.DisplayFor(model => item.Verbs)</td>
<td>@Html.DisplayFor(model => item.Measurables)</td>
<td>@Html.DisplayFor(model => item.Blooms)</td>
<td>@Html.DisplayFor(model => item.Levels)</td>
@if (ViewBag.Title == "Build and Analyze Learning Objectives")
{
<td>
<a id="deleteCustomerModal"
data-toggle="modal"
asp-action="DeleteLearningObjective"
asp-route-id="@item.Id"
data-target="#modal-delete"
class="btn btn-sm btn-danger">
<i class="fa fa-trash-o"></i>
Delete
</a>
</td>
}
</tr>
}
</tbody>
Вот пример того, как код выше отображает фактическую строку таблицы (из источника страницы):
<tr>
<td>analyze all the fun things we can do with this app</td>
<td>Analyze, Do</td>
<td>Yes, No</td>
<td>Yes, No</td>
<td>4, -</td>
<td>
<a id="deleteCustomerModal"
data-toggle="modal"
data-target="#modal-delete"
class="btn btn-sm btn-danger"
href="/Home/DeleteLearningObjective/296">
<i class="fa fa-trash-o"></i>
Delete
</a>
</td>
</tr>
Указанный выше href является верным.
Вот HTML-код для модальной формы:
<form asp-action="DeleteLearningObjective" role="form"><
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="modalDeleteLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalDeleteLabel">Delete Learning Objective</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body form-horizontal">
Are you sure you want to delete this learning objective?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-danger" id="modalDeleteButton">Delete</button>
</div>
</div>
</div>
</div>
</form>
Вот Javascript:
$(function () {
// boostrap 4 load modal example from docs
$('#modal-delete').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var url = button.attr("href");
var modal = $(this);
// note that this will replace the content of modal-content everytime the modal is opened
modal.find('.modal-content').load(url);
});
$('#modal-delete').on('hidden.bs.modal', function () {
// remove the bs.modal data attribute from it
$(this).removeData('bs.modal');
// and empty the modal-content element
$('#modal-delete .modal-content').empty();
});
});
Пошаговое выполнение:
* Строки таблицы отображаются правильно, а значение href для каждой строки правильное.
* Модальное значение отображается, как и ожидалось.
* При удалении модаловнажата кнопка, код jQuery выполняется. Код успешно находит и извлекает правильное значение href из строки таблицы.
* Последняя строка кода jQuery (modal.find ('. Modal-content'). Load (url);) выполняется,но я вижу следующий тип ошибки в консоли отладки Chrome:
GET https://localhost:44389/Home/DeleteLearningObjective/296 405
* Модальное закрытие
Итак, значение href изстрока таблицы никогда не передается модальному. Я подозреваю, что это потому, что он интерпретируется как GET-запрос, а не POST-запрос (согласно ошибке).
Я гуглю и пытаюсь решить эту проблему в течение двух дней, и я собираюсь принятьзабей мой компьютер.