Reader Level:
ARTICLE

Using WebBrowser Control

Posted by Sivaraman Dhamodaran Articles | Windows Controls C# December 06, 2012
In this artricle we will learn the usage of the WebBrowser Control supplied by the .Net Framework
  • 0
  • 0
  • 17878
Download Files:
 

1. Introduction

 

The .Net WebBrowser control provides the capability of browsing web pages in your application. You can also display your own HTML content through the WebBrowser control. That means you can generate very fancy reports and display them in a WebBrowser control. In this article, I will show you how you can design a simple browsing window (Do not provide any personal information when you are using this sample). At the end, I will show how to display the user content and hook a button click in the user content to the C# methods.

 

2. About the sample

 

The screen shot of the sample is shown below:

Pic01.jpg

 

The user will type the web address in the Address Bar. To navigate to the web address, they should click the Go button. The stop and reload to the same job as every browser is doing today. When the sample is navigating and consuming the web content, the progress bar shows how much of the content has currently been loaded. The information bar shows what part of the page content is currently loading. When you run the sample you may notice that, for fully downloading a page, there may be multiple navigation starts and ends and each indicates that, to fully construct the page, the sample downloads the content from multiple locations. OK, let us start developing the sample.

 

3. Designing the Browser

 

The browser we are going to create is composed of a ToolStrip, StatusStrip and the WebBrowser control. First the toolbar is created and then the required controls on the toolbars are placed. This step is shown in the following video:

 

Video 1: Setting-up the toolbar

 

In the video, you will not see the buttons for user content. We will add that later. Next, we should add the StatusStrip control to the sample application form. Once the status control is added, a Progress bar and a label for displaying the information are placed in the StatusStrip control. This is shown in the following video:

 

Video 2: Setting-up the status bar.

 

Finally, we added the WebBrowser control to our sample. Note that when you place the WebBrowser control on the form it automatically occupies the entire free area in which it is placed.

 

Video 3: Place the WebBrowser control.

 

Tags for coding: //WEB_BR, //WEB_CS

 

WEB_BR: Shows some basic WebBrowser supports

WEB_CS: Shows displaying the user content and handling the control events from those script

 

4. WebBrowser actions

 

The WebBrowser control provides rich functionalities and in this sample, we will see only the basic actions like loading a web page, stopping the current page load and refreshing the page load.

 

1. In the Go button click handler, we take the web address provided in the Address box and navigate to that page. In the mean time, we display the status text Loading. The Navigate method will absorb the content and displays that in the WebBrowser control.

 

private void btnGo_Click(object sender, EventArgs e)

{

    //Web_BR 01: Navigate to the URL

    Browser.Navigate(txtTBURL.Text);

    Status_Information.Text = "Loading...";

}

 

2. Canceling the page load as well as refreshing the loaded/partially loaded page content is straight forward. We should simply call the correspoding methods in the WebBrowser control to do so. The following are the handler functions for Stop and Reload buttons:

 

private void btnStop_Click(object sender, EventArgs e)

{

    //Web_BR 02: Stop Loading the Page

    Browser.Stop();

}

 

private void btnReload_Click(object sender, EventArgs e)

{

    //Web_BR 03: Refresh the Page

    Browser.Refresh();

}

 

5. Status Information

 

