Reference scripts in Blazor applications
12 Dec 202513 minutes to read
This page explains script isolation and how to reference Syncfusion® Blazor scripts from the CDN, static web assets, and the Custom Resource Generator (CRG).
NOTE
JavaScript interop files are required for features that cannot be implemented natively in Blazor.
CDN reference
You can refer the Syncfusion® Blazor scripts using the CDN resources.
- For.NET 8, .NET 9 and .NET 10 Blazor Web App (any render mode: Server, WebAssembly, or Auto), add scripts in
~/Components/App.razor. - For aBlazor WebAssembly (standalone) App, add scripts in
~/wwwroot/index.html.
Syncfusion® Blazor components are available on the CDN per version. Ensure the version in the URLs matches the NuGet package version used in the application.
| Component | CDN Script Reference |
All components except PDF Viewer (Classic), PDF Viewer & Document Editor | |
PDF Viewer (Classic) | |
Document Editor | |
PDF Viewer | |
Smart PDF Viewer | |
<head> ....<scriptsrc="https://cdn.syncfusion.com/blazor/32.1.19/syncfusion-blazor.min.js"type="text/javascript"></script></head>If you are usingPDF Viewer (Classic),PDF Viewer,Smart PDF Viewer orDocumentEditor, ensure to add additional script references as follows,
<head> ....<scriptsrc="https://cdn.syncfusion.com/blazor/32.1.19/syncfusion-blazor-pdfviewer.min.js"type="text/javascript"></script><scriptsrc="https://cdn.syncfusion.com/blazor/32.1.19/syncfusion-blazor-documenteditor.min.js"type="text/javascript"></script><scriptsrc="https://cdn.syncfusion.com/blazor/32.1.19/syncfusion-blazor-sfpdfviewer.min.js"type="text/javascript"></script><scriptsrc="https://cdn.syncfusion.com/blazor/32.1.19/syncfusion-blazor-sfsmartpdfviewer.min.js"type="text/javascript"></script></head>Additionally, Syncfusion® Blazor components provides latest scripts in CDN without versioning. You can use this in development environment if you want to always use the latest version of scripts. It is not recommended to use this in production environment.
| Component | CDN Script Reference |
|---|---|
| All components except PDF Viewer (Classic), PDF Viewer & Document Editor | https://cdn.syncfusion.com/blazor/syncfusion-blazor.min.js |
| PDF Viewer (Classic) | https://cdn.syncfusion.com/blazor/syncfusion-blazor-pdfviewer.min.js |
| Document Editor | https://cdn.syncfusion.com/blazor/syncfusion-blazor-documenteditor.min.js |
| PDF Viewer | https://cdn.syncfusion.com/blazor/syncfusion-blazor-sfpdfviewer.min.js |
| Smart PDF Viewer | https://cdn.syncfusion.com/blazor/syncfusion-blazor-sfsmartpdfviewer.min.js |
NOTE
To add custom PDF Viewer script file in your application, referHow to refer SfPdfViewer script file in application.
NOTE
To add custom Smart PDF Viewer script file in your application, referHow to refer SfSmartPdfViewer script file in application.
Static web assets
You can refer the Syncfusion® Blazor scripts from NuGet packages using static web assets.
Enable static web assets usage
To use static web assets, callUseStaticFiles in the app’s~/Program.cs file.
NOTE
For aBlazor Web App (interaction mode: Auto) andBlazor WebAssembly App, call
UseStaticFilesin theServer project.
Reference scripts from static web assets
Combined scripts are available in theSyncfusion.Blazor.Core package. To refer the script from static web assets, use the code below.
<head> ...<scriptsrc="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"type="text/javascript"></script></head>If using thePDF Viewer (Classic),PDF Viewer,Smart PDF Viewer, orDocument Editor components, use the code below to reference scripts from static web assets.
<head> ...<scriptsrc="_content/Syncfusion.Blazor.PdfViewer/scripts/syncfusion-blazor-pdfviewer.min.js"type="text/javascript"></script><scriptsrc="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js"type="text/javascript"></script><scriptsrc="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js"type="text/javascript"></script><scriptsrc="_content/Syncfusion.Blazor.SfSmartPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js"type="text/javascript"></script></head>NOTE
The PDF Viewer and Document Editor component scripts are available in static web assets starting from version 19.3.*.
Individual component script references
Syncfusion® Blazor components provides component-wise scripts which can be referenced externally in application. If you are using minimal components, then you can import the selected components scripts via CDN or Static web assets directly without usingCRG instead of referencing single script with all components.
You can add a component script reference in one of the following ways based on usage,
| Usage | Script reference |
Refer from Static web assets | |
Refer scripts from CDN | |
The following table lists components and their script file names.
| Component | Script name |
|---|---|
| TextBox | sf-textbox.min.js |
| NumericTextBox | sf-numerictextbox.min.js |
| MaskedTextBox | sf-maskedtextbox.min.js |
| Uploader | sf-uploader.min.js |
| Calendar | sf-calendar.min.js |
| DatePicker | sf-datepicker.min.js |
| DateTimePicker | sf-datepicker.min.js |
| DateRangePicker | sf-daterangepicker.min.js |
| DiagramComponent | sf-diagramcomponent.min.js |
| TimePicker | sf-timepicker.min.js |
| AutoComplete | sf-dropdownlist.min.js |
| ComboBox | sf-dropdownlist.min.js |
| DropDownList | sf-dropdownlist.min.js |
| MultiSelect | sf-multiselect.min.js |
| DropDownButton | sf-drop-down-button.min.js |
| SplitButton | sf-drop-down-button.min.js |
| ProgressButton | sf-spinner.min.js |
| ListBox | sf-listbox.min.js |
| ColorPicker | sf-colorpicker.min.js |
| Signature | sf-signature.min.js |
| ContextMenu | sf-contextmenu.min.js |
| Menu | sf-menu.min.js |
| Breadcrumb | sf-breadcrumb.min.js |
| QueryBuilder | sf-querybuilder.min.js |
| Grid | sf-grid.min.js |
| Accordion | sf-accordion.min.js |
| Tab | sf-tab.min.js |
| Toolbar | sf-toolbar.min.js |
| Schedule | sf-schedule.min.js |
| BarcodeGenerator | sf-barcode.min.js |
| Maps | sf-maps.min.js |
| CircularGauge | sf-circulargauge.min.js |
| LinearGauge | sf-lineargauge.min.js |
| Chart | sf-chart.min.js |
| CheckBox | sf-checkbox.min.js |
| AccumulationChart | sf-accumulation-chart.min.js |
| StockChart | sf-stock-chart.min.js |
| BulletChart | sf-bullet-chart.min.js |
| Sparkline | sf-sparkline.min.js |
| TreeMap | sf-treemap.min.js |
| ProgressBar | sf-progressbar.min.js |
| SmithChart | sf-smith-chart.min.js |
| RangeNavigator | sf-range-navigator.min.js |
| HeatMap | sf-heatmap.min.js |
| FileManager | sf-filemanager.min.js |
| Slider | sf-slider.min.js |
| Tooltip | sf-tooltip.min.js |
| ListView | sf-listview.min.js |
| DashboardLayout | sf-dashboard-layout.min.js |
| Sidebar | sf-sidebar.min.js |
| TreeView | sf-treeview.min.js |
| PivotView | sf-pivotview.min.js |
| TreeGrid | sf-treegrid.min.js |
| Spinner | sf-spinner.min.js |
| Splitter | sf-splitter.min.js |
| Switch | sf-switch.min.js |
| Toast | sf-toast.min.js |
| Dialog | sf-dialog.min.js |
| RichTextEditor | sf-richtexteditor.min.js |
| InPlaceEditor | sf-inplaceeditor.min.js |
| Kanban | sf-kanban.min.js |
| Gantt | sf-gantt.min.js |
| PdfViewer | sf-pdfviewer.min.js |
| ImageEditor | sf-image-editor.min.js |
| DocumentEditor | sf-documenteditor.min.js |
| Pager | sf-pager.min.js |
Custom Resource Generator
Syncfusion® Blazor provides an option to generate component interop scripts using theCustom Resource Generator (CRG) tool. Learn how togenerate component-wise scripts using CRG.
See also
[8]ページ先頭