Skip to content

ASP.NET Data Tables

ASP.NET Data Tables
Become a developer with our complete learning paths
Become a developer with our complete learning paths

In ASP.NET Data Tables provide APIs for sorting, filtering, performing aggregation and computation on tabular data. You can also display the data on pages and views. In this tutorial we’ll use Razor pages, however the technique is applicable to Razor Pages in MVC too. Razor Pages is a lightweight framework for building web applications in ASP.NET Core. It’s designed to make it easy to build simple web pages with minimal boilerplate code. One of the features of Razor Pages is its integration with the DataTable class, which allows you to work with tabular data in a fast and efficient way. By the way, did you know that we offer a unique online course that boosts your C# career? Check it out here!

Setting the Project Up

To create a razor page do the following:

  • Create an empty Razor web application
  • Replace the Pages/Index.cshtml codes with the following:
  • Run the project, navigate to the http://localhost:5175/ (Where 5175 is your app’s port) and you should see this page:

ASP.NET Data Tables

Adding Data Tables

To get started with DataTables in ASP.NET, you first need to create a new DataTable and add some columns to it. This can be done in the OnGet method of your page model:

 

In this example, we’re creating a new DataTable and adding three columns to it: ID, Name, and Age. We’re also adding three rows of data to the table. The OnGet method is called when the page is loaded, and it sets the MyTable property of the page model to the new DataTable.

 

Displaying the Data

You can use the DataTable as a data source for controls in your Razor Pages. For example, you can use the DataTable as a data source for a table in your Index.cshtml file:

In this example, we’re using the @foreach directive to iterate over the rows in the DataTable and generate HTML markup for a table. We’re using the @row["ColumnName"] syntax to access the values in each column of the DataTable.

 

Run the app and you should see the following result:

ASP.NET Data Tables

 

Once you have a DataTable, you can easily filter and sort the data using the Select and DefaultView properties.

 

Sorting

Sorting the data in a DataTable is just as easy. You can use the DefaultView property to sort the data by one or more columns:

 

In this example, we’re using the DefaultView property to sort the data by the Name column in descending order. We’re then using the ToTable method to create a new DataTable that contains the sorted data.

ASP.NET Data Tables

 

Filtering

To filter the rows where Age is greater than 30, for example, you can add the following code to your page model:

 

In this example, we’re using the Select method to filter the rows in the DataTable based on a set of criteria. We’re then using the CopyToDataTable method to create a new DataTable that contains only the filtered rows.

ASP.NET Data Tables

 

Overall, the DataTable class is a powerful and versatile tool for working with tabular data. Whether you need to filter, sort, or manipulate the data, the DataTable class provides an easy-to-use API that allows you to work with data in a way that is both intuitive and efficient.

 

Calculations

In addition to the basic operations covered in this article, the DataTable class provides many other features that make it a great choice for working with tabular data. For example, you can use the Compute method to perform aggregate calculations on the data, such as computing the sum or average of a column.

Here’s an example of how you can use the Compute method in your page model:

 

In this example, we’re using the Compute method to compute the sum of the Age column in the DataTable. We’re passing an empty string as the second argument to indicate that we want to compute the sum for all rows in the table. We’re then converting the result to an integer value using the Convert.ToInt32 method. We can add the sum as a new table row as well.

ASP.NET Data Tables

If you want to skyrocket your C# career, check out our powerful ASP.NET full-stack web development course that also covers test-driven development.

 

ASP.NET Data Tables Summary

In summary, the DataTable class is a powerful tool for working with tabular data in ASP.NET. Whether you’re building a simple table for displaying data or working with more complex data sets that require filtering and sorting, the DataTable class provides an easy-to-use API that makes it easy to work with data in an efficient and intuitive way. By taking advantage of the features provided by the DataTable class, you can build web applications that are both powerful and easy to maintain.

Lost in coding? Discover our Learning Paths!
Lost in coding? Discover our Learning Paths!
Enter your email and we will send you the PDF guide:
Enter your email and we will send you the PDF guide