Injecting a .NET Object into JavaScript Using СefSharp
This week, we're going to talk about injecting a .NET object into JavaScript using CefSharp. You can get the source code of this sample in the GitHub repository:
https://github.com/cefsharptutorials/...
Previous tutorials:
1) CefSharp Basics: Display an HTML5/CSS3 Webpage:
• CefSharp Basics: Display an HTML5/CSS3 Web...
2) URL Navigation Using CefSharp:
• URL Navigation Using CefSharp
3) Executing JavaScript from the .NET Side Using CefSharp:
• Executing JavaScript from the .NET Side Us...
About CefSharp:
https://cefsharp.github.io/
Please subscribe to our channel. For more awesome content visit:
/ @embeddedbrowsers
Transcript:
00:00 Injecting a .NET Object into JavaScript Using СefSharp
00:08 Create and Configure a WPF Solution with CefSharp
00:13 Create a project. Then add the CefSharp.Wpf NuGet package and create the x64 or x86 configuration.
00:20 You can find detailed instructions in our previous tutorials. (Check the links under this video)
00:23 Implementing the MainWindow Behaviour
00:26 Add the Chromium WebBrowser to the MainWindow
00:35 Define the DotNetMessage class
00:38 Define the Show method with the ‘string message’ argument
00:42 Please note that both the class and the method should be public
00:50 Instantiate the ChromiumWebBrowser In the MainWindow
constructor after the window initialization.
00:52 Then call the Browser.RegisterJsObject method and pass the “DotNetMessage” as the object name and the instance of DotNetMessage as the object to bind
01:07 Subscribe with the anonymous method to the Browser.IsBrowserInitializedChanged event
01:20 Inside this method we should check if the Browser is already initialized
01:28 And then load the HTML markup from the file which will be created later
01:40 Define the name of the root grid
01:48 And add the ChromiumWebBrowser instance to its children
01:56 Creating an HTML File
01:59 Add a new html file to the solution and call it “index.html”
02:12 Change the “Copy to Output Directory” property value to “copy always”
02:16 Add the text input with the “textbox” ID value
02:25 Add a button and call the ‘ShowDotNetMessage’ function in the onclick handler
02:42 Add the script section
02:45 Define the ‘ShowDotNetMessage’ function
02:54 Get the text from the ‘textbox’ element
03:06 And then call the ‘dotNetMessage.show()’ method
03:13 Please note that the ‘show’ method name starts with a lowercase letter in JavaScript
03:18 The name of the object we’re calling corresponds to the name of the registered .NET object
03:25 Build and Launch
#JavaScript
#.NET
#CefSharp
#EmbeddedBrowsers
