CDN fallback in Blazor application

20 Jan 20234 minutes to read

This section provides information about how to refer fallback scripts and style sheet from Static Web Assets when CDN is not available in Blazor application.

Blazor Server App

CDN links can be down by connection issues or some other problems. This will cause the site looks broken. Follow the below steps to resolve these issues in the Blazor application.

If you are using CDN for style sheet references then you have to add style sheet fallback from Static Web Assets by using the link tag helper. Syncfusion theme provides the e-control class. You can check the style from provided class by using link tag helper property.

  • ~/Pages/_Host.cshtml file for .NET 3.X, .NET 5 and .NET 7.
  • ~/Pages/_Layout.cshtml for .NET 6.
<head>
    ...
    <link rel="stylesheet" href="https://cdn.syncfusion.com/blazor/20.4.48/styles/bootstrap5.css"
    asp-fallback-href="_content/Syncfusion.Blazor/styles/bootstrap5.css"
    asp-fallback-test-class="e-control"
    asp-fallback-test-property="font-size"
    asp-fallback-test-value="12px" />
</head>
<head>
    ...
    <link rel="stylesheet" href="https://cdn.syncfusion.com/blazor/20.4.48/styles/bootstrap5.css"
    asp-fallback-href="_content/Syncfusion.Blazor/styles/bootstrap5.css"
    asp-fallback-test-class="e-control"
    asp-fallback-test-property="font-size"
    asp-fallback-test-value="12px" />
</head>

NOTE

Alternately, fallback links can be provided using script fallback and style sheet fallback in blazor server app.

Blazor WebAssembly App

For Blazor WebAssembly app, refer the script and style sheet fallback from Static Web Assets inside the Script tag like below.

Script Fallback

You can check the Syncfusion Blazor object for script fallback whether scripts are loaded or not. If it’s not loaded, create a script tag and refer scripts externally inside the <head> of wwwroot/index.html file in client web app as in the below code.

<head>
    ...
    <script src="https://cdn.syncfusion.com/blazor/20.4.48/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>

Style Sheet Fallback

You can refer the theme style sheet inside the <head> of wwwroot/index.html file in client web app like below.

<head>
    ...
    <link href="https://cdn.syncfusion.com/blazor/20.4.48/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/styles/bootstrap5.css"); // URL to the static asset from the Syncfusion package
            document.getElementsByTagName("head")[0].appendChild(fallbackStyle);
            }
            document.body.removeChild(testElem);
        }
        cdnStyleTest();
    </script>
</body>