CDN fallback in Blazor application
19 Nov 20254 minutes to read
This section explains how to reference fallback scripts and stylesheets from Static Web Assets when the CDN is unavailable in a Blazor application.
Blazor Web App
For .NET 8, .NET 9 and .NET 10 Blazor Web Apps using any render mode (Server, WebAssembly, or Auto), reference script and stylesheet fallback from Static Web Assets as shown below.
Script fallback
Check the Syncfusion® Blazor object to determine whether scripts are loaded. If they are not loaded, create a script tag and reference the scripts from Static Web Assets inside the <body> of the ~/Components/App.razor file in the Server App, as shown below.
<body> ... <script src="https://cdn.syncfusion.com/blazor/31.2.12/syncfusion-blazor.min.js" type="text/javascript"></script> <script> if (!window.sfBlazor) { // the Syncfusion Blazor object is not present var fallbackScript = document.createElement("script"); fallbackScript.setAttribute("src", "_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"); // path to static assets from the individual NuGet packages document.getElementsByTagName("body")[0].appendChild(fallbackScript); } </script> </body>Stylesheet fallback
Reference the theme stylesheet inside the <head> of the ~/Components/App.razor file in the Server App, as shown below.
<head> ... <link rel="stylesheet" href="https://cdn.syncfusion.com/blazor/31.2.12/styles/bootstrap5.css" asp-fallback-href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" asp-fallback-test-class="e-control" asp-fallback-test-property="font-size" asp-fallback-test-value="12px" /> </head>Blazor WebAssembly Standalone App
For Blazor WebAssembly Standalone App, reference script and stylesheet fallback from Static Web Assets as shown below.
Script fallback
Check the Syncfusion® Blazor object to determine whether scripts are loaded. If they are not loaded, create a script tag and reference the scripts from Static Web Assets inside the <head> of the wwwroot/index.html file in the client app, as shown below.
<head> ... <script src="https://cdn.syncfusion.com/blazor/31.2.12/syncfusion-blazor.min.js" type="text/javascript"></script> <script> if (!window.sfBlazor) { // the Syncfusion Blazor object is not present var fallbackScript = document.createElement("script"); fallbackScript.setAttribute("src", "_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"); // path to static assets from the Syncfusion package document.getElementsByTagName("head")[0].appendChild(fallbackScript); } </script> </head>Stylesheet fallback
Reference the theme stylesheet inside the <head> of the wwwroot/index.html file in the client app, as shown below.
<head> ... <link href="https://cdn.syncfusion.com/blazor/31.2.12/styles/bootstrap5.css" rel="stylesheet" /> </head> <body> ... <script> function cdnStyleTest() { var testElem = document.createElement("div"); testElem.className = "e-control"; // Syncfusion themes provides the e-control class document.body.appendChild(testElem); var testFontSize = window.getComputedStyle(testElem).getPropertyValue("font-size"); if (testFontSize !== "12px") { // CDN failed var fallbackStyle = document.createElement("link"); fallbackStyle.setAttribute("rel", "stylesheet"); fallbackStyle.setAttribute("type", "text/css"); fallbackStyle.setAttribute("href", "_content/Syncfusion.Blazor.Themes/bootstrap5.css"); // URL to the static asset from the individual NuGet packages document.getElementsByTagName("head")[0].appendChild(fallbackStyle); } document.body.removeChild(testElem); } cdnStyleTest(); </script> </body>