Witam,
Mam problem z wyświetlaniem mojej strony używającej jquery datatables:
Odpowiednie pliki wczytują się, przyciski (takie jak sortowanie w nagłówkach kolumn) z Jquery datatables działają mimo, że nie załadowały się w całości (brak obrazka). W BundleConfig bundle "~/bundles/lib" skonfigurowany poprawnie. Pliki istnieją w podanych tam ścieżkach.
Poniżej kod _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@Html.Partial("_NavBar")
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - Vidly</p>
</footer>
</div>
@Scripts.Render("~/bundles/lib")
@RenderSection("scripts", required: false)
</body>
</html>
Strona:
@model IEnumerable<Vidly.Models.Customer>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h1>Customers</h1>
@if (Model.Any())
{
<table id="customers" class="table table-striped table-bordered">
<thead>
<tr class="table-info">
<th scope="row">Customer</th>
<th scope="row">Membership Type</th>
<th scope="row">Discount Rate</th>
<th scope="row">Delete</th>
</tr>
</thead>
<tbody>
@foreach (var customer in Model)
{
<tr>
<td>@Html.ActionLink($"{customer.Name}", "Edit", "Customers", new { id = customer.Id }, null)</td>
<td>@customer.MembershipType.Name</td>
<td>@customer.MembershipType.DiscountRate %</td>
<td>
<button data-customer-id="@customer.Id" class="btn-link js-delete">x</button>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>We don't have any customers.</p>
}
@section scripts
{
<script>
$(document).ready(function () {
$("#customers").DataTable();
$("#customers").on("click", "js-delete", function () {
var button = $(this)
bootbox.confirm("Are you sure you want to delete this customer?", function (result) {
if (result) {
$.ajax({
url: "/api/customers/" + button.attr("data-customer-id"),
method: "DELETE",
success: function () {
button.parents("tr").remove();
}
})
}
});
});
});
</script>
}
i BundleConfig:
using System.Web;
using System.Web.Optimization;
namespace Vidly
{
public class BundleConfig
{
// Aby uzyskać więcej informacji o grupowaniu, odwiedź stronę https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/lib").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/bootbox.js",
"~/Scripts/datatables/jquery.datatables.js",
"~/Scripts/datatables/datatables.bootstrap.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Użyj wersji deweloperskiej biblioteki Modernizr do nauki i opracowywania rozwiązań. Następnie, kiedy wszystko będzie
// gotowe do produkcji, użyj narzędzia do kompilowania ze strony https://modernizr.com, aby wybrać wyłącznie potrzebne testy.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap-lumen.css",
"~/Content/datatables/css/datatables.bootstrap.css",
"~/Content/site.css"));
}
}
}