Interaction between WebBrowser Control and Windows Forms

I am managing various contact information - phone, address, email, IM, other and I want it to look good and save real estate, so I want to display it in a WebBrowser control. I can create the markup and content dynamically into a stream and display it with any format with colors and font size easily adjusted. I can also put buttons <input> for Add, Edit, and Delete. I like this method, because it seems easier and better looking than a RichTextBox (correct me if you think otherwise.)
The question is about responding to those buttons. If one is selected, I want to hide the WebBrowser and unhide a Panel with the TextBox controls needed to allow entry of a new contact or editing of an existing one. I've heard this can be done. I was hoping for suggestions. All I can think of is some code to pick up an AJAX call, that would raise a Windows event, but that seems... odd.
Any ideas, links or suggestions would be appreciated .. or even a good reason why not to do it, but it seems like a good idea for high quality information presentation and I've generated plenty of html dynamically.

Solution 1:

You can manipulate the Form and Controls or call C# methods from WebBrowser using JavaScript and also you can manipulate content of WebBrowser control or call JavaScript methods from C#.

Manipulate WinForms from Html

To manipulate your Form from WebBrowser control and call C# methods and access your form properties you should decorate your form with [ComVisibleAttribute(true)] then you can set the form as ObjectForScripting property of WebBrowser control.

[ComVisibleAttribute(true)]
public partial class Form1 : Form
{
    private void Form1_Load(object sender, EventArgs e)
    {
        this.webBrowser1.ObjectForScripting = this;
    }
}

Then you can simply call methods and access to elements of your windows form this way:

Call C# method from JavaScript:

window.external.SomeCSMethod('Method called from JavaScript');

Set value of a WinForms Control from JavaScript:

Make the textBox1 control on your Form to be public by setting the value of Modifier property to public using desginer. Then it can be accessible from JavaScript:

window.external.textBox1.Text='Value set from JavaScript';

Manipulate Html from WinForms

You can manipulate html content of web browser control from C# code and call JavaScript methods or set value of html elements using methods of Document property of WebBrowser control:

Call JavaScript method from C#:

this.webBrowser1.Document.InvokeScript("someJSMethod", new []{"Method called from C#"});

Set value of a Html Control from C#:

this.webBrowser1.Document.GetElementById("text1")
                         .SetAttribute("Value set from C#", "Value From C#");

Sample Code:

You can create a Form1 class and put button1 and button2 and textBox1 and webBrowser1 on your Form set the Modifer of textBox1 to public:

[ComVisibleAttribute(true)]
public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        this.Load += Form1_Load;
        button1.Click += button1_Click;
        button2.Click += button2_Click;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        this.webBrowser1.DocumentText =
        @"<html>
        <head>
        <title>Test</title>
        <script>
            function someJSMethod(value){alert(value);}
        </script>
        </head>
        <body>
            <input type=""text"" id=""text1""/>
            <br/>
            <input type=""button"" value=""Call C# Method"" id=""button1""
            onclick=""window.external.SomeCSMethod('Method called from JavaScript');""/>
            <br/>
            <input type=""button"" value=""Set WinForms Control Value"" id=""button2""
            onclick=""window.external.textBox1.Text='Value set from JavaScript';""/>
        </body>
        </html>";
        this.webBrowser1.ObjectForScripting = this;
    }

    public void SomeCSMethod(string value)
    {
        MessageBox.Show(value);
    }

    private void button1_Click(object sender, EventArgs e)
    {
        this.webBrowser1.Document
                        .InvokeScript("someJSMethod", new[]{ "Method called from C#" });
    }

    private void button2_Click(object sender, EventArgs e)
    {
        this.webBrowser1.Document.GetElementById("text1")
                                 .SetAttribute("value", "Value set from C#");
    }
}

Interaction between WebBrowser Control and Windows Forms

Solution 1:

Manipulate WinForms from Html

Manipulate Html from WinForms

Related

Recent Posts