Skip to content

Commit b081432

Browse files
author
bhuvaneshdhakshinmaoorthy
committed
975802: Updated content in readme file
1 parent 1ef3679 commit b081432

File tree

1 file changed

+166
-7
lines changed

1 file changed

+166
-7
lines changed

‎README.md‎

Lines changed: 166 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,173 @@
1-
# Add Blazor Spreadsheet Component in Blazor Server App
1+
# Add a JavaScript Spreadsheet Component in a Blazor Server App
22

3-
This sample explains about how to add Blazor Spreadsheet component in Blazor server application.
3+
This repository demonstrates how to integrate a JavaScript Spreadsheet component into a Blazor Server application targeting .NET 6. The sample shows how to reference the Spreadsheet’s JavaScript and CSS assets, initialize it using JavaScript interop, and render it on a Razor page. While the example is aligned with the Syncfusion EJ2 JavaScript Spreadsheet loaded via CDN for convenience, the overall approach works with other JavaScript spreadsheet libraries as well. The goal is to help you understand where to place assets, how to structure initialization, and how to keep the component lifecycle clean in a Blazor Server context.
4+
5+
Note: If you use a commercial component, make sure to review and comply with its licensing terms.
6+
7+
## What You’ll Build
8+
9+
A .NET 6 Blazor Server application that:
10+
11+
- Loads a JavaScript spreadsheet component from a CDN or local assets.
12+
- Initializes the spreadsheet via Blazor’s JavaScript interop.
13+
- Displays a small in-memory dataset with basic formatting (e.g., bold headers, currency formatting).
14+
- Configures common features like toolbar items, editing, sorting, and filtering.
15+
16+
## Tech Stack
17+
18+
- **.NET 6 (Blazor Server)**: Core framework for the application.
19+
- **JavaScript Spreadsheet Library**: Example uses Syncfusion EJ2; adaptable to other libraries.
20+
- **JavaScript Interop (`IJSRuntime`)**: Enables communication between Blazor and JavaScript.
421

522
## Prerequisites
623

