TL;DR: This blog guides you through using the Syncfusion Blazor Data Form component to perform CRUD operations in a .NET 10 Preview 2 Blazor web app. It covers setting up the app, defining the data model, implementing CRUD logic, and integrating the form within a Blazor Dialog. You’ll also learn about built-in validation.
In this tutorial, we’ll explore how to perform CRUD operations using the Blazor Data Form Component in a .NET 10 Preview 2 web app. The Blazor Data Form Component provides an easy and efficient way to create, edit, and delete records with minimal code.
Overview of Blazor Data Form Component
Say goodbye to tedious manual data entry with the Data Form. This component allows you to easily create various forms that can be automatically generated from your data model using other Blazor components.
It simplifies data input and editing, ensuring a user-friendly experience on your application’s registration page or data entry form while maintaining simplicity. With this streamlined component, you can efficiently validate and submit information.
Prerequisites
Before we begin, make sure you have the following prerequisites installed:
Create a new Blazor web app application using Visual Studio, install Syncfusion Blazor Packages, and configure the style and script reference as outlined in the getting started document.
Install the Syncfusion Blazor package
Install the Syncfusion Blazor package using the following NuGet command:
Create a simple model representing employee data with the name EmployeeDetails, as shown in the code below.
public class EmployeeDetails
{
[Display(Name = "Employee ID")]
[Editable(false)]
[Required(ErrorMessage = "Please enter employee ID")]
public int Id { get; set; }
[Display(Name = "Employee Name")]
[Required(ErrorMessage = "Please enter employee name.")]
public string Name { get; set; }
[Display(Name = "Employee Data Of Birth")]
[Required(ErrorMessage = "Please enter employee date of birth.")]
public DateOnly? DateOfBirth { get; set; }
[Display(Name = "Employee Designation")]
[Required(ErrorMessage = "Please enter employee designation.")]
public string Designation { get; set; }
[Display(Name = "Employee Salary")]
[Required(ErrorMessage = "Please enter employee salary.")]
public decimal Salary { get; set; }
}
Add CRUD operations in the Employee class
Create a class to handle CRUD operations, including getting all data, adding new data, updating data, and deleting data.
Refer to the following code example.
public class EmployeeCrud
{
private List<EmployeeDetails> _employees = new List<EmployeeDetails>
{
new EmployeeDetails { Id = 1, Name = "John Doe", DateOfBirth=new DateOnly(1990,01,19), Designation = "Software Engineer", Salary = 50000 },
new EmployeeDetails { Id = 2, Name = "Jane Doe", DateOfBirth=new DateOnly(1987,11,25), Designation = "Senior Software Engineer", Salary = 60000 }
};
public IEnumerable<EmployeeDetails> GetAllEmployees()
{
return _employees;
}
public EmployeeDetails GetEmployeeById(int id)
{
return _employees.FirstOrDefault(e => e.Id == id);
}
public void AddEmployee(EmployeeDetails employee)
{
employee.Id = _employees.Count + 1;
_employees.Add(employee);
}
public void UpdateEmployee(EmployeeDetails employee)
{
var existingEmployee = _employees.FirstOrDefault(e => e.Id == employee.Id);
if (existingEmployee != null)
{
existingEmployee.Name = employee.Name;
employee.DateOfBirth = employee.DateOfBirth;
existingEmployee.Designation = employee.Designation;
existingEmployee.Salary = employee.Salary;
}
}
public void DeleteEmployee(int id)
{
var employee = _employees.FirstOrDefault(e => e.Id == id);
if (employee != null)
{
_employees.Remove(employee);
}
}
}
Add the Data Form component and configure CRUD operations
Step 1: In your Blazor application, configure the Data Form component inside the Blazor Dialog component on the Components/Pages/Home.razor page, as shown in the code below.
Step 2: Add a new button to add a record. When this button is clicked, the Data Form Dialog will appear, allowing the user to enter employee details.
Refer to the following code example.
<SfButton IsPrimary=true OnClick="Save">Add New</SfButton>
@code {
void Save()
{
EmployeeModel = new EmployeeDetails();
editContext = new EditContext(EmployeeModel);
// show the dialog
IsVisible = true;
}
}
Step 3: Display the added employee details in a table format with Edit and Delete buttons in each row, allowing for edit and delete operations upon clicking.
Thanks for reading! By following these comprehensive steps, you can effectively add, edit, and delete employee records seamlessly with the Blazor Data Form component.
Saravanan is a Technical Product Manager at Syncfusion for Web products. He is passionate about Web technology and has been active in development since 2010 and focuses mainly on delivering the products with perfection.
ChatGPT
Perplexity
Claude
Grok