无法从部分视图中打开 Bootstrap 模式弹出窗口

Question

我有一个带有超链接列的 webgrid，单击该链接后，它应该打开一个模态弹出窗口，我在名为“GetDetails”的局部视图中有一个名为#examplemodal 的模态。下面我尝试从返回部分视图的控制器操作方法中打开模式。

 @Html.ActionLink("OrderNumber","GetDetails","Home",
                  new{id = item.ID}, new{data_target="#exampleModal", data_toggle="modal", @class="modal-backdrop"});

当我单击带有 Ordernumber 的链接时，屏幕变黑，我根本看不到网格。关于我在哪里做错的任何指示。我正在使用 asp.Net mvc5 和 bootstrap v4.3.1

Answer 1

我认为你的概念是完全错误的。我假设您想以模式显示订单详细信息？而且由于您已经有一种方法可以返回部分视图，所以您希望在用户单击超链接列时将该订单详细信息内容加载到模式中？

如果是这种情况，引导模式不是适合您的工具。它旨在加载静态内容。如果你想加载动态内容，即不同订单号的订单详情，你应该研究一个名为iframe的概念，以及像Fancybox这样的库。

我会这样做：

1.定义模态布局

因为您想在模态视图上显示部分视图，所以您通常不希望站点布局中包含侧边栏、顶部导航等内容。因此，我将为模态定义一个布局。

<!-- _PopupLayout.cshtml -->

<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

        <!-- All your necessary styles, meta data, etc -->

        <title>...</title>

        @RenderSection("css", required: false)
    </head>
    <body>
        <main class="container-fluid">
            @RenderBody()
        </main>

        <!-- All your necessary javascripts -->

        @RenderSection("scripts", required: false)
    </body>
</html>

2.返回使用_PopupLayout的视图

我知道您已经创建了局部视图。但是常规视图很好。事实上，这更好，因为您可以设置常规视图使用的布局，以及用于该视图的视图模型。

因为您希望此视图看起来像一个引导模式，您应该使用引导模式结构来构建您的视图。

@model ...
@{
    ViewData["Title"] = "Order Details";
    Layout = "~/Views/Shared/_PopupLayout.cshtml";
}

<div class="modal-header">
    <h5 class="modal-title">Order Details</h5>
</div>
<div class="modal-body">
    ...
</div>

3.编写JavaScript以在点击链接时触发FancyBox

您可以为要从中加载 iframe 的所有链接的选择器使用自定义 css 类。就我而言，我称之为.popup-fancy。您还可以定义多个类来弹出不同大小的 modals/fancybox modals。

$(function() {
    $().fancybox({
        selector: 'a.popup-fancy',
        defaultType: 'iframe',
        baseClass: 'fancybox-md',
        iframe: {
            preload: false
        },
        arrows: false,
        infobar: false,
        smallBtn: true
    });

    $().fancybox({
        selector: 'a.popup-fancy-lg',
        defaultType: 'iframe',
        baseClass: 'fancybox-lg',
        iframe: {
            preload: false
        },
        arrows: false,
        infobar: false,
        smallBtn: true
    });

    $().fancybox({
        selector: 'a.popup-fancy-xl',
        defaultType: 'iframe',
        baseClass: 'fancybox-xl',
        iframe: {
            preload: false
        },
        arrows: false,
        infobar: false,
        smallBtn: true
    });
});

看看它是如何将默认类型设置为 iframe 的？您可以从 Fancybox 文档中找到这些配置选项。不要忘记这 3 种基类样式（我使用的是 Sass）：

.fancybox-md {
    .fancybox-content {
        max-width: 36.75rem;
    }
}

.fancybox-lg {
    .fancybox-content {
        max-width: 65.625rem;
    }
}

.fancybox-xl {
    .fancybox-content {
        max-width: 78.75rem;
    }
}

4.创建打开模态的链接

现在您可以使用这些花式触发器类中的任何一个创建链接：

<a href="@Url.Action("details", "order", new { area = "", id = item.Id })"
    class="popup-fancy">
    See Order Details
</a>

我假设您已将订单控制器和详细信息操作方法全部设置为返回使用 _PopupLayout 的视图，然后当用户单击链接时，而不是使用标准布局的常规重定向到页面，页面内容应该被加载到fancybox modal中。

例如：

如果只能使用引导模式？？

在这种情况下，您必须创建一个模态模板（可能在布局中，以便可以在任何地方调用它），其中包含 iframe。然后在点击链接时，您使用 javascript 设置 iframe 的来源并手动弹出模式。

模态模板示例

<div id="fancy-modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <iframe src="" frameborder="0"></iframe>
        </div>
    </div>
</div>

然后在您生成链接的页面上，而不是生成实际链接，您将不得不生成模态触发器：

<a href="#" class="fancy-modal-trigger"
    data-iframe-src="@Url.Action("details", "order", new { area = "", id = item.Id })">
    See Order Details
</a>

请参阅此处，您将视图的实际链接放在data-attribute 而不是href 上，因为您不希望链接实际导航到目的地。

$(function() {
    $('a.fancy-modal-trigger').click(function() {
        let iframeSrc = $(this).data('iframe-src'),
            $fancyModal = $('#fancy-modal');

        $fancyModal.find('iframe').prop('src', iframeSrc);
        $fancyModal.modal('show');

        return false;
    });
});

声明：这还没有经过测试。