This article is a mirror article of machine translation, please click here to jump to the original article.

Architect_Programmer_Code Agriculture Network»Architect › Programming › .Net/C # › [WebView2] (4) Web and WinForm mutual call function methods ...
View: 5093|Reply: 2

[Source] [WebView2] (4) Web and WinForm call function methods to each other

[Copy link]
Posted on 9/29/2022 9:03:59 PM | | | |
Requirements: The previous article wrote about how to implement the web interface and WinForm application to communicate with each other to send messages, but only the message was successfully sent, and the response information could not be obtained. What if the C# client calls a function method of the web to get the return result? And how does the web call C# code and get the return value?

Review:

[WebView2] (1) Initial introduction to Microsoft Edge WebView2 technology
https://www.itsvse.com/thread-10361-1-1.html

[WebView2] (2) WinForm introduces WebView2 to display web content
https://www.itsvse.com/thread-10362-1-1.html

WebView2 (3) Bidirectional communication between the Web and WinForm applications
https://www.itsvse.com/thread-10364-1-1.html
First, let's look at the renderings of the implementation, the web site calls the WinForm applicationGet clipboard data, WinForm appCall the abc method of the web to get the return valueAs follows:



C# calls the Web function method

This scenario shows how to run JavaScript on the web. In this method, the host app specifies the JavaScript code to run and passes the code to the web with ExecuteScriptAsync. The ExecuteScriptAsync function returns the JavaScript result to the ExecuteScript caller.

The Angular index.html page code is as follows:

The frontend mainly defines an abc function.

Winform calls the abc function of the web with the following code:



A web page calls a C# function method

Passing native objects to the web. The method of calling the object from the web is then called.

To use a message that represents a method call, use the AddHostObjectToScript API. At a high level, this API allows native (host) objects to be exposed to the web and act as proxies. Use window.chrome.webview.hostObjects. {name}>a0> access these objects. Reference Documentation:The hyperlink login is visible.

Create a new button on the web page, click the button to call the C# code to get the data of the current clipboard of the system.

The Angular app.component.html code is as follows:

app.component.ts code is as follows:

The front-end JS code has synchronous calls and asynchronous calls.

c# define a WebView2HostObject host object with the following code:


Note: Custom WebView2HostObject classes must be tagged[ClassInterface(ClassInterfaceType.AutoDual)]、[ComVisible(true)]property, otherwise JS would not be able to access the class.

Then add the newly defined instance via AddHostObjectToScript(String,Object) with the following code:

Finally, click the button on the front end to get the clipboard data, the effect is as follows:



(End)





Previous:WebView2 (3) Bidirectional communication between the Web and WinForm applications
Next:【Turn】CURL command uses proxies and proxies are introduced

Related Posts
Posted on 10/8/2022 3:07:01 PM |
Learn it
Posted on 3/31/2023 1:30:38 PM |
Learn from it, thanks for sharing
Disclaimer:
All software, programming materials or articles published by Code Farmer Network are only for learning and research purposes; The above content shall not be used for commercial or illegal purposes, otherwise, users shall bear all consequences. The information on this site comes from the Internet, and copyright disputes have nothing to do with this site. You must completely delete the above content from your computer within 24 hours of downloading. If you like the program, please support genuine software, purchase registration, and get better genuine services. If there is any infringement, please contact us by email.
Mail To:help@itsvse.com