c# - 使用不同按钮重复模式窗口

Question

我在 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">&times;</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">&times;</button>
                <h2 class="modal-title"></h2>
            </div>
            <div class="modal-body"><div class="te">Espere Porfavor...</div></div>
        </div>
    </div>
</div>

我从未使用过模态窗口，会发生什么情况？我究竟做错了什么？对我有什么帮助吗？

Answer 1

您有 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);