Blazor Unmarshalled JavaScript interop

Question

To improve performance in Blazor JS Interop calls, synchronous and unmarshalled apis are available

I struggle to find more information regarding the unmarshalled.

For example:

//javascript
JSFunctions.f1 = function (fields) {
    var f1 = Blazor.platform.readStringField(fields, 0);
    var f2 = Blazor.platform.readStringField(fields, 4);
    var f3 = Blazor.platform.readStringField(fields, 8);
};


//F#
[<Inject>]
member val Js: IJSRuntime
let js = this.Js :?> IJSUnmarshalledRuntime
js.InvokeUnmarshalled<ElementReference, string, unit>("JSFunctions.f1", er, txt)

Where are the functions Blazor.platform.* defined?
Which one should be used to retrieve an argument of type ElementReference?
What is the second int parameter of the function readStringField and how should it be used?

Regarding to question 2, I think you better use marshaled version since by the way you should do same in js to work with it. I find out that ElementReference is a struct which only have one useful field: Id (which can get as string in field offset 0 in unmarshalled way) and also context. Then you should use _bl_+Id to reterive element Id of html element in js and use document.getElementById after that which makes It more preferable to use it in standard serialized way from first without these ! I do not think its serialization take much performance cost in response to scenario I displayed! — Mehdi Mowlavi, Mar 05 '22 at 22:07

score 2 · Accepted Answer · answered Mar 04 '22 at 21:35

Blazor object is a JavaScript object in global namespace (window) which added by blazor.webassembly.js in Blazor WebAssembly or blazor.server.js in Blazor Server. It added at the default template of Blazor Apps at the end of index.html (or _Host.cshtml) by following script:

<script autostart="false" src="_framework/blazor.webassembly.js"></script>

The Blazor object provide Blazor.platform and some useful api for example start() for manual start of Blazor. This script also add another object named BINDING to global namespace (window.BINDING or simply BINDING). They provide methods for working with .NET objects directly from JavaScript in unmarshalled way. for example you can read different type of data using

Blazor.platform.read....

You can read objects like ElementReference type object using:

Blazor.platform.readObjectField(fields,index)

Here fields is the input (struct or class) passed to JS function when you invoke it and index is its field offset in struct/class definition. You can read more about field offset in Microsoft documentations here. Here is some example:

[StructLayout(LayoutKind.Explicit)]
    public struct InteropStruct
    {
        [FieldOffset(0)]
        public string Name;

        [FieldOffset(8)]
        public int Year;
    }

You can also return a .Net object directly from JavaScript functions using BINDING as below:

return BINDING.js_string_to_mono_string(`Hello, ${name} (${year})!`);

You can discover more about these two objects in your browser developer tool for example by writing Blazor.platform. or BINDING.:

Blazor Unmarshalled JavaScript interop

1 Answers1