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

问题描述 投票：0回答：1

我有一个带有超链接列的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

asp.net-mvc-5 bootstrap-4 bootstrap-modal partial-views
1个回答
2
投票

我认为你的概念是完全错误的。我假设您想在模态中显示订单详细信息？既然你有一个返回部分视图的方法，那么每当用户点击超链接列时你想要将订单详情内容加载到模态中吗？

如果是这种情况，bootstrap模态不适合您。它旨在加载静态内容。如果您想加载动态内容，即订购不同订单号的详细信息，您应该研究一个名为iframe的概念，以及像Fancybox等的库。

这就是我要做的事情：

1.Define a modal layout

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

<!-- _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.Return views that use _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.Write JavaScript to trigger FancyBox on link clicking

对于要从​​中加载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.Create links to open modal

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

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

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

例如：

enter image description here

如果你只能使用bootstrap模式？

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

Sample of modal template

<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;
    });
});

不承认：尚未经过测试。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.