加载部分视图时,FancyBox弹出窗口会丢失所有样式

时间:2017-04-06 09:45:17

标签: javascript jquery css asp.net-mvc fancybox

我正在尝试使用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>    
}

我打开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>

返回局部视图的控制器方法是:

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

我完全没有想法,我们将非常感谢任何帮助。

编辑 - 添加了屏幕截图

enter image description here

1 个答案:

答案 0 :(得分:0)

管理解决这个问题。问题是因为局部视图没有布局,所以部分没有正确加载。所以我为部分视图创建了一个基本布局,现在它按预期工作。