I've been attempting to incorporate a partial view into my MVC project using fancybox. It seems to be loading the content correctly, mostly anyway, as it tends to cut off part of the page and loses all styling from the view upon loading.
Even after including CSS files in my partial view, I still can't seem to get it to work properly.
The structure of my partial view is as follows:
@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>
}
The link I use to open the fancybox is:
<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>
And this is the controller method used to return the partial view:
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);
}
I'm currently stuck and any assistance would be highly appreciated.
UPDATE - Added screenshot