Effortlessly Populate Blazor Pivot Table with MongoDB Server Data: A Comprehensive Guide
Tags: blazor, webdev, mongodb, data
Published: 2023-05-24 05:45:16

---
title: Effortlessly Populate Blazor Pivot Table with MongoDB Server Data: A Comprehensive Guide
published: true
date: 2023-05-23 11:51:37 UTC
tags: blazor, webdev, mongodb, data
canonical_url: https://www.syncfusion.com/blogs/post/blazor-pivot-table-with-mongodb.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krq72ub92cd94prbp1m0.png
---
[MongoDB](https://www.mongodb.com/cloud/atlas "MongoDB") is a popular NoSQL database system. Developers and organizations use it to store and manage large amounts of data. One of the advantages of using MongoDB is its ability to scale horizontally, making it ideal for applications requiring high availability and scalability. In this blog, we will discuss how to create a MongoDB database using [MongoDB Atlas](https://www.mongodb.com/cloud/atlas "MongoDB Atlas") and populate the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table "Blazor Pivot Table") with data from a MongoDB Server.

First, we’ll create a MongoDB database using **MongoDB Atlas**.

## Step 1: Create a MongoDB Atlas account

**MongoDB Atlas** is a cloud-based service that provides a fully managed MongoDB database. To start, go to the MongoDB Atlas website and [create an account](https://account.mongodb.com/account/login "Create MongoDB Account").
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Create-an-account.png" alt="Create a MongoDB Atlas account" style="width:100%">

  <figcaption>Create a MongoDB Atlas account</figcaption>

</figure>

## Step 2: Create a MongoDB cluster

After creating an account, build a new MongoDB cluster. Go to **Deployment->Database** on the MongoDB Atlas dashboard and select the **Build a Database** button. Select the cluster configuration that meets your requirements and click **Create**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Deploy-a-database-cluster-by-selecting-the-Build-a-Database-button.png" alt="Deploy a database cluster by selecting the Build a Database button" style="width:100%">

  <figcaption>Deploy a database cluster by selecting the Build a Database button</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Selecting-a-cluster-configuration-1.png" alt="Selecting a cluster configuration" style="width:100%">

  <figcaption>Selecting a cluster configuration</figcaption>

</figure>

## Step 3: Secure your connection with authentication protocols

You will be directed to the **Security Quickstart** page while creating the database cluster, where you need to authenticate for secure access. After entering your **Username** and **Password** , select **Create User**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Adding-authentication-to-the-database-cluster-to-create-a-secure-link.png" alt="Adding authentication to the database cluster to create a secure link" style="width:100%">

  <figcaption>Adding authentication to the database cluster to create a secure link</figcaption>

</figure>

Next, enter the IP address to access the database cluster. Only IP addresses added to the Access List will be able to connect to the database in your Blazor application. Finally, select **Finish and Close**. Your cluster is now available to add data collections.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Adding-IP-addresses-to-the-Access-List.png" alt="Adding IP addresses to the Access List" style="width:100%">

  <figcaption>Adding IP addresses to the Access List</figcaption>

</figure>

## Step 4: Create a database and collection

After setting up the cluster, create a new database and collection. Go to the **Browse Collections** tab on the MongoDB Atlas dashboard and click **Add My Own Data**. Enter your database and collection name, then select **Create**.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Creating-a-new-database-and-collection.png" alt="Creating a new database and collection" style="width:100%">

  <figcaption>Creating a new database and collection</figcaption>

</figure>

## Step 5: Add data to the collection

To add data to your collection, go to the **Collection** tab and select **Insert Document**. Enter the data you wish to add, then click **Insert**. Your data is now ready to bind to your Blazor Pivot Table.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Insert-ProductDetails-data-into-the-dialog-UI.png" alt="Insert ProductDetails data into the dialog UI" style="width:100%">

  <figcaption>Insert ProductDetails data into the dialog UI</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/ProductDetails-collection-added-to-the-Syncfusion-DB-database-2.png" alt="ProductDetails collection added to the Syncfusion-DB database" style="width:100%">

  <figcaption>ProductDetails collection added to the Syncfusion-DB database</figcaption>

</figure>

## Step 6: Connect your MongoDB cluster

Connect your data-contained database. To do so, go to the MongoDB Atlas dashboard and select **Overview** , followed by **Connect**. To create your connection string, you must select one of the communication methods. In this case, we’ve selected **Connect using MongoDB Compass.** You can now copy and paste the following connection string into your Blazor application code to retrieve the data and bind it to the Pivot Table.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Connection-string-created-using-MongoDB-Compass.png" alt="Connection string created using MongoDB Compass" style="width:100%">

  <figcaption>Connection string created using MongoDB Compass</figcaption>

</figure>

## Step 7: Connect to the MongoDB Server from Blazor

To connect to the MongoDB Server, create a Blazor application. You will need to install the **MongoDB.Driver** package using the NuGet Package Manager in that application.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Installing-MongoDB.Driver-using-the-NuGet-Package-Manager.png" alt="Installing MongoDB.Driver using the NuGet Package Manager" style="width:100%">

  <figcaption>Installing MongoDB.Driver using the NuGet Package Manager</figcaption>

</figure>

Once the package is installed, use the connection string to connect to the MongoDB Server using the **MongoClient** class and bind the retrieved data to the Blazor Pivot Table, as shown in the following code.

```csharp
@using Syncfusion.Blazor.PivotView
@using MongoDB.Bson;
@using MongoDB.Driver;
@using MongoDB.Driver.Core.Authentication;

<SfPivotView TValue="ProductDetails" Width="1000" Height="300" ShowFieldList="true">
    <PivotViewDataSourceSettings TValue="ProductDetails" DataSource="@dataSource" ExpandAll=false EnableSorting=true>
        <PivotViewColumns>
            <PivotViewColumn Name="Year"></PivotViewColumn>                    
        </PivotViewColumns>
        <PivotViewRows>
            <PivotViewRow Name="Country"></PivotViewRow>
            <PivotViewRow Name="Products"></PivotViewRow>
        </PivotViewRows>
        <PivotViewValues>
            <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
            <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
        </PivotViewValues>
        <PivotViewFormatSettings>
            <PivotViewFormatSetting Name="Sold" Format="N2"></PivotViewFormatSetting>
            <PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
        </PivotViewFormatSettings>
    </PivotViewDataSourceSettings>
    <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
</SfPivotView>

@code {
    private List<ProductDetails> dataSource { get; set; }

    protected override void OnInitialized()
    {
        string connectionString = @"mongodb+srv://Syncfusion1:<password>@cluster0.7hzev56.mongodb.net/test";
        MongoClient client = new MongoClient(connectionString);
        IMongoDatabase database = client.GetDatabase("sample_training");
        IMongoCollection<ProductDetails> collection = database.GetCollection<ProductDetails>("ProductDetails");
        dataSource = collection.Find(new BsonDocument()).ToList();      
    }

    public class ProductDetails
    {  
        public ObjectId _id { get; set; }
        public int Sold { get; set; }
        public double Amount { get; set; }
        public string Country { get; set; }
        public string Products { get; set; }
        public string Year { get; set; }
        public string Quarter { get; set; }
    }
}
```

Follow the documentation [link](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/mongodb "Binding MongoDB database with Blazor Pivot Table") to learn more about building a simple Blazor application with the Syncfusion Blazor Pivot Table to extract and bind data from your MongoDB.

## Sample project on GitHub

For more details, see the sample application in this [GitHub location](https://github.com/SyncfusionExamples/how-to-bind-MongoDB-to-pivot-table/tree/master/Blazor "Binding MongoDB to Blazor Pivot Table GitHub demo").

## Referral links

- [MongoDB documentation](https://www.mongodb.com/docs/atlas/getting-started/ "MongoDB documentation")
- [MongoDB data binding](https://blazor.syncfusion.com/documentation/pivot-table/connecting-to-data-source/mongodb "Getting Started with MongoDB Data Binding")

## Conclusion

Thank you for taking the time to read this blog post, in which we discussed how to create a MongoDB database using MongoDB Atlas and populate the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table "Blazor Pivot Table") with data using the available tools and features. Following the steps outlined in this post which makes it easy to create a powerful web application that allows users to analyze and summarize data visually.

You can download the new version from the [License and Downloads](https://www.syncfusion.com/account/downloads "Essential Studio license and downloads page") page if you’re an existing customer. If you’re not a Syncfusion customer, we invite you to try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio Products") to experience all our available features. Additionally, you can explore our samples at this [GitHub](https://github.com/syncfusion/blazor-samples "Syncfusion Blazor demos on GitHub") location.

We welcome any feedback you may have, so please feel free to share your thoughts in the comments section below or contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://www.syncfusion.com/identity/login "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/blazor-components "Syncfusion Feedback Portal"). We are always here to help you!

## Related blogs

- [What’s New in Syncfusion Blazor: 2023 Volume 1](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-1.aspx "Blog: What’s New In Syncfusion Blazor: 2023 Volume 1")
- [Simple Steps to Integrate OpenAI (ChatGPT) with Syncfusion’s Blazor Rich Text Editor](https://www.syncfusion.com/blogs/post/integrate-chatgpt-blazor-rich-text-editor.aspx "Blog: Simple Steps to Integrate OpenAI (ChatGPT) with Syncfusion’s Blazor Rich Text Editor")
- [Easily Integrate Blazor Components into Any SPA Framework as Custom Elements](https://www.syncfusion.com/blogs/post/integrate-blazor-components-into-any-spa-framework.aspx "Blog: Easily Integrate Blazor Components into Any SPA Framework as Custom Elements")
- [Seamlessly Create a Mind Map Using the Blazor Diagram Component](https://www.syncfusion.com/blogs/post/mind-map-using-blazor-diagram.aspx "Blog: Seamlessly Create a Mind Map Using the Blazor Diagram Component")