模态打开但包含 _layout.cs

Question

我正在从我的应用程序的页面调用模态 window。 如果模态标记包含在页面中，模态将按我的预期显示，但如果我使用部分视图，仍然模态会打开，但这次它包含 _Layout.cshmtl 中定义的页面布局以及部分中的内容看法。

<div id="itemDetailModal" class="modal fade" aria-labelledby="itemModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="itemModalLabel">
                    Item Name Here
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <hr />
            <div class="modal-body">
                <div class="row">
                    <div class="col-4 col-md-4">
                        Item Number
                    </div>
                    <div class="col-8 col-md-8">
                        @Html.TextBoxFor(x => x.Item.Id, new { @class = "disabled" })
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </div>
</div>

<script>
    function showDetails(itemId) {
        $(function() {
            debugger;

            var postbackUrl = "/Home/Details";
            var options = { "backdrop": "static", keyboard: true };

            $.ajax({
                type: "GET",
                url: postbackUrl,
                contentType: "application/json; charset=utf8",
                data: { "id": itemId },
                datatype: "json",
                success: function(data) {
                    debugger;
                    $('#requestModalContent').html(data);
                    $('#requestModal').modal(options);
                    $('#requestModal').modal('show');
                }
            });
        }
</script>

当我使用相同的模态标记和 javascript 时，除了：

<div id="itemDetailModal" class="modal fade" aria-labelledby="itemModalLabel">
<div class="modal-dialog">
    <div class="modal-content">
        <div id="itemDetailModal"></div>
    </div>
</div>

部分观点是：

<div class="modal-header">
            <h5 class="modal-title" id="itemModalLabel">
                Item Name Here
            </h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <hr />
        <div class="modal-body">
            <div class="row">
                <div class="col-4 col-md-4">
                    Item Number
                </div>
                <div class="col-8 col-md-8">
                    @Html.TextBoxFor(x => x.Item.Id, new { @class = "disabled" })
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save Changes</button>
        </div>

模态内容标记在局部视图中，但与第一个示例中的标记相同。

有人可以解释一下我在这里做错了什么吗？