DataTable.js Tutorial for .Net Core Razor Pages Application - Part 1
Zoltan Halasz
Posted on December 12, 2019
As I mentioned in my previous posts, my goal is to gather a number of open source Javascript libraries, that can be implemented in my .NET Core project, alongside with Razor pages. My projects have to serve business purposes, so they need certain features that make them similar to Microsoft Excel.
Until now, I found a solution for:
a. Charting, with Chart.js, shown in tutorial: https://mydev-journey.blogspot.com/2019/12/chartjs-tutorial-with-aspnet-core-22.html
b. Pivot Table, with PivotTable.js, shown in tutorial: https://mydev-journey.blogspot.com/2019/12/pivottablejs-in-net-core-razor-pages.html
c. Fast Report, open source reporting tool, will be presented soon
d. DataTables- present tutorial.
e. AgGrid or other grid systems- future plan.
In the Javascript opensource world, https://datatables.net/ seems to be a respected solution for grids on the frontend. This is what I want to learn and implement in my project, and in the meantime, to share with you. I would like to study later a more advanced solution with Datatables, with additional features, and perhaps that will be a continuation for this tutorial, another time.
Materials to study:
I. DataTables site, and two small examples that are the backbone of this tutorial:
a. https://datatables.net/examples/data_sources/dom.html
b. https://datatables.net/examples/data_sources/js_array.html
II. My Razor projects with Chart and PivotTable, see my tutorials at a) and b) above, see link: https://mydev-journey.blogspot.com/2019/12/pivottablejs-in-net-core-razor-pages.html
III. Download my code from zipped repo: https://drive.google.com/open?id=1g1eJkqV1dphV0iAPQiqpLJSQtt_iYjeX
IV. Download the zipped DataTables files from: https://datatables.net/download/
Download the Css and JS file specific to Datatables, and place them into the CSS and JS folder of wwwroot.
jquery.dataTables.min.css => will go to the wwwroot/css folder
jquery.dataTables.min.js => will go to the wwwroot/js folder
then, copy the images files to wwwroot/images
Steps to follow for this introductory tutorial:
Create a .Net Core Web Project (Razor pages)
Create Base Class - InvoiceModel
public class InvoiceModel
{
[JsonProperty(PropertyName = "InvoiceNumber")]
public int InvoiceNumber { get; set; }
[JsonProperty(PropertyName = "Amount")]
public double Amount { get; set; }
[JsonProperty(PropertyName = "CostCategory")]
public string CostCategory { get; set; }
[JsonProperty(PropertyName = "Period")]
public string Period { get; set; }
}
Create Service to Populate List of Invoices.
public class InvoiceService
{
public List<InvoiceModel> GetInvoices()
{
return new List<InvoiceModel>()
{
new InvoiceModel() {InvoiceNumber = 1, Amount = 10, CostCategory = "Utilities", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 2, Amount = 50, CostCategory = "Telephone", Period="2019_12"},
new InvoiceModel() {InvoiceNumber = 3, Amount = 30, CostCategory = "Services", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 4, Amount = 40, CostCategory = "Consultancy", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 5, Amount = 60, CostCategory = "Raw materials", Period="2019_10"},
new InvoiceModel() {InvoiceNumber = 6, Amount = 10, CostCategory = "Raw materials", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 7, Amount = 30, CostCategory = "Raw materials", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 8, Amount = 30, CostCategory = "Services", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 8, Amount = 20, CostCategory = "Services", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 9, Amount = 2, CostCategory = "Services", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 10, Amount = 24, CostCategory = "Services", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 11, Amount = 10, CostCategory = "Telephone", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 12, Amount = 40, CostCategory = "Consultancy", Period="2019_12"},
new InvoiceModel() {InvoiceNumber = 13, Amount = 50, CostCategory = "Services", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 14, Amount = 40, CostCategory = "Utilities", Period="2019_11"},
new InvoiceModel() {InvoiceNumber = 15, Amount = 10, CostCategory = "Services", Period="2019_11"},
};
}
}
This will be injected in the pages where the list is needed.
We need to register in the services, startup.cs, just above the AddMvc command.
services.AddTransient<InvoiceService>();
Create special layout file, which inserts the necessary css file in the head of the new Layout file.
in the head, this will be inserted:
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css" />
See _DataTableLayout from my repo.
Index page: will display a html table with the elements of the list above, using the classic Razor Page syntax.
DataTable page will contain the JS Code to transform an existing Html table to the DataTable grid format, according to study material I - a) above.
in the Razor Page, the following Javascript code will be inserted, below the listing of the table:
<script type="text/javascript" language="javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#example').DataTable({
"order": [[3, "desc"]]
});
});
</script>
Important aspect here: the html table has to have the id "example" to be transformed into the grid format by the datatable js commands.
DataTableAjax will use AJAX Fetch in javascript to generate an array which will be used as a datasource for the array, according to study material I - b) above.
<script type="text/javascript" language="javascript" src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<script>
function convertToDataSet(responseJSON) {
console.log(responseJSON);
var returnList = [];
var returnitem = [];
for (var i = 0; i < responseJSON.length; i++) {
console.log(responseJSON[i]);
returnitem = [];
returnitem.push(responseJSON[i].InvoiceNumber);
returnitem.push(responseJSON[i].Amount);
returnitem.push(responseJSON[i].CostCategory);
returnitem.push(responseJSON[i].Period);
returnList.push(returnitem);
}
return returnList;
}
function getTable() {
return fetch('./DataTableArray?handler=ArrayData',
{
method: 'get',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
.then(function (response) {
if (response.ok) {
return response.text();
} else {
throw Error('Response Not OK');
}
})
.then(function (text) {
try {
return JSON.parse(text);
} catch (err) {
throw Error('Method Not Found');
}
})
.then(function (responseJSON) {
var dataSet = convertToDataSet(responseJSON);
console.log(dataSet);
$(document).ready(function () {
$('#example').DataTable({
data: dataSet,
columns: [
{ title: "InvoiceNumber" },
{ title: "Amount" },
{ title: "CostCategory" },
{ title: "Period" },
]
});
});
})
}
getTable();
</script>
<table id="example" class="display" width="100%"></table>
The final result will be:
a. from html table:
b. from Javascript Array:
Posted on December 12, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
February 27, 2020
