Bootstrap嵌套模式，采用通用方式将数据导入其中

Question

以下代码通过href从服务器获取数据并将其注入模态。

$(function () {
$.ajaxSetup({ cache: false });

$("a[data-modal]").on("click", function (e) {
    // hide dropdown if any (this is used wehen invoking modal from link in bootstrap dropdown )
    //$(e.target).closest('.btn-group').children('.dropdown-toggle').dropdown('toggle');

    $('#myModalContent').load(this.href, function () {
        $('#myModal').modal({
            /*backdrop: 'static',*/
            keyboard: true
        }, 'show');
        bindForm(this);
    });
    return false;
});
});

function bindForm(dialog) {
$('form', dialog).submit(function () {
    $.ajax({
        url: this.action,
        type: this.method,
        data: $(this).serialize(),
        success: function (result) {
            if (result.success) {
                $('#myModal').modal('hide');
                $('#replacetarget').load(result.url); //  Load data from the server and place the returned HTML into the matched element
            } else {
                $('#myModalContent').html(result);
                bindForm(dialog);
            }
        }
    });
    return false;
});
}

在视图中我把

@Html.ActionLink("LinkTitle", "action", "cntrlr", new { id = Model.id }, htmlAttributes: new {data_modal = "", @class = "btn btn-info" })

问题是：当我尝试使用新模态ID克隆那些javascript函数的嵌套模态时，每件事情都会变得混乱。

有没有办法将这种通用方法用于嵌套模态？

Answer 1

在不违反MVC原则的情况下找不到办法。

但要实现更多，那么3个nasted模态对用户来说是非常不友好的，因此最好的做法（至少对我来说）是创建3个DOM模态组件：

查看

<div id='NM0' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='NM0Content'>

            </div>
        </div>
    </div>
</div>

<div id='NM1' class='modal fade in'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='NM1Content'>

            </div>
        </div>
    </div>
</div>

<div id='NM2' class='modal fade in' >
    <div class="modal-dialog">
        <div class="modal-content">
            <div id='NM2Content'>

            </div>
        </div>
    </div>
</div>

PartialView 每个级别获取自己的NM号码（NM - Nasted Modal）

@Html.ActionLink("Launch modal", "action", "controller", null, htmlAttributes: new { NM = "1", data_modal = "", @class = "btn btn-info" })

<强>的Javascript

$(function () {

$.ajaxSetup({ cache: false });

$("a[data-modal]").on("click", function (e) {
    var $input = $(this);
    switch ($input.attr("NM")) {
            case "0":
                    $('#NM0Content').load(this.href, function () {
                        $('#NM0').modal({
                            /*backdrop: 'static',*/
                            keyboard: true
                        }, 'show');
                    });
                break;
        case "1":
            $('#NM1Content').load(this.href, function () {
                $('#NM1').modal({
                    /*backdrop: 'static',*/
                    keyboard: true
                }, 'show');
            });
            break;
        case "2":
            $('#NM2Content').load(this.href, function () {
                $('#NM2').modal({
                    /*backdrop: 'static',*/
                    keyboard: true
                }, 'show');
            });
            break;
            default:

        }


    return false;
});
});