FancyBox 弹出窗口在加载局部视图时丢失所有样式

Question

我正在尝试使用 fancybox 在我的 MVC 项目中加载局部视图。似乎正确加载了内容。无论如何，它的大部分内容似乎都缩短了页面，但是在加载它时它会丢失视图中的所有样式。

我已将我的 CSS 文件包含在我的部分视图中，但仍然没有成功。

我的部分观点如下：

@model ApprovalSystem.ViewModels.RequestDetailViewModel
@section styles
{
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="~/Content/material.min.css" rel="stylesheet" />
    <link href="~/Content/jquery.fancybox.min.css" rel="stylesheet" />
}
//CONTENT HERE - Not providing it all as it is quite large. Classes and all remain in the partial view though so cannot see that being an issue.
@section scripts
{
    <script>
        $(document).ready(function () {
            $('[data-fancybox]').fancybox({
                maxWidth    : 800,
                maxHeight   : 600,
                fitToView   : false,
                width       : '70%',
                height      : '70%',
                autoSize    : false,
                closeClick  : false,
                openEffect  : 'none',
                closeEffect : 'none'
            });
        })
    </script>    
}

我的link打开fancybox是：

<a data-fancybox href="@Url.Action("DetailPartial", new { id = Model.Request.ParentRequestId })" class="mui-btn mui-btn--fab mui-btn--small fancybox.ajax">@Model.Request.ParentRequestId</a>

return 局部视图的控制器方法是：

public async Task<ActionResult> DetailPartial(int id)
{
    var request = _uow.RequestService.Get(id);
    var currentUser = await AzureGraph.GetUser();
    ViewBag.CurrentUser = currentUser.DisplayName;
    ViewBag.NextApprover = _uow.ResponseService.Get().Where(r => r.RequestId == id && r.ResponseStatus == RequestStatus.NotProcessed).Select(r => r.Responder).FirstOrDefault();
    RequestDetailViewModel viewModel = new RequestDetailViewModel()
    {
        Request = request
    };

    if (request.FolderId != null)
        viewModel.Attachments = await AzureGraph.GetFileSystemObjects(request.FolderId);
    else
        viewModel.Attachments = new List<FSObject>();

    return PartialView("DetailPartial", viewModel);
}

我完全没有想法，任何帮助将不胜感激。

编辑 - 添加了屏幕截图

Answer 1

设法解决了这个问题。问题是因为局部视图没有布局，所以部分没有被正确加载。所以我为局部视图创建了一个基本布局，它现在可以正常工作了。

FancyBox 弹出窗口在加载局部视图时丢失所有样式

FancyBox popup loses all styling when loading Partial View

javascript

css

asp.net-mvc

jquery

fancybox