bootstrap 模态未关闭部分视图 asp .net MVC

Question

我有一个将在局部视图中呈现的弹出窗口，但是当我尝试关闭该弹出窗口时，数据关闭将不起作用并且弹出窗口没有关闭。

主视图如下：

foreach (var item in Model.companies)
            {
                <tr id="@item.CompanyID" data-id="@item.CompanyID">
                    <td>    
                        <input type="submit" value="عرض" class="main-submit" onclick="ShowCompanyModel()" />
                    </td>

                    <td>
                        <input type="hidden" id="CompanyIDValue" asp-for="@item.CompanyID" value="@item.CompanyID" class="ISIC_Table" style="text-align:center;" readonly />

                        <button type="button" class="main-submit" data-toggle="modal" onclick="OpenCommissionerPopUp()" data-target="#_@item.CompanyID">
                            التفويض
                        </button>
                    </td>

                    <td>
                        <!-- Modal -->
                        <div class="modal fade commissioner_model" id="_@item.CompanyID" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        </div>

                    </td>

                </tr>


            }

这是我的 JS 函数：

function OpenCommissionerPopUp() {
        var CompanyID = event.target.parentNode.parentNode.id;
        $('#_' + CompanyID).load('@Url.Action("GetCompanyCommissioners", "Commissioners")?CompanyID=' + CompanyID);
    }

我的控制器：

 public ActionResult GetCompanyCommissioners(int CompanyID)
        {
            if(CompanyID != 0)
            {
                var PremissionsList = new List<SelectListItem>
            {
                new SelectListItem
                {
                    Value = "0",
                    Text = "الكل"
                }
            };
                var AllPremissions = _DbContext.ContextDb.CommissionersPermissions.Select(x => new CommissionersViewModel
                {
                    CommissionerPermissionID = x.CommissionerPermissionID,
                    Permission = x.Permission
                });
                foreach (var pre in AllPremissions)
                {
                    PremissionsList.Add(new SelectListItem
                    {
                        Value = pre.CommissionerPermissionID.ToString(),
                        Text = pre.Permission
                    });
                }               
            

                var model = new CommissionersViewModel
                {
                    CompanyID = CompanyID,
                    PremissionsList = PremissionsList
                };
                return PartialView("~/Views/Home/_Commissioners.cshtml", model);
            }
            else
            {
                return View();
            }


        }

在我的 _Commissioners.cshtml 部分视图中，当我尝试关闭弹出窗口时，它不会关闭，如果我单击 data-dismiss="modal"，则不会发生任何事情。任何想法如何触发弹出窗口并关闭它。我已经尝试使用 jQuery 关闭弹出窗口，但它也不起作用。 $('#_' + CompanyID).modal('toggle');

    <div class="modal-dialog modal-lg modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">إدارة المفوضين</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_@Model.CompanyID" onclick="HidedevCommissionerform(@Model.CompanyID)" style="margin:0">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align:right">
            </div>
       </div>
   </div>

Answer 1

从按钮标签中删除 onclick。并为模态添加 id。像这样。

    <div id="modalcompany" class="modal-dialog modal-lg modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">إدارة المفوضين</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_@Model.CompanyID"  style="margin:0">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="text-align:right">
            </div>
       </div>
   </div>

添加点击事件，获取您的 html 的 ID，该 ID 在您的局部视图呈现之前已经存在，以及关闭按钮的 ID。像这样的东西。（“close_@Model.CompanyID”应该具有页面上呈现的值）

    $('#_' + CompanyID).on("click", "close_@Model.CompanyID", function (e) {
        $('#modalcompany').modal('toggle');
    });

检查调试器是否被命中。这应该关闭弹出窗口。但是如果调试器来了两次。这意味着您的模式在页面上呈现了两次。

Answer 2

只能将modal-body内容设置为局部视图，在主视图中设置其他模态组件：

主视图：

<button type="button" class="main-submit" data-toggle="modal" onclick="OpenCommissionerPopUp()" data-target="#_@item.CompanyID">
    التفويض
</button>

<div class="modal fade" id="_@item.CompanyID" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">إدارة المفوضين</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_@item.CompanyID" style="margin:0">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div id="body_@item.CompanyID" class="modal-body" style="text-align:right">
            
            </div>
        </div>
    </div>
</div>

局部视图：

//data

脚本：

function OpenCommissionerPopUp() {
    var CompanyID = event.target.parentNode.parentNode.id;
    $('#body_' + CompanyID).load('@Url.Action("GetCompanyCommissioners", "Home")?CompanyID=' + CompanyID);
}

bootstrap 模态未关闭部分视图 asp .net MVC

bootstrap modal is not closing on partial view asp .net MVC

javascript

jquery

bootstrap-modal

asp.net-core-mvc

bootstrap-4