Bulk Data Import in Blazor Server with Radzen Datagrid

Step 2. Implementing the Code Behind

Now, let's create the code-behind file `BulkUploadRecords.razor.cs` and implement the necessary functionality.

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Radzen;
using Radzen.Blazor;

namespace BulkUpload.Pages
{
    public partial class BulkUploadRecords : ComponentBase
    {
        public ImportDataModel Record = new ImportDataModel();
        public IBrowserFile file { get; set; }
        public List<ImportDataModel> Records = new();
        public RadzenDataGrid<ImportDataModel> grid = new RadzenDataGrid<ImportDataModel>();
        public DataGridEditMode editMode = DataGridEditMode.Single;

        public class ImportDataModel
        {
            public string FirstName { get; set; }
            public string LastName { get; set; }
            public string Email { get; set; }
            public string Phone { get; set; }
            public IBrowserFile? RecordFile { get; set; }
        }

        public async Task OnInputFileChange(InputFileChangeEventArgs e)
        {
            Record.RecordFile = e.File;
            await SubmitRecords(e);
        }

        public async Task SubmitRecords(InputFileChangeEventArgs e)
        {
            file = Record.RecordFile;
            if (file.Name.EndsWith(".csv", StringComparison.OrdinalIgnoreCase))
            {
                using var stream = file.OpenReadStream();
                using var reader = new StreamReader(stream);
                string line;
                int lineNumber = 0;
                bool isHeaderRow = true;
                Records.Clear();
                await InvokeAsync(StateHasChanged);

                while ((line = await reader.ReadLineAsync()) != null)
                {
                    lineNumber++;
                    if (isHeaderRow)
                    {
                        isHeaderRow = false;
                        var headerValues = line.Split(',');
                    }

                    if (string.IsNullOrWhiteSpace(line))
                        continue;

                    var values = line.Split(',');
                    var record = new ImportDataModel
                    {
                        FirstName = values[0].Trim(),
                        LastName = values[1].Trim(),
                        Email = values[2].Trim(),
                        Phone = values[3].Trim(),
                    };

                    if (lineNumber > 1)
                    {
                        AddUserData(record);
                    }
                }

                lineNumber = 0;
                await InvokeAsync(StateHasChanged);
            }
        }

        public async void AddUserData(ImportDataModel myDataModel)
        {
            var record = new ImportDataModel
            {
                FirstName = myDataModel.FirstName,
                LastName = myDataModel.LastName,
                Email = myDataModel.Email,
                Phone = myDataModel.Phone
            };
            Records.Add(record);
            StateHasChanged();
            await grid.Reload();
        }
    }
}

In the code behind, we have the following key components:

ImportDataModel Class: This class represents the data model for each record in the CSV file. It includes properties for `FirstName`, `LastName`, `Email`, and `Phone`.
OnInputFileChange Method: This method is called when the user selects a file for upload. It sets the `RecordFile` property of the `Record` object and calls the `SubmitRecords` method.
SubmitRecords Method: This method processes the uploaded CSV file. It reads the file line by line, skipping the header row, and adds each record to the `Records` list.
AddUserData Method: This method adds a new record to the `Records` list and triggers a reload of the Radzen Datagrid.

The key aspects of the implementation are:

The `InputFile` component is used to handle the file upload event and retrieve the uploaded file.
The CSV file is read line by line, skipping the header row, and each record is parsed and added to the `Records` list.
The Radzen Datagrid is utilized to display the uploaded data, with features like sorting, filtering, and pagination.
The `EditTemplate` is used to provide custom editors for each column, allowing users to edit the data directly in the Datagrid.
Validation rules, such as required fields and regex validation, are applied to the Datagrid columns.

Putting It All Together

With the Razor Page and the code-behind file in place, you can now run your Blazor Server application and test the bulk data upload functionality.
When the user selects a CSV file and uploads it, the application will process the file, populate the Radzen Datagrid with the data, and allow the user to edit the data directly in the Datagrid.
This implementation provides a user-friendly and efficient way to handle bulk data uploads in your Blazor Server application, leveraging the powerful features of the Radzen Datagrid component.

Output

Conclusion

This article showed how to create a bulk data upload feature in a Blazor Server app using the Radzen Datagrid.

The key points are:

The app lets users easily upload a CSV file.
The data from the file is displayed in a table with features like sorting and filtering.
Users can edit the data directly in the table, and the app checks that the data is valid.

By using the techniques in this article, developers can add powerful bulk upload capabilities to their own Blazor apps. This makes it easier for users to manage large amounts of data.

Bulk Data Import in Blazor Server with Radzen Datagrid

Introduction

Prerequisites

Step 1. Setting up the Razor Page

Step 2. Implementing the Code Behind

Putting It All Together

Output

Conclusion