Effortlessly Populate Blazor Pivot Table with MongoDB Server Data: A Comprehensive Guide
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (172).NET Core  (29).NET MAUI  (192)Angular  (107)ASP.NET  (51)ASP.NET Core  (82)ASP.NET MVC  (89)Azure  (40)Black Friday Deal  (1)Blazor  (209)BoldSign  (12)DocIO  (24)Essential JS 2  (106)Essential Studio  (200)File Formats  (63)Flutter  (131)JavaScript  (219)Microsoft  (118)PDF  (80)Python  (1)React  (98)Streamlit  (1)Succinctly series  (131)Syncfusion  (882)TypeScript  (33)Uno Platform  (3)UWP  (4)Vue  (45)Webinar  (49)Windows Forms  (61)WinUI  (68)WPF  (157)Xamarin  (161)XlsIO  (35)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (8)Business intelligence  (55)Button  (4)C#  (146)Chart  (125)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (62)Development  (613)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (37)Extensions  (22)File Manager  (6)Gantt  (18)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (488)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (41)Performance  (12)PHP  (2)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (52)Security  (3)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (10)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (368)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (30)Visual Studio Code  (17)Web  (577)What's new  (313)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Effortlessly Populate Blazor Pivot Table with MongoDB Server Data: A Comprehensive Guide

Effortlessly Populate Blazor Pivot Table with MongoDB Server Data: A Comprehensive Guide

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 and populate the 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.

Create a MongoDB Atlas account
Create a MongoDB Atlas account

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.

Deploy a database cluster by selecting the Build a Database button
Deploy a database cluster by selecting the Build a Database button
Selecting a cluster configuration
Selecting a cluster configuration

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.

Adding authentication to the database cluster to create a secure link
Adding authentication to the database cluster to create a secure link

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.

Adding IP addresses to the Access List
Adding IP addresses to the Access List

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.

Creating a new database and collection
Creating a new database and collection

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.

Insert ProductDetails data into the dialog UI
Insert ProductDetails data into the dialog UI
ProductDetails collection added to the Syncfusion-DB database
ProductDetails collection added to the Syncfusion-DB database

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.

Connection string created using MongoDB Compass
Connection string created using MongoDB Compass

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.

Installing MongoDB.Driver using the NuGet Package Manager
Installing MongoDB.Driver using the NuGet Package Manager

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.

@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 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.

Referral links

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 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 page if you’re an existing customer. If you’re not a Syncfusion customer, we invite you to try our 30-day free trial to experience all our available features. Additionally, you can explore our samples at this 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, support portal, or feedback portal. We are always here to help you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed