How to Implement CRUD Operations with CSV Service in .NET
Quick Start Guide | |
---|---|
What You Will Need |
ComponentOne Studio Enterprise Visual Studio 2022 |
Controls Referenced | |
Tutorial Concept | Learn how to create an ASP.NET web service for handling CSV data files and displaying them in an ASP.NET Core MVC UI. |
In a data-driven era, the ability to seamlessly manipulate and transform information has become essential for businesses and developers. Whether you're immersed in a compact personal project or working with massive data sets in a corporate environment, the ability to perform CRUD (Create, Read, Update, Delete) operations is essential. However, these operations are often tedious tasks that waste valuable time, especially for data neatly stored in CSV files.
Opening a seamless path to working with CSV data in C# applications, Mescius offers the ComponentOne CSV Data Connector class library, a powerful solution designed to improve your data management experience. In this blog post, join us on a journey through CRUD operations and explore how the ComponentOne CSV Data Connector can help streamline your data-related tasks.
What is ComponentOne CSV Data Connector?
ComponentOne Data Connectors can be used for effective data connectivity and are based on the ADO.NET architecture. They are powerful data providers that enable a common interface to access different kinds of data sources based on established data access technologies. They effectively hide the complexity of connecting and transacting in different ways for each data source, enabling the productive development of data-related applications. The following diagram shows the simplified architecture of the Data Connector library.
The ComponentOne CSV Data Connector acts as a transformative bridge, providing users with the unique ability to query CSV files as if they were traditional databases. This exciting feature allows users to run SQL queries directly on CSV files, just as in a regular database.
We will use a ComponentOne ASP.NET Core FlexGrid to display and edit the data on the client side (browser). You can download this sample to follow along with the blog. Now, let's take a closer look at the CRUD operations with the following steps:
- Setting Up the Environment
- Creating the CSV Service
- Setting up the FlexGrid
- Methods definition in Controller
- Add the FlexGrid with BatchEdit Action
Ready to Get Started? Download ComponentOne Today!
Setting Up the Environment
First, we need to create the ASP.Net Core Web Application. Follow the steps below to create a fresh application.
- Open Visual Studio 2022
- Click on the “Create a new project” option
- Select the template ASP.NET Core Web App (Model-View-Controller) as shown below. Then, click on "Next."
- Provide the project name and location folder and click "Next."
- In this step, we need to select the Framework version. For this application, set it as .NET 8.0. Along with the Framework version, select the following settings as shown below:
a. Authentication Type: The Authentication type can be selected based on individual requirements. We are not using Authentication for now, so this will be set to "None."
b. Configure for HTTPS: This setting determines whether or not to execute the project locally with HTTPS protocol, which is selected by default.
c. Enable Docker: This allows us to add the required Docker file to the project if you would like to host the project using Docker. - Click on "Create," and the base project will be ready for development.
In the project, we will use ComponentOne FlexGrid to perform the operations on CSV files and ComponentOne CSV Data Connector to update the CSV files on FlexGrid operations. Hence, we need to install the following NuGet Packages:
- C1.AspNetCore.Mvc
- C1.DataConnector
- C1.AdoNet.CSV
After installing the required NuGet Packages, we must set up CSV Service using the ComponentOne CSV DataConnector for the project to perform the CRUD operations. Next, we need to create the CSV Service.
Creating the CSV Service
To conduct operations on CSV files, we must first add them to the project. To store the CSV files, we would create a folder called "CSVFiles" in the "wwwroot" folder. We will place the required CSV files in the CSVFiles folder. After adding the CSV files, right-click on them and select "Properties." Here, we would set "Copy to Output Directory" to "Copy Always," as shown below:
After importing the CSV files to the project, we would define a Model class based on the characteristics and types of the CSV files.
After adding a model class based on CSV files to perform CRUD operations, we will create a new folder called "Services" and add our CSVService.cs class to perform CRUD operations on CSV files.
To perform operations on CSV files, we need to provide the location and name of the CSV files to the class. We would get this information using the class constructor.
After completing the basic setup for the CSV Service, we will write further code to perform CRUD operations with CSV files using this CSV Service. We will write the methods to interact with the data in the following order:
- Read Data
- Create/Add Record
- Update Data
- Delete Data
Read Data
When reading or fetching data from the database or data source, the read operation is the primary function we would require to view the records in UI before performing further operations. Hence, we will write our first method to fetch the data from the CSV files as an array. To achieve this, copy and paste the following code:
Create or Add Record
After writing a method for reading the data, we will write a method to add the new records to the CSV file:
Update Data
Next, write the method to update the existing records in the CSV file as soon as this method is called:
Delete Data
Now, we will write the method to delete the targeted record from the CSV file when the method is called with the targeted primary key value:
Finally, our CSV Service is ready to use in the application. Next, we will configure the FlexGrid UI.
Setting Up the FlexGrid
The NuGet package for ComponentOne FlexGrid for ASP.NET Core is already installed in the application, so next, we will set it up using the following steps:
Add the Tag Helper
To work with FlexGrid, add the required tag helper in the _ViewImports.cshtml file:
Register Resources
Next, register the required scripts and styles to be added to the head section of the _Layout.cshtml file. This can be done using the following code snippet:
Read more about deferred scripts in the documentation.
Add Map Routing
For ASP.NET Core applications (version 3.0 and above), the following code should be added to the Configure method of Startup.cs or in the Program.cs file:
Now, we are ready to integrate the FlexGrid into the application. Proceed by writing the methods necessary to perform CRUD operations.
Methods Definition in Controller
When performing actions on the client side, the FlexGrid sends an AJAX request to the server, and the data can be updated using these methods with the help of the CSVService class. To perform CRUD operations in the database, the CSV Service class instance should be defined within the Controller. This can be achieved with the following code:
After we create the CSV Service instance, we'll need to define the controller action that the FlexGrid will use to perform CRUD activities.
For this, we will define two methods: one for reading the data from the CSV file and one for updating the changes to the CSV file upon button click:
Add the FlexGrid with BatchEdit Action:
Our methods for performing data reading and performing batch edit operations are ready and can be utilized by the FlexGrid. Now, integrate the FlexGrid with an item source that invokes the previously written methods.
After adding the following code to the Index.cshtml file, our application is ready to execute, performing read and update operations on the data in CSV files with FlexGrid.
Ready to Try It Out? Download ComponentOne Today!
Conclusion
Through this blog, we delved into setting up the FlexGrid control, a powerful tool for displaying and manipulating data within our ASP.NET Core application. Through detailed explanations and code snippets, we learned how to implement CRUD methods with the help of the ComponentOne CSV DataConnector, enabling seamless data manipulation to the CSV files from the client side.