7-
* Visual Studio 2022
24+
- **.NET SDK 6.0**: Installed on your system.
25+
- **IDE**: Visual Studio 2022 (v17.0 or newer) or Visual Studio Code with C# extensions.
26+
- **Browser**: A modern browser (Microsoft Edge, Google Chrome, or Firefox).
27+
- **Internet Access**: Required for CDN assets; optional if hosting assets locally.
28+
29+
## Repository Structure
30+
31+
- `Pages/Index.razor`: Hosts the spreadsheet container and triggers initialization via JavaScript interop.
32+
- `Pages/_Layout.cshtml`: Includes stylesheet and script references for the spreadsheet library and interop logic.
33+
- `Program.cs`: Configures the Blazor Server hosting setup for .NET 6.
34+
35+
## Getting Started
36+
37+
1. Clone the repository using your preferred Git client and navigate to the project folder.
38+
2. Restore dependencies and build the solution:
39+
40+
```bash
41+
dotnet restore
42+
dotnet build
43+
```
44+
45+
3. Run the project:
46+
47+
```bash
48+
dotnet run
49+
```
50+
51+
4. Open your browser to the URL displayed in the console or IDE output (e.g., `https://localhost:5001`). You should see a spreadsheet populated with sample data. If issues occur, refer to the **Troubleshooting** section.
52+
53+
## Adding Spreadsheet Assets and Interop JavaScript
54+
55+
In `Pages/_Layout.cshtml`, include the spreadsheet library’s stylesheet in the `<head>` tag to ensure styles are available during rendering. Place the spreadsheet script bundle near the end of the `<body>`, after the Blazor Server script (`blazor.server.js`), to ensure proper initialization order. For CDN usage, reference the correct library version and dependencies. If external network access is restricted, download assets and serve them from the `wwwroot` folder, updating paths accordingly. Maintain this inclusion order:
56+
57+
1. Spreadsheet stylesheet (in `<head>`).
58+
2. Blazor Server script.
59+
3. Spreadsheet library bundle.
60+
4. Custom interop script.
61+
62+
Example in `Pages/_Layout.cshtml`:
63+
64+
```html
65+
<!DOCTYPE html>
66+
<html lang="en">
67+
<head>
68+
<meta charset="utf-8" />
69+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
70+
<title>Blazor Spreadsheet Demo</title>
71+
<link href="https://cdn.syncfusion.com/ej2/bootstrap5.css" rel="stylesheet" />
72+
</head>
73+
<body>
74+
<!-- Page content -->
75+
<script src="_framework/blazor.server.js"></script>
76+
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
77+
<script src="js/spreadsheet-init.js"></script>
78+
</body>
79+
</html>
80+
```
81+
82+
Create a file named `spreadsheet-init.js` in `wwwroot/js` to handle initialization and disposal:
83+
84+
```javascript
85+
function RenderSpreadsheet(spreadsheetElem, data) {
86+
new ej.spreadsheet.Spreadsheet({
87+
sheets: [{
88+
ranges: [{
89+
dataSource: data,
90+
showFieldAsHeader: false
91+
}]
92+
}],
93+
openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
94+
saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
95+
}, spreadsheetElem);
96+
}
97+
98+
function DisposeSpreadsheet(spreadsheetElem) {
99+
const spreadsheet = ej.base.getComponent(spreadsheetElem, 'spreadsheet');
100+
if (spreadsheet) {
101+
spreadsheet.destroy();
102+
}
103+
}
104+
```
105+
106+
## Rendering the Spreadsheet in a Blazor Page
107+
108+
In `Pages/Index.razor`, create a container `<div>` with a unique ID to host the spreadsheet. Use the `OnAfterRenderAsync` lifecycle method to invoke the JavaScript initializer via interop, ensuring it runs only on the first render. Implement disposal logic to clean up the spreadsheet instance when the component is destroyed or during navigation.
109+
110+
Example in `Pages/Index.razor`:
111+
112+
```razor
113+
@page "/"
114+
@inject IJSRuntime JSRuntime
115+
116+
<PageTitle>Spreadsheet Demo</PageTitle>
117+
118+
<div id="spreadsheet" @ref="spreadsheetElem"></div>
119+
120+
@code {
121+
private ElementReference spreadsheetElem;
122+
private bool isRendered;
123+
124+
protected override async Task OnAfterRenderAsync(bool firstRender)
125+
{
126+
if (firstRender && !isRendered)
127+
{
128+
var data = new[]
129+
{
130+
new { OrderID = 1, Item = "Laptop", Price = 999.99 },
131+
new { OrderID = 2, Item = "Mouse", Price = 29.99 }
132+
};
133+
await JSRuntime.InvokeVoidAsync("RenderSpreadsheet", spreadsheetElem, data);
134+
isRendered = true;
135+
}
136+
}
137+
138+
public async ValueTask DisposeAsync()
139+
{
140+
await JSRuntime.InvokeVoidAsync("DisposeSpreadsheet", spreadsheetElem);
141+
}
142+
}
143+
```
144+
145+
## How It Works (high level)
146+
147+
- **Visual Studio 2022**: Open the solution, set the Blazor Server project as the startup project, and start debugging.
148+
- **.NET CLI**:
149+
150+
```bash
151+
dotnet restore
152+
dotnet build
153+
dotnet run
154+
```
8155

156+
Open the browser at the displayed URL (e.g., `https://localhost:5001`).
157+
9158
## How to run the project
159+
160+
- Visual Studio 2022:
161+
- Open the solution, set the Blazor Server project as the startup project, and start debugging. The browser should open automatically at the correct URL.
162+
- .NET CLI:
163+
- From the project folder, run restore, then build, then run. Open the browser at the local HTTPS or HTTP URL printed in the console output.
164+
165+
## Contributing
166+
167+
Contributions are welcome. Please open an issue describing your scenario or bug, include steps to reproduce, and, if possible, a minimal repro. When submitting a pull request, explain the change and note any testing instructions.
168+
169+
## License
10170

11-
* Checkout this project to a location in your disk.
12-
* Open the solution file using the Visual Studio 2022.
13-
* Restore the NuGet packages by rebuilding the solution.
14-
* Run the project.
171+
This project is licensed under terms outlined by Syncfusion.
172+
For detailed licensing information, please refer to the official documentation:
173+
[Syncfusion Document Processing Licensing Overview](https://help.syncfusion.com/document-processing/licensing/overview)

0 commit comments

Comments
 (0)