Welcome to weblogs.com.pk Sign in | Join | Help

Windows Forms' WebBrowser Control and JavaScript

Windows Forms' (Microsoft.NET) Web Browser Control is awesome, it exposes lot of functionality to the managed code, including the ability to call JavaScript function from managed code and to call managed code from the JavaScript...Lets walk through how this can be done with a real world example, whose User Interface is shown below...

image

User clicks the "Generate" button which generates couple of graphs by hitting back-end server (over web service), this happens in BackgroundWorker and as the graphs starts generating JavaScript function is called from C# which updates the DOM showing the newly generated graph with a link "Details.." associated with each graph. Clicking this link trigger the JavaScript function which calls the C# code which generate details of clicked graph and update the HTML content in the WebBrowser Control.

To get this done, you need to decorate your Form or UserControl that is hosting the WebBrowser Control with two attributes so that your UserControl or Form get exposed to underlying WebBrowser engine (Internet Explorer which is COM based).

[PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
[ComVisibleAttribute(true)]
public partial class RecentGraphsControl : UserControl
{
}
 

Then you need to set couple of properties of WebBrowser control

void RecentGraphsControl_Load(object sender, EventArgs e)
{
    this.webBrowser.ObjectForScripting = this;
    //this.webBrowser.ScriptErrorsSuppressed = true;
    //Set the above property to true if you want JavaScript errors to be ignored
}

Now to call the JavaScript function from C#

this.webBrowser.Document.InvokeScript("AppendGraphEntry", new string[] { graphName, graphUrl });

The first parameter is the name of the JavaScript function ("AppendGraphEntry" in this example) and second parameter is an array of parameters for the function

string javaScriptStringToPassBackToWebBrowser = string.Format("<img src='{1}'><a href=\"BLOCKED SCRIPTwindow.external.LoadGraphDetails('{0}')\">Details..</a><br>",
     graphName, url);

LoadGraphDetails(string graphName) is the C# public method in the RecentGraphsControl (the control hosting the browser control marked as ComVisible and whose PermissionSet is set.

Published Wednesday, October 22, 2008 3:11 PM by khurram
Filed under:

Comments

# re: Windows Forms' WebBrowser Control and JavaScript

Wednesday, October 22, 2008 6:48 PM by khurram

javaScriptStringToPassBackToWebBrowser is set to a string "javascript" prefixing it with ":" and then "window.external.LoadGraphDetails('GraphName')"

window.external

http://msdn.microsoft.com/en-us/library/ms535246%28VS.85%29.aspx has the formal documentation on window.external (which is IE specific)

Why C# <--> JavaScript approach when this can be done by some ServerSide logic?

Page execution has a time contraint, the recent graph generation was taking time, so we did in Desktop

Why C# <--> JavaScript approach when this can be done by Ajax?

JavaScript is very limited in a sence that it cannt do "everything", for the graph generation we needed to hit a SSH server. Yes, we could use some server side code with Ajax. We exploited the "ThreadPool" and do graph generation in parallel. Secondly, we had a "choice", either to deliver this functionality in the pre-existed desktop app or in some web app. Desktop was neater choice. Point is....one should have enough knowledge and exposure to "choose" "neater" choice...web (+ ajax) is not always the best choice....desktop is not always the best choice...this is where .NET/C# shines...it provides "broader spectrum" as a platform, you can do web, desktop, mobile, game and now RIA development with it....

New Comments to this post are disabled