Question

我正在尝试使用模态提交从MVC局部视图派生的表单。局部视图中的表单独立工作，但是当我无法使模态片段工作时。

包括：

<script src="/Scripts/jquery-3.2.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>

主视图中的模态：

    <div class="modal hide fade in edit-redirect-modal" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Redirect</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Loading...
            </div>
            <div class="modal-footer">
                <input type="submit" value="Save" />
            </div>
        </div>
    </div>
</div>

主视图中的脚本：

<script type="text/javascript">
$('.editRedirect').on('click', function (e) {
    e.preventDefault();
    $('.edit-redirect-modal').modal('show').find('.modal-body').load($(this).attr('href'));
});

“editRedirect”类的示例链接：

<a href="/Admin/Edit/8154" class="editRedirect" data-target="editModal" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></a>

单击链接时，屏幕变暗，但模式不会出现。控制台抛出此错误：

> Syntax error, unrecognized expression: #
at Function.Sizzle.error (jquery-3.2.1.js:1580)
at Sizzle.tokenize (jquery-3.2.1.js:2232)
at Sizzle.select (jquery-3.2.1.js:2659)
at Function.Sizzle [as find] (jquery-3.2.1.js:884)
at jQuery.fn.init.find (jquery-3.2.1.js:2922)
at jQuery.fn.init (jquery-3.2.1.js:3032)
at jQuery (jquery-3.2.1.js:98)
at getParent (bootstrap.js:798)
at HTMLAnchorElement.<anonymous> (bootstrap.js:782)
at Function.each (jquery-3.2.1.js:362)

更新：我将模态和脚本更改为此，并且不再出现任何控制台错误，但点击该链接仍然会使页面变暗而没有对话框内容。

    <div class="modal fade edit-redirect-modal" id="editModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Edit Redirect</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Loading...
            </div>
            <div class="modal-footer">
                <input type="submit" value="Save" />
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        var dialog = $("#editModal").dialog({
            autoOpen: false,
            height: 400,
            width: 350,
            modal: true,
            buttons: {
                Cancel: function () {
                    dialog.dialog("close");
                }
            },
            close: function () {

            }
        });

        $('.editRedirect').on('click', function (e) {
            e.preventDefault();
            $('#editModal').modal('show').find('.modal-body').load($(this).attr('href'));
        });
    });
</script>

Answer 1

我最终使用此方法获得了可用的结果，尽管有一个错误，即关闭模态并选择另一个项目会重新打开包含先前数据的模态。

锚：

<a href="/Admin/Edit/@item.Id" class="editRedirect" data-target="editModal" data-toggle="modal"><span class="glyphicon glyphicon-pencil"></span></a>&nbsp;

股利：

<div id="editDialog" title="Edit Redirect" style="display:none;">
<div id="editModal"></div>

JavaScript的：

$(".editRedirect").click(function () {
        $("#editModal").parent('div').load($(this).attr("href"));
        $("#editDialog").dialog({
            width: 400,
            height: 450,
            modal: true
        });

        return false;

jQuery 3.2.1 Modal与MVC部分视图

1 个答案: