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

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>

在表格的每行单击时，将弹出第一个模态对话框，其中行数据作为参数。现在的要求是从第一个模态的"提交按钮"启动第二个模态弹出窗口。

我能够使用 AJAX 加载部分视图作为带有行参数的第一个模式对话框。但是我无法在单击第一模态部分视图的按钮上将部分视图加载为第二模态对话框。相反，在调试时，不会检查第二种模态。它只会重定向到全屏页面上的部分视图。从第一个模式对话框部分视图自动生成的 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>

j查询：

$(".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.");
}
});