CRUD Operations Using Blazor and MongoDB [Webinar Show Notes]

This blog provides show notes for our August 18, 2022, webinar, “Performing CRUD operations using Blazor and MongoDB.” The webinar was presented and hosted by Syncfusion developer Christopher K. If you missed it, or would like to watch it again, you can find it on our YouTube channel or embedded here.

The Q&A segment of the webinar is provided at the end of this blog post.

Overview

In this webinar, we learned to perform create, read, update, and delete (CRUD) operations using the Syncfusion Blazor DataGrid component and MongoDB as the database provider.

Agenda

• Install MongoDB 6.0 in Windows and configure a MongoDB database.
• Create a simple Blazor application with Syncfusion Blazor DataGrid, configure CRUD operations, and connect it with the MongoDB database.
• Perform CRUD operations in the Blazor DataGrid and MongoDB database.

Install MongoDB 6.0 on Windows

• Install the latest version of MongoDB.
• Installing MongoDB Compass.

Configure MongoDB 6.0 on Windows

• Configure MongoDB on a PC.
• Connect and create a database using MongoDB Compass.
• Add an initial data collection.

Create a simple Blazor app

Prerequisites

• Install the .NET Core 2.1 SDK or above.
• Install the latest version of Visual Studio 2017 or above.

Procedure

• Create a simple Blazor application.
• Add the Syncfusion Blazor DataGrid.
• Configure CRUD operations.
• Connect the DataGrid with the MongoDB database.

Q&A

Can we connect to MongoDB using a service? Something like:

#region Get List of SavedUsers
public async Task<List<AspNetUsers>> GetAllSavedUsersAsync()
{
return await _metricLogiranjeContext.AspNetUsers.AsQueryable().Where(x => x.Email != null).OrderBy(x => x.Email).ToListAsync(); ;
}
#endregion

Yes. You can do this in the newer versions of MongoDB. You need to include MongoDB.Driver.Linq namespace at the top like this:

using MongoDB.Driver.Linq;

Will there be a link to the sample project used in the webinar?

Yes, you can get the sample application from this GitHub location.

I perform CRUD with a SQL statement insert and then use SfGrid.Refresh() to refresh the grid but it is not working. Do you have a sample code?

Yes, we have sample code in the following GitHub location, and we also cover this topic in our documentation:

• Sample: Performing CRUD operations in Blazor DataGrid with SQL server database
• Documentation: Handling CRUD operations with our Syncfusion Blazor DataGrid component

Recommended resources (related links)

• What’s New in 2022 Volume 2: Blazor
• Easily Deploy a Blazor WebAssembly App to Cloudflare
• A Full-Stack Web App Using Blazor WebAssembly and GraphQL: Part 6
• Download Files from Azure Blob Storage with Blazor WebAssembly and ASP.NET Web API