Skip to content

Commit 39f12ad

Browse files
Sridhar-KarunakaranSridhar-Karunakaran
authored
Revise README for improved clarity and details
Updated README to enhance project description and features.
1 parent 6e63192 commit 39f12ad

1 file changed

Lines changed: 251 additions & 33 deletions

File tree

‎README.md‎

Lines changed: 251 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,268 @@
1-
# How to integrate a JavaScript Pivot Table into a Blazor web application
1+
# 🎯 JavaScript Pivot Table Integration with Blazor Web Application
22

3-
## Repository Description
4-
This repository provides a comprehensive quick-start guide and working example for seamlessly integrating a JavaScript-based Pivot Table component into a Blazor server-side web application, enabling interactive data analysis and visualization capabilities.
3+
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
4+
[![.NET](https://img.shields.io/badge/.NET-7.0-512BD4.svg)](https://dotnet.microsoft.com/)
5+
[![Blazor](https://img.shields.io/badge/Blazor-Server--side-purple.svg)](https://blazor.net/)
6+
[![Status](https://img.shields.io/badge/status-stable-brightgreen.svg)](#)
57

6-
## Project Overview
7-
This sample project demonstrates how to leverage JavaScript interoperability within a Blazor web application to integrate a powerful Pivot Table component. It showcases the best practices for combining Blazor's server-side rendering with client-side JavaScript functionality to create interactive data visualization experiences.
8+
**Seamless JavaScript Pivot Table integration for Blazor server applications** — Build interactive data analysis dashboards by combining Blazor's robust server-side rendering with a powerful JavaScript Pivot Table component, complete with real-time data aggregation and Excel export capabilities.
89

9-
## Features
10-
- Integration of JavaScript Pivot Table into Blazor web application
11-
- Server-side Blazor architecture for robust data handling
12-
- Interactive data visualization and pivot table operations
13-
- Sample weather forecast data for demonstration
14-
- Responsive web design with Bootstrap styling
15-
- JavaScript interoperability examples
10+
## 📋 Repository Description
11+
A production-ready quick-start guide demonstrating seamless JavaScript Pivot Table component integration within a Blazor server-side web application. This repository showcases best practices for JavaScript interoperability, enabling developers to create interactive data visualization and analysis dashboards with minimal configuration.
1612

17-
## Prerequisites
18-
Before running this application, ensure you have the following installed:
19-
- .NET 7.0 or higher
20-
- A modern web browser (Chrome, Firefox, Edge, Safari)
21-
- Basic knowledge of C# and Razor syntax
22-
- Git (for cloning the repository)
13+
## ✨ Key Features
2314

24-
## Installation & Setup
25-
To run this application, clone the repository and navigate to the project directory:
15+
- ✅ **JavaScript Pivot Table Integration**: Embed powerful Pivot Table functionality into Blazor applications
16+
- ✅ **Server-Side Data Handling**: Robust ASP.NET Core backend for secure data processing
17+
- ✅ **Interactive Data Visualization**: Real-time pivot operations and dynamic data aggregation
18+
- ✅ **JavaScript Interoperability**: Seamless C# ↔ JavaScript communication patterns
19+
- ✅ **Sample Weather Data**: Pre-configured demo data for rapid prototyping
20+
- ✅ **Responsive Bootstrap Design**: Mobile-friendly UI with modern styling
21+
- ✅ **Export-Ready Architecture**: Compatible with Excel and CSV export mechanisms
2622

27-
```
28-
git clone https://github.com/SyncfusionExamples/how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application
23+
## 🛠 Technology Stack
24+
25+
| Component | Version | Purpose |
26+
|-----------|---------|---------|
27+
| **.NET Framework** | 7.0+ | Server-side runtime environment |
28+
| **Blazor** | Server-side | Interactive web UI framework |
29+
| **C#** | 11+ | Backend business logic |
30+
| **JavaScript** | ES6+ | Client-side Pivot Table functionality |
31+
| **Razor** | .NET 7 | Server-side templating engine |
32+
| **Bootstrap** | 5+ | Responsive CSS framework |
33+
34+
## 📦 Prerequisites
35+
36+
Before running this application, ensure you have:
37+
- **.NET 7.0 SDK** or higher ([Download](https://dotnet.microsoft.com/download))
38+
- **Modern web browser**: Chrome, Firefox, Edge, or Safari (latest versions)
39+
- **Code editor**: Visual Studio 2022, VS Code, or JetBrains Rider
40+
- **Basic knowledge**: C# fundamentals, Razor syntax, JavaScript ES6+
41+
- **Git**: For cloning and version control
42+
43+
## 🚀 Quick Start
44+
45+
### Step 1: Clone Repository
46+
```bash
47+
git clone https://github.com/SyncfusionExamples/how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application.git
2948
cd how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application/BlazorApp
3049
```
3150

32-
Then compile and run the project using the .NET CLI:
51+
### Step 2: Restore & Build
52+
```bash
53+
dotnet restore
54+
dotnet build
55+
```
56+
57+
### Step 3: Run Application
58+
```bash
59+
dotnet run
60+
```
61+
62+
The application will launch at `https://localhost:7000` (or `http://localhost:5000` depending on your configuration).
63+
64+
### Step 4: View Pivot Table
65+
Navigate to the Pivot Table page in the application menu to see the integrated JavaScript component with live weather forecast data.
66+
67+
## 🗂 Project Structure
68+
69+
```
70+
BlazorApp/
71+
├── Pages/ # Razor pages and components
72+
│ ├── Index.razor # Home page
73+
│ ├── Counter.razor # Sample counter component
74+
│ ├── FetchData.razor # Pivot table integration page
75+
│ ├── Index.razor.cs # Code-behind for FetchData
76+
│ ├── _Host.cshtml # Host page
77+
│ └── Error.cshtml # Error handling page
78+
│
79+
├── Shared/ # Layout components
80+
│ ├── MainLayout.razor # Main application layout
81+
│ ├── NavMenu.razor # Navigation menu
82+
│ └── MainLayout.razor.css # Layout styles
83+
│
84+
├── Data/ # Data models and services
85+
│ ├── WeatherForecast.cs # Data model
86+
│ └── WeatherForecastService.cs # Backend data provider
87+
│
88+
├── wwwroot/ # Static files
89+
│ ├── css/ # Stylesheets
90+
│ │ └── site.css # Application styles
91+
│ └── scripts/ # JavaScript
92+
│ └── pivotview.js # Pivot Table component script
93+
│
94+
├── App.razor # Root component
95+
├── _Imports.razor # Global imports
96+
├── Program.cs # Application startup configuration
97+
├── appsettings.json # Environment configuration
98+
└── BlazorApp1.csproj # Project file with dependencies
99+
```
100+
101+
## 🧠 Architecture Overview
33102

103+
### Data Flow Architecture
104+
```
105+
C# WeatherForecastService
106+
↓
107+
Blazor Component (FetchData.razor)
108+
↓
109+
JavaScript Interop (JS.InvokeAsync)
110+
↓
111+
JavaScript Pivot Table Component
112+
↓
113+
Interactive UI & User Interactions
34114
```
115+
116+
### Key Integration Points
117+
118+
**Server-Side (C#)**:
119+
- `WeatherForecastService.cs`: Generates sample weather data
120+
- `Program.cs`: Configures services and Blazor hosting
121+
- `FetchData.razor.cs`: Handles component logic and data binding
122+
123+
**Client-Side (JavaScript)**:
124+
- `pivotview.js`: Initializes and configures Pivot Table component
125+
- Interop calls for data retrieval and UI updates
126+
127+
## 💡 Usage Example
128+
129+
### Access Weather Data with Pivot Table
130+
The `FetchData.razor` page demonstrates data retrieval and pivot table rendering:
131+
132+
```csharp
133+
@page "/fetchdata"
134+
@using BlazorApp.Data
135+
@inject WeatherForecastService ForecastService
136+
137+
<PageTitle>Fetch data</PageTitle>
138+
139+
<h1>Weather forecast</h1>
140+
<p>This component demonstrates fetching data from a service.</p>
141+
142+
@if (forecasts == null)
143+
{
144+
<p><em>Loading...</em></p>
145+
}
146+
else
147+
{
148+
<div id="pivotview"></div>
149+
@* JavaScript initialization in pivotview.js *@
150+
}
151+
152+
@code {
153+
private WeatherForecast[]? forecasts;
154+
155+
protected override async Task OnInitializedAsync()
156+
{
157+
forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
158+
}
159+
}
160+
```
161+
162+
## ⚙️ Configuration
163+
164+
### Blazor Settings (`Program.cs`)
165+
```csharp
166+
var builder = WebApplication.CreateBuilder(args);
167+
168+
// Add services
169+
builder.Services.AddRazorPages();
170+
builder.Services.AddServerSideBlazor();
171+
builder.Services.AddScoped<WeatherForecastService>();
172+
173+
var app = builder.Build();
174+
175+
app.UseStaticFiles();
176+
app.UseRouting();
177+
app.MapBlazorHub();
178+
app.MapFallbackToPage("/_Host");
179+
app.Run();
180+
```
181+
182+
### Data Configuration (`appsettings.json`)
183+
```json
184+
{
185+
"Logging": {
186+
"LogLevel": {
187+
"Default": "Information",
188+
"Microsoft.AspNetCore": "Warning"
189+
}
190+
},
191+
"AllowedHosts": "*"
192+
}
193+
```
194+
195+
## 🧪 Testing & Validation
196+
197+
### Verify Installation
198+
```bash
199+
dotnet --version # Check .NET version (should be 7.0+)
200+
cd BlazorApp
201+
dotnet run # Launch application
202+
```
203+
204+
### Expected Output
205+
```
206+
info: Microsoft.Hosting.Lifetime[14]
207+
Now listening on: https://localhost:7000
208+
```
209+
210+
### Access Application
211+
Open browser and navigate to the printed URL to verify Pivot Table loads correctly.
212+
213+
## ❓ Troubleshooting & FAQ
214+
215+
**Q: "The type or namespace name 'Blazor' cannot be found"**
216+
- Solution: Ensure .NET 7.0+ is installed and project targets correct framework
217+
- Run: `dotnet --version`
218+
219+
**Q: JavaScript Pivot Table component not displaying**
220+
- Solution: Verify `pivotview.js` is loaded in browser DevTools Network tab
221+
- Check: Browser console for JavaScript errors (F12 → Console)
222+
223+
**Q: Port 5000/7000 already in use**
224+
- Solution: Change port in `Properties/launchSettings.json`
225+
- Or run: `dotnet run --urls "https://localhost:8000"`
226+
227+
**Q: Data not loading from service**
228+
- Solution: Verify `WeatherForecastService` is registered in `Program.cs`
229+
- Check: Network calls in browser DevTools (F12 → Network)
230+
231+
## 📚 Resources & Learning
232+
233+
- [Microsoft Blazor Documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/)
234+
- [JavaScript Interop in Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/)
235+
- [ASP.NET Core Web API](https://learn.microsoft.com/en-us/aspnet/core/web-api/)
236+
- [Bootstrap 5 Framework](https://getbootstrap.com/docs/5.0/)
237+
- [MDN Web Documentation](https://developer.mozilla.org/)
238+
239+
## 🤝 Contributing
240+
241+
We welcome contributions! To contribute:
242+
243+
1. **Fork** the repository
244+
2. **Create** a feature branch: `git checkout -b feature/YourFeature`
245+
3. **Commit** changes: `git commit -m 'Add YourFeature'`
246+
4. **Push** to branch: `git push origin feature/YourFeature`
247+
5. **Open** a Pull Request with detailed description
248+
249+
### Development Setup
250+
```bash
251+
git clone https://github.com/SyncfusionExamples/how-to-integrate-a-javascript-pivot-table-into-a-blazor-web-application
252+
cd repo/BlazorApp
35253
dotnet build
36254
dotnet run
37255
```
38256

39-
## Usage
40-
Once the application is running, navigate to the appropriate page to view the integrated Pivot Table component. The application includes sample weather forecast data that demonstrates how data flows from the C# backend to the JavaScript Pivot Table component.
257+
## 📄 License
258+
259+
This project is licensed under the **MIT License** — see the [LICENSE](LICENSE) file for details.
260+
261+
## 🆘 Support & Community
41262

42-
## Technologies Used
43-
- **Blazor**: Server-side web framework for building interactive web applications
44-
- **C#**: Backend programming language
45-
- **JavaScript**: Client-side scripting for Pivot Table functionality
46-
- **Bootstrap**: CSS framework for responsive design
47-
- **Razor**: Template syntax for dynamic web content
263+
- 📧 **Issues**: [GitHub Issues](https://github.com/SyncfusionExamples/how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application/issues)
264+
- 💬 **Discussions**: GitHub Discussions for Q&A
265+
- 📖 **Documentation**: See repository Wiki for advanced topics
266+
- 🌐 **Community**: Join Blazor community forums and Stack Overflow
48267

49-
## Support
50-
For issues, questions, or suggestions, please refer to the repository documentation or open an issue on GitHub.
268+
---

0 commit comments

Comments
 (0)