WebAssembly | Blazor FAQ | Syncfusion

Expand All Collapse All

How to create a Blazor app with responsive design for both Desktop and Mobile browsers?

Blazor application renders UI as a HTML content in client-side (browser). So, based on the width of the viewport in a device you can determine if it is a Desktop or a Mobile device and thus design responsive web pages accordingly.

The meta tag named “viewport” is used to design the webpage responsiveness and this is included in all Blazor applications, _Host.cshtml file in Blazor server-side application and index.html file in Blazor Web Assembly application. CSS styling makes designs responsive in Blazor apps.

For more details, refer to this link.

How can I check if my browser is supported to run the Blazor WebAssembly application?

The Blazor WebAssembly support for browsers and their versions can be checked from the website mentioned in this link.

Will the browser download the Blazor WebAssembly whenever the page is loaded?

The browser downloads the Blazor application, its dependencies, and the .NET runtime in the initial load itself and the application will run directly on the Browser UI thread.

Note: The dlls will load only at initial rendering and then it will be cached in the local browser.

How to implement State Management in Blazor?

State in Blazor:

In Blazor, the user’s state is held in the server’s memory in a circuit. State Management refers to the persisting state of an application even after the connection is lost or disconnected. The state held for a user’s circuit may be any of the following,

UI related data- component instances, rendered output
Property/field values of the component instances
Dependency injection service instance data

Need for State Management:

In Blazor, the application is connected through a circuit to the server, which holds the user’s state and this can be lost or disconnected due to multiple reasons. Some of the reasons are as follows,

Large number of users accessing the server and increasing the memory used causing the pressure to disconnect the circuit.
Users reloading the application/webpage leading to circuit disconnection/loss.

Due to the above, user’s state may be lost and can also cause loss of crucial data gathered in the application such as,

Multistep webform
Shopping cart

When data is lost after completing processes with multiple steps or creating a shopping list, it results in unnecessary time consumption. So, in Blazor, the data is stored in the local cache and state persists even when the circuit gets disconnected.

Persisting the State/State Management:

The three locations for persisting state in a Blazor application are as follows,

Server-side (Database)
Client-side (Browser)
URL

Server-side (Database):

To store data/state permanently or any data that spans multiple users or devices, the server-side database should be used.

Client-side (Browser):

Most suited when the user is actively creating transient data, that can be stored in the browsers, localStorage and sessionStorage.

URL:

This is best suited when the data/state needs to persist when navigating from one page of the application to another.

For more information on state management, refer here.

What is a Blazor WebAssembly?

Blazor has two hosting models, client-side and server-side. Blazor relies on WebAssembly (WASM) for running the Blazor application on the client-side (from browser end itself). The .NET runtime is downloaded with the app along with the app assembly and any required dependencies, then the application is executed directly from the browser UI thread.

How do you debug in a client-side Blazor application?

To debug a client-side Blazor app in a browser:

Close the all instances in Chrome.
Run the Blazor app in Chrome (version 70 or later).
Open Win + R and run following command.

"%programfiles(x86)%\Google\Chrome\Application\chrome.exe"
 --remote-debugging-port=9222 http://localhost:52902/

Now the Blazor app is running.
Then hit Shift+Alt+D on Windows or Linux and Shift+Cmd+D on macOS.

Reference link:

https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-3.1

https://www.hanselman.com/blog/CompilingCToWASMWithMonoAndBlazorThenDebuggingNETSourceWithRemoteDebuggingInChromeDevTools.aspx

How does client-side Blazor work?

Client-side Blazor makes use of WebAssembly, which is used to run high-level languages on browsers.
Necessary .NET WebAssembly-related code and its dependencies are downloaded to the browser, and the app is executed directly on the browser UI thread.
All UI updates and event handling occur within the same process.

Does ASP.NET Core Blazor work in the Internet Explorer (IE) browser?

WebAssembly is not supported in the IE browser, so client-side Blazor is not supported in IE. But server-side Blazor can be used instead in IE 11 with polyfills.

For more information on browser compatibility, check this link.

Will an old browser that doesn’t support WebAssembly not support Blazor?

In an old browser that doesn’t support WebAssembly, we can use server-side Blazor. The same interactive experience in a client-side application can be achieved by server-side Blazor. This also removes heavy load from client-side, thus maintaining compatibility with the oldest browsers.

How do you decompile WASM files?

The WASM files can be decompiled using the WebAssembly-to-C decompiler.

Is it safe to include passwords in client-side WASM code?

No, the WASM codes can be decompiled. Use this WebAssembly to C decompiler.

Refer to this StackOverflow link for more information.

How do you create a cookie in the client-side of Blazor?

You have to use JS Interop to create a cookie in Blazor.

[Razor Page]

@page "/"
@inject IJSRuntime JSRuntime

@code {

    private async void CreateCookie(string name, string value, int days)
       {
            var test = await JSRuntime.InvokeAsync<string>("methods.CreateCookie", name, value, days);
       }
}

[Script file]

window.methods = {
    CreateCookie: function (name, value, days) {
     var expires;
     if (days) {
        var date = new Date();
         date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
          expires = "; expires=" + date.toGMTString();
     }
      else {
         expires = "";
     }
      document.cookie = name + "=" + value + expires + "; path=/";
   }    
}

Refer to to How do I create a cookie client-side using Blazor for more information.

How do I debug a Blazor application client-side?

Run the Blazor application in Debug mode in Chrome 70 and above.
With the focus of the Blazor application in the Chrome browser, run the following

Shift+Alt+D on Windows/Linux
Shift+Cmd+D on macOS

Refer to Debug Blazor applications for more information.

Do the Blazor components work on mobile devices?

Yes, the WebAssembly supports the latest mobile browsers. You can refer to these links for more information.

WebAssembly-supported browsers

All mobile browsers supported by WebAssembly

How do you debug a client-side Blazor app in VS Code?

For now, there is no option to debug a client-side Blazor application in VS Code, although the debugging of server-side applications is possible.

Refer to the thread debug Blazor in VS Code for more information.

Why is _framework/blazor.webassembly.js not found in the deployed Blazor applications?

You have to update the virtual app path or app base path in index.html to resolve this issue.

That is, the hosted application expects the assets from root folder of the web server. So, you have to update the subfolder name in index.html to serve the files from the path.

For example, if I am hosting the application in http://example.com/blazor/, the index.html looks like the following.

<base href="/blazor/" />

For more information, refer to the link for updating app-base-path.

Why is IntelliSense not working in the client-side Blazor application?

You have to install the VS 2019 Preview to resolve this issue.

Refer to this thread, IntelliSense does not work in client-side Blazor projects, for more information.

If the issue persists, make sure to install the .NET Core Preview 5. https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-0-preview-4/

How can I check if a browser supports WebAssembly?

You can check whether a type of WebAssembly is an object in global scope, but the global scope is not a feasible one across different JavaScript environments, such as a main browser thread, worker, Node.js.

The more feasible solution is as follows.

 const supported = (() => {
      try {
 if (typeof WebAssembly === "object"
             && typeof WebAssembly.instantiate === "function") {
             const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
             if (module instanceof WebAssembly.Module)
                 return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
         }
     } catch (e) {
     }
     return false;
 })();
  
 console.log(supported ? "WebAssembly is supported" : "WebAssembly is not supported");

Refer to this StackOverflow link for more information.

Share with

Couldn't find the FAQs you're looking for?

Please submit your question and answer.