WebView2 (WPF) - Load website from local folder and call C# Function and call JS Function

Question

I am making a WPF application use WebView2.

There will be an installer that will installer the WPF application in a folder and will also download and write the website into a subfolder of the installation directory. Such as this:

Installation Directory
├───Website
│   ├───index.css
│   └───index.html
└───WPF Self Contained EXE

The WebView2 will load the website using this (I think): webView.CoreWebView2.Navigate(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Website");

This should load index.html and all the files it references such as index.css.

Now my main concern is that how do I call a JavaScript function from C#. So far after googling I have only found ways for WebView1. And I couldn't find anything about calling a C# method from JavaScript.

So three things:

Is this webView.CoreWebView2.Navigate(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Website"); correct for loading a website from a local folder?
How would I call a JavaScript function and pass an C# object to it from a C# method.
How would I call a C# function from the JavaScript script?

Is this even possible?

Thanks.

The following should help you get started: stackoverflow.com/questions/68578936/…, stackoverflow.com/questions/65452473/…, and stackoverflow.com/questions/68350635/… . However, rather than storing the files (.html and .css) as embedded resources (as shown in those posts), store them as files on disk-as you already planned to do. — It all makes cents
– It all makes cents, Commented Aug 2, 2021 at 18:07
Thanks! This helps! I think that the storing the files on disk will make updating faster as they will probably be updated faster than the actual app... Thanks again! — admin
– admin, Commented Aug 2, 2021 at 18:22
The following may be helpful for how to call a C# function from JavaScript: github.com/MicrosoftEdge/WebView2Feedback/issues/335 — It all makes cents
– It all makes cents, Commented Aug 2, 2021 at 18:54

David Risney · Accepted Answer · 2021-08-02 17:34:41Z

6

Using file URI

I'm not sure if AppDomain.CurrentDomain.BaseDirectory will always get you the correct path. You can use something like the following:

string exePath = System.Reflection.Assembly.GetExecutingAssembly().Location;
string exeFolder = System.IO.Path.GetDirectoryName(exePath);
string websiteFolder = Path.Combine(exeFolder, "website");
string htmlPath = Path.Combine(websiteFolder, "index.html");

webView.CoreWebView2.Navigate(htmlPath);

You must include the path to the index.html itself and not just the folder containing the index.html.

Normally Navigate should take a URI, but if you provide a Windows file path instead it will convert it to a file URI for you and should work.

File URIs have some limitations when trying to incorporate http(s) URIs and other web platform features that require https.

Using a virtual HTTPS URI

If you hit issues using file URIs you can use CoreWebView2.SetVirtualHostNameToFolderMapping to map a Windows file path to a fake HTTPS hostname:

string exePath = System.Reflection.Assembly.GetExecutingAssembly().Location;
string exeFolder = System.IO.Path.GetDirectoryName(exePath);
string websiteFolder = Path.Combine(exeFolder, "website");

webView.CoreWebView2.SetVirtualHostNameToFolderMapping("appassets.example", websiteFolder, CoreWebView2HostResourceAccessKind.DenyCors);
webView.CoreWebView2.Navigate("https://appassets.example/index.html");

This will make a fake hostname 'appassets.example' that will map to your Windows file path. And since its HTTPS URIs you don't hit the same issues as you do with file URIs.

Host objects in script

For your questions 2 & 3 you can use CoreWebView2.AddHostObjectToScript. The current implementation of AddHostObjectToScript requires your C# classes to be specially marked. You can see it in the AddHostObjectToScript documentation.

answered Aug 2, 2021 at 17:34

David Risney

4,46517 silver badges20 bronze badges

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

6 Comments

admin Over a year ago

Hi. The local website works! Thanks! When I call a c# method inside a class that returns a List<MyOwnClassName>, I get null. This is my js code:

const transaction = chrome.webview.hostObjects.transaction; transaction.GetReceiptItems(10).then(TResult1 => {this.amount = TResult1.Count;});

admin Over a year ago

This logs an error to the console: Uncaught (in promise) TypeError: Cannot read property 'Count' of null Note I am using react.js.

David Risney Over a year ago

Is the type of the result of GetReceiptItems also marked with the appropriate attributes [ClassInterface(ClassInterfaceType.AutoDual)] and [ComVisible(true)]?

It all makes cents Over a year ago

The JavaScript code on the MS website is incorrect. const transaction = chrome.webview.hostObjects.transaction; needs to have await. It should be const transaction = await chrome.webview.hostObjects.transaction;

admin Over a year ago

Ok. Thanks! Let me try the new code. The result is a List<T>... Do you mean the <T> class?

|

Collectives™ on Stack Overflow

WebView2 (WPF) - Load website from local folder and call C# Function and call JS Function

1 Answer 1

Using file URI

Using a virtual HTTPS URI

Host objects in script

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using file URI

Using a virtual HTTPS URI

Host objects in script

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related