Question

我认为标题很清楚，但是要确定：在显示模态之后我不想重定向，这是我的搜索产生的唯一内容。

页面错误地重定向到其他地方，但我不确定原因。

我有一个条目列表（基本上只是MVC生成的脚手架CRUD），当点击一个按钮时，会弹出一个模态并通过AJAX显示一些信息（最终它会成为一个表单，但那现在不重要了）。模态弹出一瞬间，然后我被重定向到Details页面之一。

该模式应该使用来自Archive/{id}的部分视图，但它会立即发送到Details/{id}。我不知道我告诉重定向发生的地方。

我使用{controller}/{action}/{id}的默认路由。 Chrome调试器没有显示任何错误。

_ArchiveModal.cshtml

@model EDB.Models.ProductModel

<div>

    <div class="modal-header">
        <button type="button" class="close btn-modal-close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="archiveModalLabel">Archive?</h4>
    </div>

    <hr />

    <p>
        Test test testing all day, these are words
    </p>

</div>

Index.cshtml中的

div

<div id="archiveModal" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="archiveModalContent"></div>
        </div>
    </div>
</div>

JavaScript / jQuery

$(document).ready {
    $(".modal-anchor-archive").click(function () {
        var modalUrl = '@Url.Action("Archive")' + "/" + $(this).data("id");
        var options = {
            "backdrop": "static",
            keyboard: true
        };
        $.ajax({
            type: "GET",
            url: modalUrl,
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            success: function (data) {
                $("#archiveModalContent").html(data);
                $("#archiveModal").modal(options);
                $("#archiveModal").modal("show");
                debugger; // Stopping here shows that the modal does display
            },
            error: function (error) {
                alert("Dynamic content load failed.");
            }
        });

        $(".btn-modal-close").click(function () {
            $("#archiveModal").modal("hide");
        });
    });
}

按钮

<span class="btn btn-warning modal-anchor-archive" data-id="@item.ID">Archive</span>

控制器操作

public ActionResult Archive(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    ProductModel productModel = db.Products.Find(id);
    if (productModel == null)
    {
        return HttpNotFound();
    }
    return PartialView("_ArchiveModal", productModel);
}

Answer 1

OP在这里。

事实证明这是jQuery event propagation功能的问题。包含模态按钮的行会向其注册onClick个事件，并将其重定向到Details。我无法相信这让我不知所措。

修复非常简单。

$(".modal-anchor-archive").click(function (e) {
    // Prevent the event from "bubbling up" to this element's container(s)
    e.stopPropagation();
    // Other code
}

显示Bootstrap模式后意外重定向

1 个答案: