bimbima

Daily life experience of ayurvedic medicines, complementary therapies.

C-Sharp: Calling Dotnet function from JavaScript and Accessing HTML element from Dotnet with Web browser control

Some time it is required to access dotnet class methods from java script when working Web Browser control in dotnet and crolling  web pages from dotnet program. For this dotnet Web browser control provides several properties and methods to do these kind of operations.

Invoking Dotnet Object Method From Javascript:

For doing scripting operation WebBrowser control provides ObjectForScripting property, using this property you can call dotnet objects methods from JavaScript.

Suppose you a WebBrowser control on an windows form and you have opened one html page and you want to invoke CallMe method of MrScript class.

    public class MyScript
    {
        public void CallMe(string p)
        {
            MessageBox.Show(p);
        }
    }

To do this first you have to mark MyScript class to COM visible true for COM interop and assign instance of this class to ObjectForScripting of WebBrowser control.

    [ComVisible(true)]
    public class MyScript
    {
        public void CallMe(string p)
        {
            MessageBox.Show(p);
        }
    }
    public Form2()
    {
        InitializeComponent();
        //Assign MyScript intance to WebBrowser's ObjectForScripting prop
        this.webBrowser1.ObjectForScripting = new MyScript();
    }

To call this from JavaScript use window.external object in JavaScript function as given below.

<html>
    <head>
        <script language="javascript" type="text/javascript">
            function callDotnetCallMe(value) {
                window.external.CallMe(value);
            }
        </script>
    </head>
    <body>
        <input onclick="javascript:callDotnetCallMe('In Managed')" id="Button1" 
type="button" value="button" />
    </body>
</html>

In above HTML code i called this using "window.external.CallMe(value);"

window.external give access to additional objects of host of windows internet explorer component and in this case dotnet Form is host of  windows internet explorer component and MyScript is additional object for scripting.

Invoking Javascript method from C#:

For invoking javascript method from C#, webbrowser control provides method  WebBrowser.Document.InvokeScript . This method has two overloads, one has only one parameter for script method name and other has two parameters one for script method name and second takes array of objects.

For example here are two javascript function on a web page loaded in webbrowser control

<script language="javascript" type="text/javascript">
 
    function TestMe() {
        alert('TestMe');
    }
    function TestMe(p1, p2) {
        alert('TestMe'+p1+p2);
    }
 
</script>

To invoke these script from c# you have to make call like this

        private void button1_Click(object sender, EventArgs e)
        {
            this.webBrowser1.Document.InvokeScript("TestMe");
            this.webBrowser1.Document.InvokeScript("TestMe"
                ,new object[2]{"p1",2});            
        }

Accessing HTML Elements of web Page using C#

For accessing html document, WebBrowser control provides several methods and properties to access and do manipulation in HTML elements of page and other objects of web page.

Here are some useful methods and properties

        private void button1_Click(object sender, EventArgs e)
        {
            HtmlElement element =
                this.webBrowser1.Document.GetElementById("Button1");
            if (element != null)
            {
                element.InnerText = "Clicked";
                element.Style = "background-color:red";
                element.RaiseEvent("onclick");
            }
        }

Using WebBrowser.Document.All properties you can enumerate all elements of web page.

You can find all methods and properties details on MSDN online documentation for HtmlElement class.