I am developing a ASP.Net Core 2.0 MVC web app and running it on Ubuntu 16.04 using Nginx. Everything works beautifully, until I open any type of Modal Dialog while running in production. While debugging the dialogs work perfectly. They open and close with no errors or problems. However when opening them in the production environment the page content disappears and the browser acts as if it is loading the page forever.
Anyone have any ideas? Here is the code for the Modals:
@model IEnumerable<erp_jbitpro_cloud.Models.Customers.Customer>
@{
Layout = "_LayoutPart";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<script>
$(document).ready(function () {
debugger;
var url = "";
});
</script>
<p>
<a asp-action="Create" class="newPopup btn btn-primary" data-toggle="modal" data-target="#editPopup">Create New</a> |
<a asp-action="Index" asp-controller="CustomerMgmnt" class="btn btn-primary">Back to Customer Management...</a>
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.CustomerName)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.CustomerName)
</td>
<td>
<a asp-action="Edit" asp-route-id="@item.CustomerId" class="editPopup btn btn-success" data-toggle="modal" data-target="#editPopup">Edit</a> |
<a asp-action="Details" asp-route-id="@item.CustomerId" class="detailsPopup btn btn-default">Details</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="editPopup" role="dialog" aria-labelledby="mylabel">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
<div class="newDialog">
</div>
<div class="detailsDialog">
</div>
</body>
</html>
And here is the partial that loads into the Modal:
@model erp_jbitpro_cloud.Models.Customers.Customer
@{
Layout = "_LayoutPart";
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create</title>
</head>
<body>
<div class="row">
<div class="col-md-7">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true" class="glyphicon glyphicon-remove-circle"></span>
</button>
<h4 class="modal-title" id="mylabel">Editor</h4>
</div>
<form asp-action="Create" class="newDialogForm">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="CustomerName" class="control-label"></label>
<input asp-for="CustomerName" class="form-control" />
<span asp-validation-for="CustomerName" class="text-danger"></span>
</div>
<div class="form-group modal-footer">
<input type="submit" value="Create" class="btn btn-success" />
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
</div>
</body>
</html>
Thanks to the suggestions made by @shyju ! The problem was that the css files were getting status 304. I was using the default linking from the template _Layout file for the Production site, once I changed those links everything now works in production. Just for clarity on what fixed it please see the code below:
Original:
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
Fixed it:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />