我在 View 中有两个按钮调用不同的模式窗口 ("AgregarProducto") 和 ("CargarOrden")
<a href="@Url.Action("CargarOrden", "Entradas")" class="dialog-window btn btn-primary">Cargar O. de Compra <span class="glyphicon glyphicon-file" aria-hidden="true"></span> </a>
<a href="@Url.Action("AgregarProducto", "Entradas")" class="dialog-window btn btn-success">Agregar Producto <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </a>
这些是使用以下 Javascript 代码加载的:
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#AgregarProducto.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#AgregarProducto').modal('show');
}
else {
$.get(url, function (data) {
$('#AgregarProducto .te').html(data);
$('#AgregarProducto').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("body").on("click", "a.dialog-window", null, function (e) {
e.preventDefault();
var $link = $(this);
var title = $link.text();
$('#CargarOrden.modal-title').html(title);
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#CargarOrden').modal('show');
}
else {
$.get(url, function (data) {
$('#CargarOrden .te').html(data);
$('#CargarOrden').modal();
}).success(function () { $('input:text:visible:first').focus(); });
}
});
});
</script>
}
问题是点击一个按钮会加载两次窗口! (附上照片)
在我的 Controller 中,我确保调用了部分类型 View
[HttpGet]
public ActionResult AgregarProducto()
{
return PartialView();
}
[HttpGet]
public ActionResult CargarOrden()
{
return PartialView();
}
我正在使用 bootstrap 从我的主视图调用我的 View “AddProduct”和“LoadOrder”……我的两个容器:
div class="modal fade" id="AgregarProducto" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body"><div class="te">Espere Porfavor...</div></div>
</div>
</div>
</div>
<div class="modal fade" id="CargarOrden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title"></h2>
</div>
<div class="modal-body"><div class="te">Espere Porfavor...</div></div>
</div>
</div>
</div>
我从未使用过模态窗口,会发生什么情况?我究竟做错了什么?对我有什么帮助吗?
最佳答案
您有 2 个脚本,一个用于打开 AgregarProducto
模态,另一个用于打开 CargarOrden
模态。
因为当您单击带有 class="dialog-window"
的链接(您的链接都有)时,这两个脚本都会执行,然后会执行这两个脚本,并显示两个模态.
一个简单的解决方案是给你的链接一个 id
属性,对第一个链接说 id="cargarorden"
和 id="agregarproduct"
第二个,然后将脚本更改为
$('#cargarorden').click(function(e) {
.... // you code that opens the CargarOrden modal
});
$('#agregarproduct').click(function(e) {
.... // you code that opens the AgregarProducto modal
});
请注意,由于链接不是动态加载的,因此无需使用 .on()
进行事件委托(delegate)。
更好的替代方法是使用 data-
属性在链接中识别关联的模态,这样只需要一个脚本
<a data-dialog="CargarOrden" href="@Url.Action("CargarOrden", "Entradas")" ...>
然后
$('.dialog-window').click(function(e) {
// Get the associated dialog
var dialog = $('#' + $(this).data('dialog'));
....
});
并在该脚本中,使用dialog
作为您的选择器,即
dialog.find('.modal-title').html(title); // instead of
dialog.modal('show'); // instead of $('#CargarOrden').modal('show');
dialog.find('.te').html(data); // instead of $('#CargarOrden .te').html(data);
关于c# - 使用不同按钮重复模式窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49182931/