[英]bootstrap modal is not closing on partial view asp .net MVC
我有一个将在部分视图中呈现的弹出窗口,但是当我尝试关闭弹出窗口时,数据关闭将不起作用并且弹出窗口没有关闭。
这是主要视图:
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:
function OpenCommissionerPopUp() {
var CompanyID = event.target.parentNode.parentNode.id;
$('#_' + CompanyID).load('@Url.Action("GetCompanyCommissioners", "Commissioners")?CompanyID=' + CompanyID);
}
我的 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();
}
}
在我的 _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">×</span>
</button>
</div>
<div class="modal-body" style="text-align:right">
</div>
</div>
</div>
从按钮标签中删除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">×</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');
});
检查调试器是否被命中。 这应该关闭弹出窗口。 但是如果调试器来了两次。 这意味着您的模式在页面上呈现了两次。
您可以只将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">×</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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.