When we load a web page into a browser, say IE, the fully load the document, the browser will navigate to the various web locations. Say for example, the web site having many YouTube videos and reviews about the videos (each page's own content is a review) contains a FaceBook like page on the same page. When we browse to that web site, the browser will load the review content of the video from the page itself, then it navigates to YouTube and FaceBook to get some information. So, to load a document completely, the browser must navigate to three web addresses even though the user address is one address for the web site.

 

When the browser is navigating to a different site for loading some portion of the document, we will get two events; namely Navigating and Navigated. The first event says that the navigation is in progress and the second event says that the navigation is complete. When the web page document is fully loaded, we get the DocumentCompleted event.

 

We handled all the three events to display the status information:

 

private void frmWebBrowser_Load(object sender, EventArgs e)

{

    //Web_BR 04: Hide the visibility of the status bar

    Status_PB.Visible = false;

}

 

private void Browser_Navigating(object sender, WebBrowserNavigatingEventArgs e)

{

    //Web_BR 06: Provide some information about the current navaigation

    Status_PB.Visible = true;

    Status_Information.Text = "Navigating " + e.Url.ToString() + " for " + e.TargetFrameName;

}

 

private void Browser_Navigated(object sender, WebBrowserNavigatedEventArgs e)

{

    //Web_BR 07: Provide some information about the current navaigation

    Status_Information.Text = "Navigated..";

}

 

private void Browser_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)

{

    //Web_BR 08: Provide some information about the current navaigation

    Status_PB.Visible = false;

    Status_Information.Text = "Web Page Loaded";

}

 

Note that we hide the progress in the status bar during the form load. And, we enable that when the Browser first begins navigation for the page. Once we receive the document complete event, we again disable the propgress bar. The following video shows loading the web page in a browser:

 

Video 4: Sample in Action: Navigate to a Page

 

6. Create Plain custom HTML

 

When we click the custom button 1 from the tool strip, the browser loads custom script 1 as shown below. In the following picture we access this HTML button from the C# code and hook the click event of this button to the C# method.

 

Pic02.jpg

 

The ToolStrip of our browser sample application is modified to include two more buttons and each button loads two different user content in the WebBrowser control. The following video shows adding these two buttons to the ToolStrip control:

 

Video 5: Modify ToolStrip Control

 

Once the buttons are added, using the Visual Studio IDE, the custom web content (shown in the picture above) is created. The formatted content of the IDE created HTML page is given below:

 

<html >

         <head>

                 <title>Button Click by ID</title>

         </head>

         <body>The button placed below is a html button. The button is accessed by C# and a handler method(in C#) is provided at runtime

                 <input id='BtnTest' style='z-index: 100; left: 8px; width: 102px; position: absolute;top:60px' type='button' value='button'/>

         </body>

</html>

 

In the above script, we gave an Id (BtnTest) to the "input" control. In addition, the control type is specified as button. Notice that we don't provide a handler now. At runtime, the browser sample will obtain this button from the loaded HTML content, and dynamically specify the handler to the button click. Video 6 shows creating and formatting the HTML shown above using the Visual Studio IDE. Note that we changed the double quotes to single quotes and this avoids the formatting of the HTML content when we assign that as a string to the WebBrowser control later.

 

Video 6: Creating the HTML content for the browser

 

7. Hooking the event @ runtime

 

1. In the above script the HTML designer not be aware of which function to be called and that is decided at runtime. The first thing we should do is adding a private flag customDoc1. This flag will be set when the WebBrowser control is loading the user HTML script.

 

//Web_CS 01: Declare boolean tag for document 1 and 2

private bool customDoc1 = false;

 

 

2. In the button click handler (for the first user script), we assigned the preceding created user content 1 to the WebBrowser control by setting the DocumentText property.

 

//Web_CS 02: Place the Html document with a button having proper Id

private void btnUser1_Click(object sender, EventArgs e)

{

    //Setting this property will load the document and raise document completed

    Browser.DocumentText = "<html ><head><title>Button Click by ID</title></head><body>The button placed below is a html button. The button is accessed by C# and a handler method(in C#) is provided at runtime<input id='BtnTest' style='z-index: 100; left: 8px; width: 102px; position: absolute;top:60px' type='button' value='button'/></body></html>";

    customDoc1 = true;

}

 

3. As we specified the new content for the WebBrowser control (by setting the DocumentText), the browser will load the content and fire the Document Completed event once the load is fully is done. In the document completed event handler we get the HTML button by it's id and store that as HtmlElement. Then we provide the event handler to its click event using the delegate HtmlElementEventHandler. Finally we reset the boolean flag customDoc1 to false.

 

