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

Question

I have a popup that will be rendered in a partial view, but when I try to close the popup, the data-dismiss will not work and the popup is not closing.

Here is the main view:

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>


            }

and here is my JS function:

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

my Controller:

 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();
            }


        }

in my _Commissioners.cshtml partial view, When I try to close the popup, it will not close, nothing will happen if I clicked on data-dismiss="modal". Any Idea how can I trigger the popup and close it. I already tried closing the popup using jQuery, but it did not work too. $('#_' + 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

Remove onclick from button tag. and add id for the modal. something like this.

    <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>

Add click event taking the id of your html which was already present before your partial view rendered and Id of close button. Something like this. (The "close_@Model.CompanyID" should have the value as rendered on page)

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

Check if the debugger is getting hit. This should close the popup. But if the debugger is coming twice. It means your modal is rendered two times on the page.

Answer 2

You may only set the modal-body content as the partial view, and set other modal component in the main view:

Main view:

<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>

Partial view:

//data

scripts:

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