Carter Harris![Blazor DataGrid Implement CRUD Operations Using EF Core & Web API [Webinar Show Notes]](https://mapledrawhubb.com/www.syncfusion.com/blogs/wp-content/uploads/2025/09/Blazor-DataGrid-Implement-CRUD-Operations-Using-EF-Core-Web-API-Webinar-Show-Notes.jpg)
Introduction
In this webinar, Syncfusion® Senior Product Manager Shriram demonstrated how to build a modern Blazor web application with a DataGrid component connected to an SQL Server database. The session focused on implementing CRUD operations using Entity Framework Core (EF Core) and Web API, showing how to create, read, update, and delete records in a clean and interactive interface.
If you missed the webinar or would like to watch it again, the recording is posted to our YouTube channel and embedded below.
Highlights
Project setup and architecture:
- A Blazor web app structured into client, server, and shared projects.
- SQL Server database with a Books table for demonstration.
- EF Core context and model classes scaffolded from the database.
DataGrid integration:
- Use the Syncfusion® Blazor DataGrid with toolbar actions.
- Configure columns, formats, and inline editing options.
- Register Syncfusion® services, themes, and licensing.
Live coding walkthrough:
- GET method: Fetch all books from the database.
- POST method: Insert new books into the table.
- PUT method: Update existing book records.
- DELETE method: Remove books from the database.
- Full demonstration of API endpoints, client services, and UI integration.
End-to-end flow:
Data moves seamlessly from the DataGrid to Client Services, then to the Web API, followed by EF Core, and finally to the Database, ensuring an efficient CRUD workflow.
Time Stamps
- [00:00] Introduction and agenda
- [01:00] Demo overview and database setup
- [02:30] Project architecture (client, server, shared)
- [04:20] Installing NuGet packages and configuring dependencies
- [06:30] Live coding begins, GET method for BooksController
- [09:00] Client services: Fetching data from the API
- [11:00] Setting up the Blazor DataGrid UI
- [15:00] Configuring columns, the toolbar, and edit settings
- [18:30] Running the application, fetching data from database
- [20:00] Adding books (POST)
- [23:30] Updating books (PUT)
- [27:00] Handling row updates (add and edit)
- [30:00] Testing, add and update in the UI and database
- [31:00] Deleting books (DELETE)
- [35:00] Testing delete functionality
- [36:20] Recap and key takeaways
Q&A
Q1: Will we be able to download this project solution?
A: Yes, you can find the project in this GitHub repository.
Q2: This component is very interesting. Does it have conditional formatting and totals by columns in filter mode?
A: The Syncfusion® Blazor DataGrid component supports conditional formatting and aggregates.
Q3: Can you explain how this would work with DTOs as well, please?
A: To use DTOs (data transfer objects), define a DTO class that includes only the necessary properties from your entity. This helps decouple your API from the database model, improving security and maintainability. You can:
- Use DTOs in your API controller for input/output.
- Map between entities and DTOs manually or with a library like AutoMapper.
- Validate DTOs using a model state.
- Update your Blazor component to bind the DataGrid to a list of DTOs and adjust column bindings accordingly.
Q4: I know that this is a question beyond basic CRUD functionality, but my data access needs to be handled via REST API calls. I would be interested in learning how to extend this solution to do that.
A: The demo I showed as part of this webinar was using REST APIs, except that instead of directly accessing the database from the Web API controller, you can add multiple layers for business and data logic. The data layer can be used for data access so that the Web API calls go from the controller to the business layer and then to the data access layer.
Q5: Do you mind explaining @inject and using clientlibrary in the Razor file?
A: The @inject directive in a Razor file is used to inject a service or dependency into a Blazor component using dependency injection. The @inject directive in the project shown today makes clientlibrary available in Counter.razor’s @code block and markup, allowing you to call methods like GetBooks, InsertBook, UpdateBook, and RemoveBook.
Q6: Does Syncfusion® handle paging?
A: The Syncfusion® Blazor DataGrid component does support paging.
Q7: Can the results be displayed in a multiline format rather than having to scroll? Not for the CRUD functionality, just for displaying results.
A: The component supports both paging and scrolling.
Q8: How do I add server-side pagination, filtering, and sorting?
A: Please see our documentation for the paging, filtering, and sorting features.
Q9: Does this control have another way to enter data except inline?
A: You can find the types of editing supported by the Syncfusion® Blazor DataGrid component in our documentation.
Q10: Will it be possible to incorporate images in a cell in this data grid?
A: Yes, you can add images or any Blazor component as content in cells.
Q11: Can we make design changes? Are there skins or Syncfusion® themes? We use Bootstrap by default.
A: Yes, Syncfusion® Blazor components include themes like Bootstrap 5.3, Tailwind 3, Fluent 2, and Material 3.
Q12: Can I insert a link in the results? E.g., a link to another URL.
A: Yes, you can add links as content in the Syncfusion® Blazor DataGrid component.
Q13: If you are updating data in a grid in edit mode and you accidentally change the wrong field, can you revert just the last cell and keep the other changes in the current edit?
A: In inline editing, all cells of a particular record will be in edit mode. If something is wrongly typed without closing out of edit mode, Ctrl+Z will revert the most recent changes. This is the default behavior of the text box. If the changes are saved, however, it will not be possible to revert them.
In batch editing, if a user edits multiple cells and wants to revert one specific cell, that is not possible.
Q14: Can I customize the DataGrid features to extend them?
A: Yes, the Syncfusion® Blazor DataGrid component is customizable.
Takeaways
From watching this session, developers will:
- Understand how to configure EF Core with Blazor.
- Learn to connect Blazor DataGrid with a Web API backend.
- Gain practical insights into implementing CRUD operations.
- See a real-world example of building a responsive, database-driven web app.
No spam, just valuable updates.