Skip to content

Commit 31cffce

Browse files
ManiRam94ManiRam94
authored
Merge pull request #1 from Sridhar-Karunakaran/master
Updating Read me file content
2 parents d3dc5ae + df3451f commit 31cffce

1 file changed

Lines changed: 260 additions & 7 deletions

File tree

‎README.md‎

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

3-
A quick start project that helps you on how to integrate a JavaScript Pivot Table into a Blazor web application
3+
[![License](https://img.shields.io/badge/license-SEE%20LICENSE-blue.svg)](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf)
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)](#)
47

5-
## How to run this application?
6-
To run this application, you need to first clone the `how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application` repository and then navigate to its appropriate path where it has been located in your system.
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.
79

8-
To do so, open the command prompt and run the below commands one after the other.
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.
12+
13+
## ✨ Key Features
14+
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
22+
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
48+
cd how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application/BlazorApp
49+
```
50+
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
968

1069
```
11-
git clone https://github.com/SyncfusionExamples/how-to-integrate-a-javaScript-pivot-table-into-a-blazor-web-application
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
102+
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
114+
```
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+
}
12160
```
13-
Compile and run the project.
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
253+
dotnet build
254+
dotnet run
255+
```
256+
257+
## 📄 License
258+
259+
This project is licensed under the **Syncfusion Community License**. See [Syncfusion License](https://www.syncfusion.com/content/downloads/syncfusion_license.pdf) for details.
260+
261+
## 🆘 Support & Community
262+
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

0 commit comments

Comments
 (0)