模态保存按钮不起作用 (Bootstrap 5)

Question

我正在按照本指南 (https://softdevpractice.com/blog/asp-net-core-mvc-ajax-modals/) 操作，但我的模式上的保存按钮无法正常工作。我试着把它放在表单标签中，但后来它使用的是父视图中的表单操作，而不是局部视图。

起初我无法使用关闭按钮，但通过将 data-dismiss 更改为 data-bs-dismiss 解决了这个问题。我想知道我是否需要为保存做类似的事情，因为 Bootstrap 5.

的情况发生了变化

我的代码如下：

父视图

<div id="AddStudyModal"></div>
// Irrelevant stuff here
<div>
   <button type="button" class="btn btn-secondary" data-toggle="ajax-modal" data-bs-target="#add-study" data-url="@Url.Action("AddStudy", "App", new {id = Model.GUID})">Add</button>
</div>

局部视图

<div class="modal fade" id="add-study" tabindex="-1" role="dialog" aria-labelledby="addStudyLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addStudyLabel">Add Study</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form asp-controller="App" asp-action="AddParticipant" method="post">
                    @Html.HiddenFor(m => m.ParticipantGuid)
                    <div asp-validation-summary="ModelOnly"></div>
                    <div class="mb-3 form-group">
                        <label asp-for="Studies" class="form-label"></label>
                        <select asp-for="SelectedStudyGuid" asp-items="Model.Studies" class="form-control" autocomplete="off">
                            <option value=""> Select a Study</option>
                        </select>
                        <span asp-validation-for="SelectedStudyGuid" class="text-danger"></span>
                    </div>
                    <div class="mb-3 form-group">
                        <label asp-for="StartDate" class="form-label"></label>
                        <input asp-for="StartDate" class="form-control" autocomplete="off"/>
                        <span asp-validation-for="StartDate" class="text-danger"></span>
                    </div>
                    <div class="mb-3 form-group">
                        <label asp-for="EndDate" class="form-label"></label>
                        <input asp-for="EndDate" class="form-control" autocomplete="off"/>
                        <span asp-validation-for="EndDate" class="text-danger"></span>
                    </div>
                    <div class="text-center">
                    </div>
                    <div class="text-center">@ViewBag.Message</div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-save="modal">Save</button>
            </div>
        </div>
    </div>
</div>

site.js

$(function (){
    var AddStudyElement = $('#AddStudyModal');
    $('button[data-toggle="ajax-modal"]').click(function(event){
        var url = $(this).data('url');
        $.get(url).done(function(data){
            AddStudyElement.html(data);
            AddStudyElement.find('.modal').modal('show');
        })
    })

    AddStudyElement.on('click', '[data-save="modal"]', function(event){
        event.preventDefault();

        var form = $(this).parents('.modal').find('form');
        var actionUrl = form.attr('action');
        var sendData = form.serialize();

        $.post(actionUrl, sendData).done(function(data){
            AddStudyElement.find('modal').modal('hide');
        })
    })
})

编辑：感谢@Efraim 在添加 .在模态前。

Answer 1

缺少一个“.”在： AddStudyElement.find('modal').模型('hide'); AddStudyElement.find('.modal').modal('hide');

模态保存按钮不起作用 (Bootstrap 5)

Modal Save Button Doesn't Work (Bootstrap 5)

javascript

asp.net-mvc

asp.net-core

bootstrap-modal

bootstrap-5