Click here to Skip to main content
15,868,016 members
Articles / Programming Languages / Javascript
Article

Silverlight JavaScript Integration - Part 1

Rate me:
Please Sign up or sign in to vote.
4.20/5 (3 votes)
16 Jul 2011CPOL 23.4K   382   11  
Integration of Silverlight and JavaScript
Sample Image - maximum width is 600 pixels

Introduction

Silverlight is a browser-based plug-in. This plug-in was designed to be integrated with web pages.

Document Object Model (DOM) will allow web applications and scripts to dynamically access and update the content and schema of documents.

Using the Code

  • Access HTML elements and modify its properties:
    C#
    div id="headerDiv" style="width:100%; height:20%; background-color:Red"
    
    private void btnAccessHtmlElements_Click(object sender, RoutedEventArgs e)
            {
                System.Windows.Browser.HtmlDocument doc = 
    			System.Windows.Browser.HtmlPage.Document;
                System.Windows.Browser.HtmlElement headerDiv = 
    			doc.GetElementById("headerDiv");
                headerDiv.SetStyleAttribute("background-color", "green");
            }
  • Access the value of query string.

    Suppose the web page opened with the following link:

    • http://localhost:7410/SilverlightDomInteractionTestPage.aspx?employeeID=600
    C#
    private void btnAccessQueryStrings_Click(object sender, RoutedEventArgs e)
    {
    	System.Windows.Browser.HtmlDocument doc=
    		System.Windows.Browser.HtmlPage.Document;
    	int empID = int.Parse(doc.QueryString["employeeID"]);
    	MessageBox.Show(empID.ToString());//Results 600
    }
  • Access all values of query strings.

    Suppose the web page opened with the following link:

    • http://localhost:7410/SilverlightDomInteractionTestPage.aspx?employeeID=600&sallaryLessthan=2000
    C#
    private void btnAccessAllQueryStrings_Click(object sender, RoutedEventArgs e)
    {
    	Dictionary<string, string> QueryStrings = new Dictionary<string, string>();
    	System.Windows.Browser.HtmlWindow win = 
    				System.Windows.Browser.HtmlPage.Window;
    	System.Windows.Browser.HtmlDocument doc = 
    				System.Windows.Browser.HtmlPage.Document;
    	foreach (string key in doc.QueryString.Keys)
    	{
    		QueryStrings.Add(key, doc.QueryString[key]);
    	}
    	MessageBox.Show(QueryStrings.Count.ToString());//Results 2
    }
  • Invoke JavaScript function:
    JavaScript
    function ChangeHeaderDivColor() {
    	var hDivElement = document.getElementById("headerDiv");
    	hDivElement.style.backgroundColor = "Green";
    }
    private void btnInvokeJSFunction_Click(object sender, RoutedEventArgs e)
    {
    	System.Windows.Browser.HtmlWindow win = 
    			System.Windows.Browser.HtmlPage.Window;
    	win.Invoke("ChangeHeaderDivColor");
    }
  • Return value from JavaScript function:
    JavaScript
    function GetSum(a, b) 
    {
    	return a + b;
    }
    
    private void btnReturnValueJSFunction_Click(object sender, RoutedEventArgs e)
    {
    	System.Windows.Browser.HtmlWindow win = 
    			System.Windows.Browser.HtmlPage.Window;
    	object result = win.Invoke("GetSum", 17, 7);
    	MessageBox.Show(result.ToString());//Result 24
    }
  • Show JavaScript alert:
    JavaScript
    private void bntJSAlert_Click(object sender, RoutedEventArgs e)
    {
    	System.Windows.Browser.HtmlWindow win = 
    		System.Windows.Browser.HtmlPage.Window;
    	win.Alert("Hello DOM!");
    }
  • Navigate to Link:
    C#
    private void btnNavigateToLink_Click(object sender, RoutedEventArgs e)
    {
    	string target = "_blank";
    	System.Windows.Browser.HtmlPage.Window.Navigate
    		(new Uri("http://silverlight.net"), target);
    }
    _blank	Open the linked document in a new window or tab
    _self	Open the linked document in the same frame as it was clicked 
    	(this is default)
    _parent	Open the linked document in the parent frameset
    _top	Open the linked document in the full body of the window
    framename	Open the linked document in a named frame
  • Navigate to Bookmark:
    C#
    private void btnNavigateToBookmark_Click(object sender, RoutedEventArgs e)
    {
    	System.Windows.Browser.HtmlPage.Window.NavigateToBookmark("headerDiv");
    }
  • Get Browser Information:
    C#
    private void btnGetBrowserInformation_Click(object sender, RoutedEventArgs e)
    {
    	System.Windows.Browser.BrowserInformation bInfo = 
    		System.Windows.Browser.HtmlPage.BrowserInformation;
    
    	int majorVersion = bInfo.BrowserVersion.Major;
    	int minorVersion = bInfo.BrowserVersion.Minor;
    	int revisionVersion = bInfo.BrowserVersion.Revision;
    	int buildVersion = bInfo.BrowserVersion.Build;
    
    	bool cookiesEnabled = bInfo.CookiesEnabled;
    
    	string name = bInfo.Name;
    	string platform = bInfo.Platform;
    	string productName = bInfo.ProductName;
    	string productVersion = bInfo.ProductVersion;
    	string userAgent = bInfo.UserAgent;
    }

History

  • 16th July, 2011: Initial version

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Jordan Jordan
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
-- There are no messages in this forum --