Geek Answers Handbook

Add javascript to generated html test page for Silverlight project

VS2010, Silverlight 4.0.

Does anyone know if there is a way for Visual Studio to add javascript (or something for that matter) to the html test page that it generates when compiling the silverlight project for debugging? Does he use a template, and if so, where is he?

+6
visual-studio silverlight
source share
1 answer

Really interesting question!
I tried to do something similar and finally found a crude but fairly effective solution:

First of all, you have to set a specific page using Properties → Debugging → Specific Page. Example of my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>SilverlightApplication1</title> <script type="text/javascript"> </script> </head> <body> <div id="fillWithData"> </div> <form id="form1" runat="server" style="height:100%"> <div id="silverlightControlHost" style="height: 100%; text-align:center"> <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="30%" height="30%"> <param name="source" value="file:///C:/Users/Igor/Documents/Visual Studio 2010/Projects/MobileTest/SilverlightApplication1/Bin/Debug/SilverlightApplication1.xap"/> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="4.0.50826.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none"> <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/> </a> </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div> </form> </body> </html>

NOTE: blank script and div elements are important! we will load dynamic js / html into them.

My silver light xaml.cs:

 public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { HtmlDocument hostPage = HtmlPage.Document; ScriptObject obj = hostPage.GetElementsByTagName("script")[0]; obj.SetProperty("innerHTML", "function alertonclick() { alert('Amazing! I am dynamic javascript!'); }"); HtmlElement ipAddressHtml = hostPage.GetElementById("fillWithData"); ipAddressHtml.SetProperty("innerHTML", @"<input id=""Button1"" type=""button"" value=""button"" onclick=""alertonclick();"" />"); } }

VERY IMPORTANT NOTE! I tested this code and it only works in Opera. If you need to check something using some other browser, you can embed javascript directly into the element.

Example:

 public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); Loaded += new RoutedEventHandler(MainPage_Loaded); } void MainPage_Loaded(object sender, RoutedEventArgs e) { HtmlDocument hostPage = HtmlPage.Document; HtmlElement ipAddressHtml = hostPage.GetElementById("fillWithData"); ipAddressHtml.SetProperty("innerHTML", @"<input id=""Button1"" type=""button"" value=""button"" onclick=""alert('Amazing! I am dynamic javascript!');"" />"); } }

This code works well in IE / FF / Chrome / Opera (of course :)).
As for me, I like the first example with both dynamic js and html. And I am sure that it is possible to fix it and make another browser acceptable, and not just Opera.
I hope my examples help you =)

+1
source share

More articles:


All Articles