MVC 在模态弹出提交按钮上打开部分视图

Question

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

<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>

点击table的每一行，都会弹出第一个模态对话框，其中行数据作为参数。现在的要求是从第一个模态的 "submit button" 启动第二个模态弹出窗口。

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

<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');
                //});
            });
        });

但是 "button" 单击第一个模式弹出窗口不会打开第二个模式弹出窗口。谁能建议如何执行此操作？期待您的来信。

Answer 1

当您点击 link 时：

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

它不会执行您的 ajax 调用。

您必须将其更改为 "button" :

<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 在模态弹出提交按钮上打开部分视图

MVC open partial view on Modal Popup Submit button

c#

arrays

ajax

asp.net-mvc-4

twitter-bootstrap