ASP.NET Core Blazor Server is a platform for developing modern and dynamic web applications. With Blazor Server, you can write code in C# and create rich user interfaces using HTML and CSS, all while taking advantage of server-side rendering and real-time updates.
Advantages of Blazor
- Server-side rendering
- Interactive user interfaces
- Real-time updates
- .NET runtime
- Easy integration with other .NET technologies
- Cross-platform support
Server-side rendering: Blazor Server enables server-side rendering of the application's user interface, which provides a faster initial load time and improved performance on low-powered devices.
Real-time updates: Blazor Server includes support for real-time updates, enabling developers to create responsive and dynamic applications that can update in real-time without requiring a page refresh.
.NET Runtime: Blazor Server runs on top of the .NET runtime, giving developers access to the full set of.NET features and libraries.
Easy integration with other.NET technologies: Blazor Server integrates easily with other.NET technologies, such as ASP.NET Core and SignalR, enabling developers to build powerful web applications with a familiar development experience.
Cross-platform support: Blazor Server supports cross-platform development and can be deployed to a wide range of platforms, including Windows, Linux, and macOS.
In this article, we're going to learn how to implement CRUD operations (create, read, update, and delete) in your Blazor Server applications using Azure Cosmos DB and C#. This powerful NoSQL database service is fully managed and enables you to store and retrieve data at a global scale with low latency and high availability. Cosmos DB supports multiple data models, including document, key-value, graph, and column-family, which can all be accessed using the familiar SQL API.
By the end of this article, you'll have a good understanding of how to implement CRUD operations in your ASP.NET Core Blazor Server applications using Azure Cosmos DB and C#, as shown in the following screen.
Now lets start for the implemention step by step
Step 1: Set up PrerequisitesSet up the following one of the required pre-requisites to perform the CRUD operation in the Azure Cosmos DB
- Azure Subscription OR
- Azure Cosmos DB Emulator
The first approach to using Azure Cosmos DB requires an active Azure subscription and an internet connection, which may not be feasible for those who want to explore or learn about the service. To overcome this limitation, one can use the Azure Cosmos DB Emulator, which provides the same capabilities and features without requiring an active Azure subscription or internet connection.The following is the link to download the Azure Cosmos DB Emulator.
Clicking on the above link will take you to the official Microsoft documentation website, where you can find and download the latest version of the Azure Cosmos DB Emulator.
Step 2: Create Azure Cosmos DB
Now click on the explorer and create the database and container. The explorer will then look like this:
- The ID and Department properties should be part of your backend input while inserting or updating the records; otherwise, you will get the exceptions.
Step 3: Create ASP.NET Core Blazor Server App
- Start, then All Programs, and select "Microsoft Visual Studio 2022."
- Once Visual Studio opens, click on "Continue without code."
- Then go to the Visual Studio menu, click on File => New Project,
- Select "Blazor Server App" as the project template and click "Next." as shown in the following image
5. The next window allows to defind the addtional information such as .NET Framework and other configuration as shown in the beleow
Select the framework.NET 7.0, set the authentication type to none, check the configure for https checkbox, and click on the create button. The preceding steps will create the Blazor server application. after deleting the default filesm, The solution explorer will look like as what is shown in the following image.
Step 4: Add Microsoft.Azure.Cosmos Nuget Package Reference
The Microsoft.Azure.Cosmos is the latest nuget package to interact with the Azure Cosmos DB. The Microsoft Azure Cosmos supports basic, custom, and complex database operations. Follow the following steps to add the Nuget package.
- Right-click on the Solution Explorer, find Manage NuGet Package Manager, and click on it.
- After that, as shown in the image, type Microsoft.Azure.Cosmos into the search box.
- Select Microsoft.Azure.Cosmos as shown in the image,
- Choose a version of the Microsoft.Azure.Cosmos library and click on the install button.
Step 5:Create the Model Class
- First, delete the default model class, which is created outside the folder structure, so we can start from scratch.
- Next, create the folder named Model by right clicking on the solution explorer.
- Create the class with name EmployeeModel by right clicking on the Model folder, as shown in the following image
The code defines a model class with properties that can hold information about an employee, which can be used in a Blazor server application for managing employees.
Step 6: Add the EmployeeService classCreate the EmployeeService class by right clicking on the Data folder as shown in the following image.
Step 7: Method to create Cosmos DB Client
Step 8 : Create Method to Add Employee
The preceding code adds an employee to a database asynchronously. It generates a GUID for the employee's ID, gets a reference to a database container, and creates a new item in the container using the employee object and a partition key. If an exception occurs, it logs the exception message to the console.
Step 9: Create Method to Get Employees
The preceding code retrieves employee details from a Cosmos database asynchronously and returns them as a list of EmployeeModel objects. It initialises an empty list, gets a reference to a container, creates a SQL query to select all data, and iterates over the results to add each employee to the list. If an exception occurs, it logs the exception message to the console. The method returns the list of EmployeeModel objects.
Step 10: Create Method to Get Employee by ID
Create the GetEmployeeDetailsById method in the EmployeeService.cs and add the following code to get the employee by employeeId and partition key from the Cosmos database.
The preceding code retrieves an employee's details from a cosmos db asynchronously using the employee's ID and partition key. It gets a reference to a container, reads the employee data using the ReadItemAsync method, and returns an EmployeeModel object that corresponds to the specified ID. If an exception occurs, it throws a new exception that includes the original exception message.
Step 11: Create Method to Update Employee
Create the UpdateEmployee method in the EmployeeService.cs and add the following code to update the employee by employeeId and partition key. The Cosmos DB does not support the partial update feature; rather, it actually replaces the existing item by getting the document to be updated and sending the same details to the database after fields to change or update.
The preceding code updates an existing employee's data in a database using an asynchronous programming model. It reads the existing employee data from the database using ReadItemAsync, replaces the existing values with the new ones provided in the input EmployeeModel object, and saves the updated employee data to the database using ReplaceItemAsync. If an exception occurs, it throws a new exception that includes the original exception message.
Step 12: Create Method to Delete Employee
Create the DeleteEmployee method in the EmployeeService.cs and add the following code to delete the employee by employeeId and partition key.
The preceding code deletes an employee's data from a database using an asynchronous programming model. It gets a reference to a container object using ContainerClient() and calls the DeleteItemAsync method on it with the employee's ID and partition key to delete the employee's data from the database. If an exception occurs, it throws a new exception that includes the original exception message.
The entire code of the EmployeeService.cs class file will look like the following after adding all the methods together:
Step 13: Add Employee Razor components to Add Employee
The preceding Blazor component will add employees to an application. It includes an EmployeeModel object for storing input data, a List<EmployeeModel> property for displaying all employees, and an asynchronous AddRecord() method that adds a new employee to the list using an injected EmployeeService object. This ensures that the displayed employee list is updated with the newly added employee.
Step 14: Add FetchData Razor components to List Employees
Follow the same steps as mentioned in step no. 13 to create the FetchData components to list the employees from Cosmos DB, or you can use the default FetchData components that will be created during the Blazor server application.
The folllowing is the explantion of the above code
- The component injects an EmployeeService instance, which provides methods for fetching and deleting employee data.
- The component has a nullable List<EmployeeModel> property called employees, which holds the list of employee data fetched from the service.
- The OnInitializedAsync method is an override method that is called when the component is initialized. It uses the empService instance to fetch the employee data and assigns it to the employees property.
- The component contains an if statement that checks whether the employees property is null. If it is null, a progress bar is displayed; otherwise, a table is displayed with the employee data.
- The table has six columns: Name, Country, City, Department, Designation, and an empty column for action buttons.
- The foreach loop iterates over the employees list and creates a row in the table for each employee. Each row displays the employee's name, country, city, department, and designation, and contains two action buttons: an edit button and a delete button.
- The edit button is an HTML link that takes the user to a different page (EmployeeEdit) to edit the employee's data. It uses string interpolation to include the employee's ID and department in the URL.
- The delete button is a Blazor button that calls the DeleteEmployee method when clicked. It passes the employee's ID and department as parameters to the method using lambda expressions.
- The DeleteEmployee method calls the DeleteEmployee method of the empService instance to delete the employee data from the backend. It then fetches the updated employee data and assigns it to the employees property.
Step 15: Add EmployeeEdit Razor components
Follow the same steps as mentioned in step no. 13 to create the EmployeeEdit razor components to update the employees in the Cosmos DB.
Step 16: Call the Employee.Razor component in Index.razor
Now, we have all the code in the Blazor server application to interact with Azure CosmosDB. After adding all files, the solution explorer will look as shown in the following image:
Step 17: Run the ASP.NET Core Blazor Application
Blazor Server App CRUD Demo With Cosmos DB
The following animated image will show how the records were added to the Cosmos DB backend.
- Store the Cosmos database credentials in the secure configuration file.
- Since this is a demo, it might not be using proper standards, so improve it depending on your skills.
- This tutorial is completely focused on beginners.
- Download the source code from my GitHub account for your understanding and demo purposes.The link will be provided at the end of the article.
- The Blazor Edit form is used to add and edit data.
- The table automatically gets refreshed whenever records are deleted, added, or edited.
Please share with your friends and follow me for more of these types of articles. Don't forget to add your feedback in the comment section.
- Building CRUD Web API for Cosmos DB using C# ASP.NET Core
- Azure Service Bus Basic Vs Standard Vs Premium Tiers
- How To Connect Azure Kubernetes Cluster Using Kubectl
- Bind DropDownList Using ViewBag In ASP.NET Core
- How to Create ASP.NET Core Web Application
- Running ASP.NET Core Web Application in Docker Container
- How To Deploy ASP.NET Core Application On Docker Linux Container