Question

我有一个模型TModel的详细信息视图，该视图将记录的详细信息显示为只读，并具有一个应加载编辑视图（模式）的按钮。因此，我在_layout.cshtml中有模式容器，并且在共享文件夹中创建了我的部分视图，但是当单击详细信息视图中的按钮时，它仅显示模式，而部分视图中没有表单。

布局中的模式

<div class="modal fade" id="EditCompanyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
                <div class="p-5 BigShadow">
                    <h5 class="font-weight-bold">
                        Edit Company Account
                        <span class="pull-right"><i class="fa fa-user-circle-o text-tomato"></i></span>
                    </h5>
                    <span class="small">Please ensure that information provided is valid</span>
                    <hr style="border-top: 1px dashed #EEE" />

                    @*@await Html.PartialAsync("CompanyModalPartial")*@
                    <div class="modal-content">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

布局中的Javascript

$('#EditCompanyModal').on('hidden.bs.modal', function (e) {
    $('#EditCompanyModal modal-content').load('@Url.Action("ModalDetails", "Company")')
});

公司控制方中的操作

public IActionResult ModalDetails()
{
    return PartialView("CompanyModalPartial");
}

局部视图

@model TModel
<form asp-action="Save">
    //form
</form>

请注意，部分视图与“详细信息视图”具有相同的模型。因此，使用上述方法，当我单击“编辑”按钮时，将显示模式，但没有任何形式。我该如何使用它？

Answer 1

您的jQuery代码中有两个错误：

$('#EditCompanyModal').on('hidden.bs.modal', function (e) {
    $('#EditCompanyModal modal-content').load('@Url.Action("ModalDetails", "Company")')
});

$('#EditCompanyModal modal-content') 不是有效的选择器，根本没有<modal-content> html标签。
'hidden.bs.modal' 事件在放映前不会触发。

要显示具有部分视图的模态，请按如下所示更改代码：

$('#EditCompanyModal').on('show.bs.modal', function (e) {
    $('#EditCompanyModal .modal-content').load('@Url.Action("ModalDetails", "Company")')
});
$('#EditCompanyModal').on('hidden.bs.modal', function (e) {
    $('#EditCompanyModal .modal-content').html("");
});

它将按预期工作。

编辑Bootstrap模式弹出窗口不加载部分视图

1 个答案: