Question

我有一个包含数据表的父视图。该视图包含两个模式对话框，如以下代码所示：-

<div id='myModal' class='modal fade in' data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 400px; height:250px;">
            <div id='firstModelContent'></div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="callBackModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content" style="width: auto;">
            <div id='secondModalContent'></div>
        </div>
    </div>
</div>

在表的每一行单击上，将弹出以行数据为参数的firstModal对话框。现在的要求是从第一个模态的“提交按钮”启动第二个模态弹出窗口。

我能够使用AJAX将带有行参数的局部视图加载为第一个模态对话框。但是我无法在单击第一模式部分视图的按钮上将部分视图作为第二模式对话框加载。相反，在调试secondmodal时不会被检查。它将仅重定向到全屏页面上的部分视图。从firstmodal对话框局部视图自动生成的html链接如下所示：-

<a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&amp;status=Yes" title="Update Details">Yes</a>

第二种模式的AJAX代码如下** **在父页面JavaScript **中：-

$(function () {
                $("a[data-modal]").on("click", function (e) {
                    debugger;
                    var $buttonClicked = $(this);
                    //var id = $buttonClicked.attr('data-id');
                    var options = { "backdrop": "static", keyboard: true };
                    $.ajax({
                        type: "GET",
                        url: '@Url.Action("Update", "SampleController")',
                        contentType: "application/json; charset=utf-8",
                        data: { "Id": id },
                        datatype: "json",
                        success: function (data) {
                            debugger;
                            $('#myModalContent').html(data);
                            $('#callBackModal').modal(options);
                            $('#callBackModal').modal('show');

                        },
                        error: function () {
                            alert("Dynamic content load failed.");
                        }
                    });
                //$("#closbtn").click(function () {
                //    $('#callBackModal').modal('hide');
                //});
            });
        });

但单击“按钮”时的第一个模式弹出窗口不会打开第二个模式弹出窗口。有人可以建议如何执行此操作吗？期待您的回音。

Answer 1

当您单击链接时：

<a class="btn btn-primary" data-modal="" href="/SampleController/Update?ID=867448&amp;status=Yes" title="Update Details">Yes</a>

它不会执行您的Ajax调用。

您必须将其更改为“按钮”：

<button type="button" class="btn btn-primary btn-yes">Yes</a>

jQuery：

$(".btn-yes").on("click", function (e) {
    var $buttonClicked = $(this);
    //var id = $buttonClicked.attr('data-id');
    var options = { "backdrop": "static", keyboard: true };
    $.ajax({
        type: "GET",
        url: '@Url.Action("Update", "SampleController")',
        contentType: "application/json; charset=utf-8",
        data: { "Id": id },
        datatype: "json",
        success: function (data) {
            debugger;
            $('#myModalContent').html(data);
            $('#callBackModal').modal(options);
            $('#callBackModal').modal('show');
        },
        error: function () {
            alert("Dynamic content load failed.");
        }
    });

MVC在“模式弹出窗口”的“提交”按钮上打开部分视图

1 个答案: