Javascript 引导嵌套模式，具有将数据获取到其中的通用方法

下面的代码通过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函数来放置嵌套模态时，一切都变得一团糟

---

有没有一种方法可以使用这种通用方法来创建嵌套模式？

无法找到一种不违反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>

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

---

无法找到一种不违反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>

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