Daten mit ASP.NET MVC 5 und jquery Datatable anzeigen
Hallo!
Ich bin gerade dabei mich in das Thema ASP.NET MVC 5 einzuarbeiten und gehe ein paar Tutorials durch. Ich wollte nun meine neu erstellte Seite mit ein paar Demodaten anzeigen, was auch soweit klappt. Nun wollte ich eigentlich "nur" für die Anzeige die jquery DataTable nutzen.
Die JavaScript-Dateien werden ohne Fehler heruntergeladen, aber wenn bei der Anzeige der Seite wird immer noch die "alte" Tabelle angezeigt und in der Ausgabe bekomme ich folgenden Fehler:
Fehlermeldung:
TypeError: col is undefined
(Fehlermeldung befindet sich auch im Anhang)
Ich habe über nuget die "jquery.datatables" Version 1.10.15 geladen.
Hier ein paar Code-Schnipsel, wie ich die Daten lade und anzeige:
Dummy-Daten laden aus dem Controller:
public ActionResult ViewEmployees()
{
ViewBag.Message = "Employees List";
List<EmployeeModel> list = new List<EmployeeModel>();
list.Add(new EmployeeModel { EmployeeId = 100001, FirstName = "Max 1", LastName = "Muster 1", EmailAddress = "test1@test.de" });
list.Add(new EmployeeModel { EmployeeId = 100002, FirstName = "Max 2", LastName = "Muster 2", EmailAddress = "test2@test.de" });
list.Add(new EmployeeModel { EmployeeId = 100003, FirstName = "Max 3", LastName = "Muster 3", EmailAddress = "test3@test.de" });
list.Add(new EmployeeModel { EmployeeId = 100004, FirstName = "Max 4", LastName = "Muster 4", EmailAddress = "test4@test.de" });
list.Add(new EmployeeModel { EmployeeId = 100005, FirstName = "Max 5", LastName = "Muster 5", EmailAddress = "test5@test.de" });
return View(list);
}
Die Angabe der JavaScript und CSS-Dateien in der BundleConfig
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/lib").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/bootstrap.js",
"~/Scripts/DataTables/jquery.dataTables.js",
"~/Scripts/DataTables/dataTables.bootstrap.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/DataTables/css/dataTables.bootstrap.css",
"~/Content/site.css"));
}
Hier die _Layout.cshtml-Seite
<!DOCTYPE html>
<html>
<head>
<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>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("Sign Up", "SignUp", "Home")</li>
<li>@Html.ActionLink("View Employees", "ViewEmployees", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
@Scripts.Render("~/bundles/lib")
@RenderSection("scripts", required: false)
</body>
</html>
Hier nun meine HTML-Seite
@model IEnumerable<ASP_NET_MVC.Models.EmployeeModel>
@{
ViewBag.Title = "View Employees";
}
<h2>View Employees</h2>
<p>
@Html.ActionLink("Create New", "SignUp")
</p>
<table id="employees" class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.EmployeeId)
</th>
<th>
@Html.DisplayNameFor(model => model.FirstName)
</th>
<th>
@Html.DisplayNameFor(model => model.LastName)
</th>
<th>
@Html.DisplayNameFor(model => model.EmailAddress)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.EmployeeId)
</td>
<td>
@Html.DisplayFor(modelItem => item.FirstName)
</td>
<td>
@Html.DisplayFor(modelItem => item.LastName)
</td>
<td>
@Html.DisplayFor(modelItem => item.EmailAddress)
</td>
</tr>
}
</table>
@section Scripts
{
<script>
$(document).ready(function () {
$("#employees").DataTable();
});
</script>
}
Da ich hier gerade kurz vorm verzweifeln bin, hoffe ich, dass ihr ggf. noch eine Idee habt, warum meine Tabelle nicht als jquery-Datatable angezeigt wird und ich den TypeError-Fehler bekomme!?
Vielen Dank schonmal im Voraus für eure Antworten!
MfG
Jamey
Erster Google Treffer auf der Suche nach TypeError: col is undefined gibt mir Why I am having this type of error “TypeError: oColumn is undefined” using jquery datatables I followed all from its docs scheint das einfach nur ein simpler Anwendungsfehler zu sein, wie auch die als Lösung markierte Antwort zeigt:
OK, it looks like your table is empty on load, so datatables might not work since it is not formatted properly to start with. So, I'd suggest you build your table with a proper HTML first before you populate it via ajax. So try to make this: (Code siehe Stackoverflow)
Wenn das nicht der Fehler ist gibt es andere Tipps in dem Thread. Oder auch hier:
jQuery DataTables: Common JavaScript console errors
Zumindest der Hinweis Missing table header. trifft bei Dir zu. Nirgends ein <thead> zu finden, wie es der DataTable Doku zu entnehmen ist.
Auch der Table Body fehlt komplett.
Google wirft wirklich viele Vielzahl von Treffern aus - überhaupt gesehen? 😃
PS: Sei Dir bewusst, dass Du mit Technologien arbeitest, die in der Art und Weise und in sich selbst obsolet ist.
ASP.NET MVC 5 ist schon Jahre abgekündigt und bekommt nur noch grundlegenden Security Support (bis 2023). Das Zusammenspiel, wie Du hier JavaScript und MVC mischt, würde man heuzutage auch nicht mehr so machen wie damals.
Der Nachfolger, ASP.NET Core, existiert bereits seit 2015 und ist aktuell in der Version 3 zu haben.
- performance is a feature -
Microsoft MVP - @Website - @AzureStuttgart - github.com/BenjaminAbt - Sustainable Code
Hallo und vielen Dank für deine Antwort!
Ich habe jetzt ein neues Projekt (ASP.NET Core 3 MVC) erstellt und damit klappt es jetzt.
MfG
Jamey