显示Bootstrap模态后意外重定向

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

在这里操作。

事实证明，jQuery的事件传播功能存在问题。 包含模式按钮的行已注册一个onClick事件，该事件将重定向到Details 。 我简直不敢相信。

解决方法非常简单。

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