Reference scripts in Blazor Application

18 Dec 202312 minutes to read

This section provides information about the script isolation process and how to reference scripts from CDN, Static Web Assets and Custom resource generator (CRG) for Syncfusion Blazor Components.

NOTE

The javascript interop files needs to be added to support the features that can’t be implemented in native blazor.

CDN Reference

You can refer the Syncfusion Blazor scripts through the CDN resources.

For Blazor Web App, reference scripts in ~/Components/App.razor file.
For Blazor WASM App, reference scripts in ~/wwwroot/index.html file.
For Blazor Server App, reference scripts in ~/Pages/_Layout.cshtml file for .NET 6 project and in ~/Pages/_Host.cshtml file for .NET 7 project.

Syncfusion Blazor components are available in CDN for each version. Make sure that the version in the URLs matches the version of the Syncfusion Blazor Package you are using .

Component	CDN Script Reference
All components except PDF Viewer, PDF Viewer(NextGen) & Document Editor	CSHTML `https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor.min.js`
PDF Viewer	CSHTML `https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor-pdfviewer.min.js`
Document Editor	CSHTML `https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor-documenteditor.min.js`
PDF Viewer(NextGen)	CSHTML `https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor-sfpdfviewer.min.js`

<head>
    ....
    <script src="https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor.min.js" type="text/javascript"></script>
</head>

If you are using PDF Viewer,PDF Viewer(NextGen) or DocumentEditor, ensure to add additional script references as follows,

<head>
    ....
    <script src="https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor-pdfviewer.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor-documenteditor.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/blazor/27.2.48/syncfusion-blazor-sfpdfviewer.min.js" type="text/javascript"></script>
</head>

In addition to above, 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, PDF Viewer(NextGen) & Document Editor	https://cdn.syncfusion.com/blazor/syncfusion-blazor.min.js
PDF Viewer	https://cdn.syncfusion.com/blazor/syncfusion-blazor-pdfviewer.min.js
Document Editor	https://cdn.syncfusion.com/blazor/syncfusion-blazor-documenteditor.min.js
PDF Viewer(NextGen)	https://cdn.syncfusion.com/blazor/syncfusion-blazor-sfpdfviewer.min.js

NOTE

To add custom PDF Viewer(NextGen) script file in your application, refer How to refer SfPdfViewer script file in application.

Static web assets

You can refer the Syncfusion Blazor scripts through the NuGet package’s static web assets.

Enable static web assets usage

To use static web assets, ensure UseStaticFiles method in the ~/Program.cs file of your app.

NOTE

For Blazor Web App with interaction mode as Auto & Blazor WASM App, call UseStaticFiles method in Server project.

Refer script from static web assets

The combined scripts available in Syncfusion.Blazor.Core package. To refer script from static web assets, use the code below.

  <head>
      ...
      <script  src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>
  </head>

If you’re using the PDF viewer, PDF Viewer(NextGen) or Document Editor component, use the code below to refer to script from static web assets.

  <head>
      ...
     <script  src="_content/Syncfusion.Blazor.PdfViewer/scripts/syncfusion-blazor-pdfviewer.min.js"  type="text/javascript"></script>
     <script  src="_content/Syncfusion.Blazor.WordProcessor/scripts/syncfusion-blazor-documenteditor.min.js"  type="text/javascript"></script>
     <script  src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfpdfviewer.min.js"  type="text/javascript"></script>
  </head>

NOTE

The PDF Viewer and Document Editor component scripts are available in static web assets from 19.3.* version.

Individual control script reference

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 using CRG 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

CSHTML

<head>
    ...
    <!--<script src="_content/<Package name>/scripts/<Component script name>" type="text/javascript"></script>-->
    <script src="_content/Syncfusion.Blazor.Inputs/scripts/sf-textbox.min.js" type="text/javascript"></script>
</head>

Refer scripts from CDN

CSHTML

<head>
    ...
    <!--<script src="https://cdn.syncfusion.com/blazor/<Version>/<Component script name>" type="text/javascript"></script>-->
    <script src="https://cdn.syncfusion.com/blazor/27.2.48/sf-textbox.min.js" type="text/javascript"></script>
</head>

The following table lists components and its script reference.

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

The Syncfusion Blazor provides an option to generate a component’s interop scripts using the Custom Resource Generator (CRG) tool for the Blazor components. Refer here to generate the component-wise scripts externally using CRG.