//Web_CS 03: Get the Html button from the loaded document

//           Script. Then attach the C# method as click handler

if (customDoc1 == true)

{

    //03.1 : Get html Element

    HtmlElement btnElem = Browser.Document.GetElementById("BtnTest");

 

    //03.2 : Hook the C# method to the event

    if (btnElem != null)

        btnElem.Click += new HtmlElementEventHandler(Html_test_button_Hanlder);

    //03.3 : Reset the Tag

    customDoc1 = false;

}

 

4. The handler function for the HTML button click is shown below:

 

//Web_CS 04: Create a button handler for Html Button

void Html_test_button_Hanlder(object sender, HtmlElementEventArgs evArg)

{

    MessageBox.Show("Click event of the Script button Handled");

}

 

In this section, we crated an HTML content with a button in it. Then the HTML content is loaded into the WebBrowser control. Once the user content is loaded completely, we get the HTML button instance from the loaded document and attached C# method as a click event handler. In this case, the HTML document designer is not aware of the C# handler. In some cases, the HTML script knows which function to call on the C# code library. In that case, they do provide the click handler during the HTML design itself. We see that in the next section.

 

8. Setting the click handler from an external source

 

Look at the second custom script shown below:

 

<html >

      <head>

         <title>Button Click Hooked to External Method of C#</title>

      </head>

      <body>The scripting person knows which C# function to call. So the well known C# method is tied in the OnClick Attrubite

          <input style='z-index: 100; left: 8px; width: 102px; position: absolute;top: 44px'

          type='button' onclick='window.external.ShowMessageE()'  value='button'/>

      </body>

</html>

 

In this script, the input button is not specified with the id. In the OnClick event, the handler function external.ShowMessageE is specifed as the event handler. The external here specifies that the function ShowMessageE() is available from the external source.

 

1. In the WebBrowser sample, first we included the required namespace to mention the class that we are going to implement soon as a COM visible class.

 

//Web_CS 05: Declare the required namespace

using System.Runtime.InteropServices;

 

2. In the button click the second user content is specified as the DocumentText. This is just the same way we loaded the first script. The only difference is here we used the verbatim string (@stringcontent) to retain the format of the string as specified.

 

//Web_CS 06: Set the Html as document content of the browser control.

private void btnUser2_Click(object sender, EventArgs e)

{

    string htmldoc = @"<html >

    <head>

    <title>Button Click Hooked to External Method of C#</title>

    </head>

    <body>The scripting person knows which C# function to call. So the well known C# method is tied in the OnClick Attrubite<input

            style='z-index: 100; left: 8px; width: 102px; position: absolute;top: 44px'

            type='button' onclick='window.external.ShowMessageE()'  value='button'/>

    </body>

    </html>";

 

    //Setting this property will load the document and raise document completed

    Browser.DocumentText = htmldoc;

}

 

3. The class HtmlSupportingMethods contains only one public method, which is accessed by our custom script 2 as Window.external.ShowMessageE(). As this method is accessed by the external scripting world, we mark the class as COM compatible by declaring the class with the attribute [ComVisible(true)]

 

//Web_CS 07: External scripting methods. This class is set with the ComVisible attribute

//           as it's methods are going to be accessed by the html document content that

//           will be loaded by the Web Browser control

[ComVisible(true)]

public class HtmlSupportingMethods

{

    public void ShowMessageE()

    {

        MessageBox.Show("External Method Accessed");

    }

}

 

4. There is one final step. How does the content loaded on the WebBrowser control know where it should get the External Source? We should link the HtmlSupportingMethods with the HTML script. We do that in the form load as shown below:

 

//Web_CS 08: Set the Scripting Object. This should a com visible object

Browser.ObjectForScripting = new HtmlSupportingMethods();

 

The browser sample in action can be found in the following video.

 

Video 7: Sample in Action: Testing the scripting support

COMMENT USING

Trending up