0

My requirement is to load HTML5/AngularJS form in the web browser control of WinForm app and exchange data between both.

To pass data from .Net form to WebBrowser control HTML/Angular form, I thought to call simple JavaScript method of HTML page and that method would subsequently trigger Angular complex workflow.

This is how I do call JavaScript function from my winform. 

WebBrowserControl1.InvokeScript("FunctionName", new object[] {"param"});

Could you suggest whether this approach is good for large applciation or there is a better way to pass data from .net winform to webbrowser AngularJS form.

Please note sometime back I have posted question to call Typescript function and I got answer as well. However, that was to initialize class of Angular from webbrowser control which is not feasible for complex Angular app.

Hence I have thought this approach to call simple JS function of Angular page and that would trigger complex angular flow.

Call TypeScript function from C# webbrowser control

Thanks in advance for your help.

Thanks, Manoj

Community
  • 1
  • 1
ManojP
  • 85
  • 1
  • 9

1 Answers1

1

That will get you one-way communication and it is totally fine. For 2-way communication, you should take a look at ObjectForScripting.

With that, you can have your JavaScript directly call C# methods to send data back via window.external

Here is a blatant paste from the MSDN.

    webBrowser1.AllowWebBrowserDrop = false;
    webBrowser1.IsWebBrowserContextMenuEnabled = false;
    webBrowser1.WebBrowserShortcutsEnabled = false;
    webBrowser1.ObjectForScripting = this;
    // Uncomment the following line when you are finished debugging.
    //webBrowser1.ScriptErrorsSuppressed = true;

    webBrowser1.DocumentText =
        "<html><head><script>" +
        "function test(message) { alert(message); }" +
        "</script></head><body><button " +
        "onclick=\"window.external.Test('called from script code')\">" +
        "call client code from script code</button>" +
        "</body></html>";

EDIT: Updating answer to show other ways of running script on the page.

        private void WebBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
            {
                WebBrowser wb = sender as WebBrowser;

                HtmlElement he = webBrowser1.Document.CreateElement("script");
                he.InnerHtml = "alert('popup');";
                wb.Document.Body.InsertAdjacentElement(HtmlElementInsertionOrientation.AfterEnd, he);

            }

On a side note, be careful about memory leaks. The web browser control has the same rendering and JavaScript engine as Internet Explorer, however unlike IE, when it leaks memory it can't restart a tab process. It lives in your process space. I am saying be careful as Angular JS and IE have historically not played nicely together. Make sure to handles your scopes properly and such.

Alexander Ryan Baggett
  • 2,347
  • 4
  • 34
  • 61
  • Thanks 1) Regarding winform to webbrowser control form (AngularJS/HTML) is there any other option available OR the one I have mentioned is an only option. Also, you have any idea how Angular flow can be triggered from simple Javascript function that I will be calling from winform? 2) Yes, HTML form to WinForm communication I could implement with Windows.external. 3) Regarding memory leak, you have any more details about which are the things I should take care other than disposing webbrowser control when i am done with. I am not sure anything else I need to do at Angular side. – ManojP Feb 07 '17 at 17:36
  • InvokeScript is the cleanest way. The other way that comes to mind would require you to start editing the document dynamically and adding script tags. I will edit my answer to show how to do that. – Alexander Ryan Baggett Feb 07 '17 at 20:20
  • I edited my answer to show how to do that. While you could use that to add new script code, you could also use it to invoke existing code. – Alexander Ryan Baggett Feb 07 '17 at 20:23
  • I suspect many of the Gotcha's for Angular js can be found easily online. Big ones to avoid are registering events on the body of a webpage in a single page application. This page should be very useful with angular js. https://makandracards.com/makandra/31289-how-to-create-giant-memory-leaks-in-angularjs – Alexander Ryan Baggett Feb 07 '17 at 20:28
  • Thanks Alexander. Information you have shared is really useful. Are you familiar with WebView and WebBrowser control? For my POC I used WebBrowser control but then i heard about WebView as well. I am not familiar with it. In case you have more details about it then please share. Thanks – ManojP Feb 08 '17 at 14:03
  • I am not familiar with webview sorry. You can ask other questions on stack overflow about it. – Alexander Ryan Baggett Feb 08 '17 at 14:20