.net Maui WebView.EvaluateJavaScriptAsync return data from JavaScript callback

Question

I have a .net WPF app where I am using a WebView2 control to render a node.js app. The node.js app is fairly simple and contains a few async functions that call out to a rest API and using a callback waits for the results. Currently I use window.chrome.webview.postMessage to send the results back to the WebView2 and the messageReceived event. I also have a few buttons on the WPF app that call out to the web app to execute some JS.

I am looking to build a cross platform app using .net MAUI and I see that there is a WebView control and that is has the same ability to execute JS on the web app using eval & WebView.EvaluateJavaScriptAsync but I don’t see a way to post\receive a message with the WebView?

The docs kind of eludes to using a JS callback to send the data from the web app to the MAUI app but I can’t seem to grasp how that would work?

Here is an example of one of the JS functions. MyLib.get cards is a 3rd party function that makes a call to another platform and retrieves a list of cards.

function getCards(){
   Mylib.getCards(function(resp){
     return resp;
   });
}

I can call this using WebView.EvaluateJavaScriptAsync but I am not understanding how to get the results back into the MAUI app

string result = await webView.EvaluateJavaScriptAsync($"getCards()");

Previously I just use the postMessage capability to post the results to the WebView2 when they returned from the callback.

Can someone please tell me, is this possible and if so how to make it work.

This example project helped me implement JavaScript / C# interop into my MAUI app, so might be useful to you as well. — Wolfgang Schreurs
– Wolfgang Schreurs, Commented Aug 28, 2023 at 3:27

Stephen Quan · Accepted Answer · 2024-08-22 04:39:36Z

1

As a workaround we can make use of document.title as follows:

function getCards(){
   Mylib.getCards(function(resp){
     document.title = JSON.stringify(resp);
   });
}

Then, in C# we run EvaluateJavaScriptAsync() twice, i.e.

await webView.EvaluateJavaScriptAsync($"getCards()");
await Task.Delay(1000); // allow getCards() to run to completion
string result = webView.EvaluateJavaScriptAsync("document.title");

answered Aug 22, 2024 at 4:39

Stephen Quan

27.9k4 gold badges101 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zack · Accepted Answer · 2022-09-19 09:23:01Z

0

In MAUI you can send requests to the web service with the HttpClient Class.

For more details, you can refer to the following docs: Consume a REST-based web service | Microsoft Docs

answered Sep 19, 2022 at 9:23

Zack

1,7071 gold badge4 silver badges5 bronze badges

5 Comments

Jeremy Ragsdale Over a year ago

That is helpful thank you, in this particular case the endpoint is not exposed publicly, only through a is library loaded on the web app.

Zack Over a year ago

So has this problem been solved?

Jeremy Ragsdale Over a year ago

Not that I have seen

Zack Over a year ago

Are you unable to send requests to the web using HttpClient Class?

user1735894 Over a year ago

Correct, the API that is being hit whilst technically available is not meant to be hit directly. There are certain pieces of information that are generated via the JS SDK library.

Kevin · Accepted Answer · 2024-01-23 21:08:36Z

0

This is what I use in my MAUI app to read the value of a Label called hiddenkey on my webpage

    var Key = await Browser.EvaluateJavaScriptAsync($"document.getElementById('hiddenkey').innerHTML");

answered Jan 23, 2024 at 21:08

Kevin

1351 silver badge5 bronze badges

Collectives™ on Stack Overflow

.net Maui WebView.EvaluateJavaScriptAsync return data from JavaScript callback

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related