Question

我在视图中有两个按钮，它们调用不同的模态窗口（“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>
    }

问题是单击按钮会加载窗口两次！（我附上照片）

在我的控制器中，我确保调用部分类型视图

  [HttpGet]
    public ActionResult AgregarProducto()
    {          
       return PartialView();
    }

    [HttpGet]
    public ActionResult CargarOrden()
    {          
       return PartialView();
    }

我正在使用bootstrap从我的主视图中调用我的视图“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()使用事件委派。

更好的选择是使用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);

用不同的按钮重复模态窗口

1 个答案: