Question

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

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

当我单击“订购号”屏幕上的链接时，屏幕变黑，并且根本看不到网格。任何关于我在哪里做错的指示。我正在使用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。您还可以定义多个类，以弹出不同大小的模态/ fancybox模态。

$(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。创建链接以打开模式

现在，您可以使用以下任何fancybox触发器类创建链接：

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

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

例如：

如果您只能使用引导程序模式？

在这种情况下，您将必须创建一个内部带有 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;
    });
});

免责声明：这尚未测试。

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

1 个答案: