asp.net-core - ASP.Net Core MVC Bootstrap 4 模态表单提交不起作用

Question

我正在编写一个 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">&times;</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 的调试控制台中看到以下类型的错误：

获取https://localhost:44389/Home/DeleteLearningObjective/296 405

*模式关闭

因此，表格行中的 href 值实际上从未传递给模式。我怀疑这是因为它被解释为 GET 请求而不是 POST 请求（根据错误）。

我一直在谷歌搜索并试图解决这个问题两天，我正准备用锤子敲我的电脑。

标签： asp.net-corebootstrap-4bootstrap-modal

Answer 1

进行以下修改：

1.在<a>Delete</a>,removeasp-action和asp-route-id,然后添加data-id,以便将 delete-item 的 id 发送到控制器

<a id="deleteCustomerModal"
    data-toggle="modal"
    data-target="#modal-delete"
    data-id="@item.Id"
    class="btn btn-sm btn-danger">
    <i class="fa fa-trash-o"></i>
    Delete
 </a>

2.id="myForm"添加到表单中，并添加隐藏输入，用于获取该modal-body部分中已删除项目的ID

<form asp-action="DeleteLearningObjective" role="form" id="myForm">
<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">&times;</span>
                </button>
            </div>
            <div class="     form-horizontal">
                Are you sure you want to delete this learning objective?
                <input hidden name="id"/>
            </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>

3. Javascript

   <script>
   $(function () {
       $('#modal-delete').on('show.bs.modal', function (event) {
           var button = $(event.relatedTarget); // Button that triggered the modal
           var id = button.data("id");
           var modal = $(this);
   
           modal.find('.modal-content input').val(id);
       });
   
       $("#modalDeleteButton").click(function () {
           $("#myForm").submit();
   
       });
   
   });
   

4. 结果：