ASP.Net Core MVC引导程序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请求（每个错误）。

我一直在谷歌搜索并尝试解决这一问题两天，我将把锤子砸到计算机上。

Answer 1

进行以下修改：

1。在<a>Delete</a>中，删除asp-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. 结果：