Imagine from within your Windows Forms applications, you are actually navigating different web pages and treating it as a Web Application. This is made possible by the .NET component called as WebBrowser. This control is available as a tool to be put onto your Windows Form.
The WebBrowser .NET control enables the user to navigate Web pages inside your Windows Form.
The below sample shows how to make a use of WebBrowser control and make a call C# from JavaScript or the other way round.
using System.Runtime.InteropServices;
using System.Windows.Forms;
namespace WebBrowserDemo
{
public partial class WebBrowserDemo : Form
{
private HtmlElement button;
public WebBrowserDemo()
{
InitializeComponent();
// Set the WebBrowser that can be accessed by scripting code
// that is contained within the web page displayed in the WebBrowser control.
webBrowser.ObjectForScripting = new ScriptHanlder(this);
// Set the HTML contents of the web page
// displayed in the WebBrowser control.
webBrowser.DocumentText =
@"<html>
<head>
<style>
.floating-box { float: left; width: 90px; height: 90px; margin: 20px; background-color:#73AD21;}
.floating_icon { width:100%; text-align:center; height:90%; padding-top:30%; color:#134880;}
</style>
</head>
<body>
<div width=""120"" height=""120"" border=""3"" >
<div id=""btnZero"" class=""floating-box"" onClick=""window.external.OnClick(0);"">
<div class=""floating_icon""> <h2>0</h2> </div>
</div>
<div id=""btnOne"" class=""floating-box"" onClick=""window.external.OnClick(1);"">
<div class=""floating_icon""> <h2>1</h2> </div>
</div>
<div id=""btnTwo"" class=""floating-box"" onClick=""window.external.OnClick(2);"">
<div class=""floating_icon""> <h2>2</h2> </div>
</div>
<div id=""btnThree"" class=""floating-box"" onClick=""window.external.OnClick(3);"">
<div class=""floating_icon""> <h2>3</h2> </div>
</div>
<div id=""btnFour"" class=""floating-box"" onClick=""window.external.OnClick(4);"">
<div class=""floating_icon""> <h2>4</h2> </div>
</div>
<div id=""btnFive"" class=""floating-box"" onClick=""window.external.OnClick(5);"">
<div class=""floating_icon""> <h2>5</h2> </div>
</div>
<div id=""btnSix"" class=""floating-box"" onClick=""window.external.OnClick(6);"">
<div class=""floating_icon""> <h2>6</h2> </div>
</div>
<div id=""btnSeven"" class=""floating-box"" onClick=""window.external.OnClick(7);"">
<div class=""floating_icon""> <h2>7</h2> </div>
</div>
<div id=""btnEight"" class=""floating-box"" onClick=""window.external.OnClick(8);"">
<div class=""floating_icon""> <h2>8</h2> </div>
</div>
<div id=""btnNine"" class=""floating-box"" onClick=""window.external.OnClick(9);"">
<div class=""floating_icon""> <h2>9</h2> </div>
</div>
</div>
</body>
</html>";
}
public void NumberClicked(int num)
{
switch (num)
{
case 0:
button = webBrowser.Document.GetElementById("btnZero");
if (button != null)
button.InnerHtml = button.InnerText == "0" ? "<div class=\"floating_icon\"> <h2>Zero</h2> </div>" :
"<div class=\"floating_icon\"> <h2>0</h2> </div>";
break;
case 1:
button = webBrowser.Document.GetElementById("btnOne");
if (button != null)
button.InnerHtml = button.InnerText == "1" ? "<div class=\"floating_icon\"> <h2>One</h2> </div>" :
"<div class=\"floating_icon\"> <h2>1</h2> </div>";
break;
case 2:
button = webBrowser.Document.GetElementById("btnTwo");
if (button != null)
button.InnerHtml = button.InnerText == "2" ? "<div class=\"floating_icon\"> <h2>Two</h2> </div>" :
"<div class=\"floating_icon\"> <h2>2</h2> </div>";
break;
case 3:
button = webBrowser.Document.GetElementById("btnThree");
if (button != null)
button.InnerHtml = button.InnerText == "3" ? "<div class=\"floating_icon\"> <h2>Three</h2> </div>" :
"<div class=\"floating_icon\"> <h2>3</h2> </div>";
break;
case 4:
button = webBrowser.Document.GetElementById("btnFour");
if (button != null)
button.InnerHtml = button.InnerText == "4" ? "<div class=\"floating_icon\"> <h2>Four</h2> </div>" :
"<div class=\"floating_icon\"> <h2>4</h2> </div>";
break;
case 5:
button = webBrowser.Document.GetElementById("btnFive");
if (button != null)
button.InnerHtml = button.InnerText == "5" ? "<div class=\"floating_icon\"> <h2>Five</h2> </div>" :
"<div class=\"floating_icon\"> <h2>5</h2> </div>";
break;
case 6:
button = webBrowser.Document.GetElementById("btnSix");
if (button != null)
button.InnerHtml = button.InnerText == "6" ? "<div class=\"floating_icon\"> <h2>Six</h2> </div>" :
"<div class=\"floating_icon\"> <h2>6</h2> </div>";
break;
case 7:
button = webBrowser.Document.GetElementById("btnSeven");
if (button != null)
button.InnerHtml = button.InnerText == "7" ? "<div class=\"floating_icon\"> <h2>Seven</h2> </div>" :
"<div class=\"floating_icon\"> <h2>7</h2> </div>";
break;
case 8:
button = webBrowser.Document.GetElementById("btnEight");
if (button != null)
button.InnerHtml = button.InnerText == "8" ? "<div class=\"floating_icon\"> <h2>Eight</h2> </div>" :
"<div class=\"floating_icon\"> <h2>8</h2> </div>";
break;
case 9:
button = webBrowser.Document.GetElementById("btnNine");
if (button != null)
button.InnerHtml = button.InnerText == "9" ? "<div class=\"floating_icon\"> <h2>Nine</h2> </div>" :
"<div class=\"floating_icon\"> <h2>9</h2> </div>";
break;
}
}
// Set the class as ComVisible to be able to access it from JavaScript.
[ComVisible(true)]
public class ScriptHanlder
{
private WebBrowserDemo demoForm;
public ScriptHanlder(WebBrowserDemo form)
{
// Store the form to refer it later.
demoForm = form;
}
// Method called from JavaScript.
public void OnClick(int num)
{
demoForm.NumberClicked(num);
}
}
}
}
More information about WebBrowser can be found here.
Sachin Jegaonkar is a Software Developer based out of Pune, India. He has over 9 years of software industry experience mainly in C++, VC++, COM, C# ASP.Net.
0 comments:
Post a Comment