question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

JS to C# != ElementReference; C# to JS == ElementReference

See original GitHub issue

Describe the bug

when calling a C# call from JS the returned object fails to resolve ElementReference to a referenced element. C# calling JS with the same object resolves the element reference correctly.

they are both resolving to JSObjects some how, just wondering if its possible for the returned object to be resolved as an ElementReference?

this is currently a blocker for me because i can’t simply return the same object requested, id have to have a js callback, that i am unsure of how to implement correctly.

EDIT: Just figured out a callback solution here: https://stackoverflow.com/questions/56627649/how-can-i-get-javascript-callback-in-net-blazor

but this bug would be more simple.

To Reproduce

Failed TypeScript ElementReference Resolution code:

let newComponent: MyComponent | null = await this._dotNetInterop.invokeMethodAsync("BuildNewComponent",incomingProperties);

Output of failed: typeof: object __internalId: “50c7d062-116e-4f5b-afbd-dba94f3521f2”

Working TypeScript ElementReference Resolution code

public RecieveComponent(component: object) 
{
    console.log("recieved new component");
    console.log(component);
}

Output of working: <text fill=“Black” font-family=“Marcellus SC” x=“100” y=“100” text-anchor=“middle” text-length=“0” transform=“translate(0,0)” _bl_50c7d062-116e-4f5b-afbd-dba94f3521f2=“”>New Font</text>

_dotNetInterop is defined as:

InjectDotNetInterop(incomingInterop: DotNet.DotNetObject): Boolean
    {
        if(this._dotNetInterop == undefined)
        {
            this._dotNetInterop = incomingInterop;
        }
}

C#:

public object BuildNewComponent()
{
    var newJSComponent = new
    {
        SomeTestVariable = "Built in an anonymous type",
        Tags = myElementReference
    };
    object dynamicCast = incomingComponent.ConvertToJSComponent();
    await this._currentJSRuntime.InvokeVoidAsync("OriJSClientCalls.RecieveComponent", dynamicCast);
    return dynamicCast    
}

Got Exceptions? Include both the message and the stack trace –>

Further technical details

  • ASP.NET Core version
  • Include the output of dotnet --info dotnet --info .NET Core SDK (reflecting any global.json): Version: 3.0.100 Commit: 04339c3a26

Runtime Environment: OS Name: Windows OS Version: 10.0.18362 OS Platform: Windows RID: win10-x64 Base Path: C:\Program Files\dotnet\sdk\3.0.100\

Host (useful for support): Version: 3.0.0 Commit: 7d57652f33

.NET Core SDKs installed: 2.2.402 [C:\Program Files\dotnet\sdk] 3.0.100 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed: Microsoft.AspNetCore.All 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.All 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All] Microsoft.AspNetCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.AspNetCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App] Microsoft.NETCore.App 2.1.13 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 2.2.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.NETCore.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App] Microsoft.WindowsDesktop.App 3.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs: https://aka.ms/dotnet-download

  • The IDE (VS / VS Code/ VS4Mac) you’re running on, and it’s version JetBrains Rider 2019.2.3

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:20 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
shawtycommented, Jan 7, 2020

@Triggs9 People here are trying to help you, but your being very abrasive and in no way attempting to help us to help you, we can see what your trying to ask, but your not answering the questions being asked by others, and thus we can’t help you.

As @mrpmorris states there are MANY ways of doing what your trying to achieve, and if you explain your goals, then we might be able to tell you a BETTER way to do what your trying to do.

If you don’t explain, then there’s little we can do to help, other than WAIT until what you describe as a bug to be investigated, and that’s simply not going to happen overnight.

If you want to try to reach a solution now, then help us… to help you!

5reactions
Triggs9commented, Dec 21, 2019

I refuse to create a repo for some who refuses to read and even slightly attempt to understand the bug being reported and implements a blanket “i need this to do my job” as a machine/robot would. I have even gone to the extent of solving the bug for you. don’t comment on this thread again please.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Call JavaScript functions from .NET methods in ASP. ...
An ElementReference is passed through to JS code via JS interop. The JS code receives an HTMLElement instance, which it can use with...
Read more >
Passing HTML element references
This is the problem we will solve using JavaScript Interop, @ref , and ElementReference . Observing the autofocus problem. First create a new...
Read more >
Using JSInterop to Pass HTML Elements and Handle JS ...
In this article, we are going to learn about using JsInterop to pass HTML elements to the JS functions and how to handle...
Read more >
Blazor dynamically createElement and appendChild
My approach was to create a CreateElement method in C# which calls createElement in javascript and returns a ElementReference as a Result.
Read more >
Blazor Tutorial : JavaScript Interop | Calling JavaScript from C#
ElementReference 6. Call API from JS example #CuriousDrive #WeLoveCoding. ... 22K views · 3 years ago #Blazor # JavaScript # C ...more ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found